jqueryeasyui的accordion和tabs控件

"tabs" class="easyui-tabs"border="false"fit="true">

 

 

其他方法

var index = 0;

                   functionaddTab(){

                            index++;

                            $('#tt').tabs('add',{

                                     title:'NewTab ' + index,

                                     content:'',

                                     iconCls:'icon-save',

                                     closable:true

                            });

                   }

                   functiongetSelected(){

                            vartab = $('#tt').tabs('getSelected');

                            alert('Selected:'+tab.panel('options').title);

                   }

                   functionupdate(){

                            index++;

                            vartab = $('#tt').tabs('getSelected');

                            $('#tt').tabs('update',{

                                     tab:tab,

                                     options:{

                                               title:'newtitle'+index,

                                               iconCls:'icon-save'

                                     }

                            });

                   }

 

本系统应用：点击菜单打开一个新的标签。标签内容显示菜单链接的内容

本系统显示tabs的区域

<DIVstyle="background:rgb(238, 238, 238); overflow-y: hidden;"

       id="mainPanle"region="center">

       <DIVid="tabs"class="easyui-tabs"border="false"fit="true">DIV>

    DIV>

实现思路:点击菜单新建一个tab，内容拼接成一个iframe的html 如下

function addTab(){

                            index++;

                            $('#tt').tabs('add',{

                                     title:'NewTab ' + index,

                                     content:'<iframescrolling="yes"frameborder="0" src="http://localhost:8080/yycgproject/first.action#">',

                                     iconCls:'icon-save',

                                     closable:true

                            });

                   }

二级菜单与tabs的关联功能实现

1.在二级菜单上加一个点击事件

    //鼠标移动效果

    //指定a的点击事件是menuclick

    $('.easyui-accordion lia').click(menuclick).hover(function(){

       $(this).parent().addClass("hover");

    },function(){

       $(this).parent().removeClass("hover");

    });

}

2.点击事件（获取二级菜单的属性tabTitle url icon）触发addTab方法

//菜单单击事件

varmenuclick= function(){

       //var tabTitle= $(this).children('.nav').text();

        //获取二级菜单的title,数据从后台的menu.json中获取

       vartabTitle = $(this).attr("title");

       //获取二级菜单的url,rel是获取json数据时拼接成的html的一部分

       varurl = $(this).attr("rel");

       var menuid = $(this).attr("ref");

       varicon = 'icon '+$(this).attr("icon");

       addTab(tabTitle,url,icon);

       $('.easyui-accordion lidiv').removeClass("selected");

       $(this).parent().addClass("selected");

};

3.添加标签并拼接创建iframe(如果tabs存在就选中不存在就创建)

function addTab(subtitle,url,icon){

    //如果指定标题的tab不存则添加一个新的

    if(!$('#tabs').tabs('exists',subtitle)){

       $('#tabs').tabs('add',{

           title:subtitle,

           content:createFrame(url),

           closable:true,

           icon:icon

       });

    }else{

       //如果tabs已创建则选中

       $('#tabs').tabs('select',subtitle);

    }

}

4. 根据url 拼接创建iframe

functioncreateFrame(url)

{

    var s ='';

    return s;

}

 

5.界面欢迎页面（onSelect :tabOnSelect选中tab执行的事件）

//加载欢迎页面

       $('#tabs').tabs('add', {

           title : '欢迎使用',

           content :createFrame('${baseurl}welcome.action')

       }).tabs({

           //当重新选中tab时将ifram的内容重新加载一遍

           onSelect :tabOnSelect

       });

      

       //修改密码

       $('#modifypwd').click(menuclick);

    });

6. 重新选中tabs时重新刷新页面内容 tabOnSelect（'update'更新tab 的内容并重新构造一个iframe.  相当于刷新iframe功能）

vartabOnSelect = function(title) {

       //根据标题获取tab对象

       varcurrTab = $('#tabs').tabs('getTab', title);

       variframe = $(currTab.panel('options').content);//获取标签的内容

      

       varsrc = iframe.attr('src');//获取iframe的src

       //当重新选中tab时将ifram的内容重新加载一遍，目的是获取当前页面的最新内容

       if(src)

           $('#tabs').tabs('update', {

              tab :currTab,

              options: {

                  content: createFrame(src)//ifram内容

              }

           });

 

    };