jqueryeasy ui 的 accordion 和 tabs控件

系统菜单accordion：（静态定义方法）
内容折叠显示，可以将复杂的信息分块显示  。不仅仅可以用于菜单

         <divid="aa" class="easyui-accordion"style="width:700px;height:300px;">

                   <divtitle="系统管理菜单" iconCls="icon-ok" style="overflow:auto;padding:10px;">

                  

                   </div>

                   <divtitle="Title2"iconCls="icon-reload" selected="true"style="padding:10px;">

                            content2

                   </div>

                   <divtitle="Title3">

                            content3

                   </div>

         </div>

用途：

用于左侧菜单。 根据用户的权限显示不同菜单。

要求easyui-accordion内部可以自定义div
的内容和数量。

自定义div
数量

通过add
方法添加新菜单（New Title）

 

function add(){

                            $('#aa').accordion('add',{

                                     title:'菜单的名称'+idx,

                                     content:'自定义一套二级菜单的html'+idx

                            });

                            idx++;

                   }

 

 'add'为easyui-accordion的方法名，后边的参数为json

{

title:'菜单的名称'

content:'自定义一套二级菜单的html'

}

 

 

选中当前菜单

function select(){

                            $('#aa').accordion('select','Title1');

                   }

删除当前菜单

function remove(){

                            varpp = $('#aa').accordion('getSelected');

                            if(pp){

                                     vartitle = pp.panel('options').title;

                                     $('#aa').accordion('remove',title);

                            }

                   }

 

在本系统中的应用

系统菜单配置在menu.json文件中菜单内容为两层json 数据嵌套分别为一级菜单和二级菜单

{
  "menus" : [{"icon" : "icon-sys","menuid": "1","menuname" :"系统管理","url": "","menus" : [
                 {"icon" :"icon-log","menuid": "1_1","menuname": "用户管理","url" : "/yycgproject/user/queryuser.action"
                 }]             
               }
             ]
}

easyui-accordion控件的引用通过预加载的方式加载菜单

 

   <DIV
style="background:
rgb(238, 238, 238);
overflow-y: hidden;"
      id="mainPanle"
region="center">
      <DIV id="tabs" class="easyui-tabs"
border="false"fit="true"></DIV>
   </DIV>

 

在script
中通过预加载的方式加载菜单

    var
_menus;
    $(function() {//预加载方法
       //通过ajax请求菜单
       $.ajax({
           url : '${baseurl}menu.json',
           type : 'POST',
           dataType: 'json',
           success :function(data) {
              _menus= data;
             
initMenu(_menus);//解析json数据，将菜单生成
           },
           error : function(msg) {
              alert('菜单加载异常!');
           }
       });

解析json 数据菜单的方法 initMenu通过两层循环解析menus 内容

title="'+o.menuname+'"ref="'+o.menuid+'" href="#" rel="' + o.url
 等为自定义的属性作用为点击二级菜单取出rel
值打开tab
标签

N 为一级菜单  O为二级菜单

 

//将后台获取的json菜单数据，组织成html
function initMenu(menus_var) {
   
    $("#nav").accordion({animate:false});

    //循环处理json的菜单数据，组织成html
    $.each(menus_var.menus,
function(i, n) {//外层循环处理一级菜单
       var menulist ='';
       menulist +='<ul>';
        $.each(n.menus,
function(j,
o) {//二层处理二级菜单
           
//这里自定义了一些属性存放菜单的内容：title存放菜单名称rel存放菜单地址，这些在属性在点击菜单时要取出值使用
           menulist
+= '<li><div><atitle="'+o.menuname+'" ref="'+o.menuid+'"href="#" rel="' + o.url +
'" icon="' + o.icon +
'"  ><span class="icon '+o.icon+'" > </span><spanclass="nav">' + o.menuname +
'</span></a></div></li> ';
        });
       menulist +=
'</ul>';//生成了菜单的html
       //自动创建菜单
       $('#nav').accordion('add', {
            title: n.menuname,
            content:
menulist,//二级菜单的内容
            iconCls:
'icon ' + n.icon
        });
});

 

 

系统标签tabs：(动态的需要预加载js)
Tabs 效果相当于浏览器的标签  就相当于安卓的Tabhost  

预加载方法

$(function(){

                  

                            $('#tt').tabs({

                                     tools:[{

                                               iconCls:'icon-add',

                                               handler:function(){

                                                        alert('add');

                                               }

                                     },{

                                               iconCls:'icon-save',

                                               handler:function(){

                                                        alert('save');

                                               }

                                     }]

                            });

                   });

引用

<div id="tt"style="width:500px;height:250px;">

 

 

其他方法

var index = 0;

                   functionaddTab(){

                            index++;

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

                                     title:'NewTab ' + index,

                                     content:'<iframescrolling="yes" frameborder="0" src="http://localhost:8080/yycgproject/first.action#"style="width:100%;height:100%;"></iframe>',

                                     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的区域

<DIV
style="background:
rgb(238, 238, 238);
overflow-y: hidden;"
       id="mainPanle"
region="center">
       <DIV
id="tabs"
class="easyui-tabs"
border="false"
fit="true"></DIV>
    </DIV>

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

function addTab(){

                            index++;

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

                                     title:'NewTab ' + index,

                                     content:'<iframe
scrolling="yes"frameborder="0" src="http://localhost:8080/yycgproject/first.action#"style="width:100%;height:100%;"></iframe>',

                                     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方法

//菜单单击事件
var
menuclick= function(){
       //var tabTitle= $(this).children('.nav').text();
       
//获取二级菜单的title,数据从后台的menu.json中获取
       var
tabTitle = $(this).attr("title");
       //获取二级菜单的url,rel是获取json数据时拼接成的html的一部分
       var
url = $(this).attr("rel");
       var menuid = $(this).attr("ref");
       var
icon = '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

function
createFrame(url)
{
    var s =
'<iframescrolling="auto" frameborder="0"  src="'+url+'"style="width:100%;height:100%;"></iframe>';
    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功能）

var
tabOnSelect = function(title) {
      
//根据标题获取tab对象
       var
currTab = $('#tabs').tabs('getTab', title);
       var
iframe = $(currTab.panel('options').content);//获取标签的内容
      

       var
src = iframe.attr('src');//获取iframe的src
       //当重新选中tab时将ifram的内容重新加载一遍，目的是获取当前页面的最新内容
       if
(src)
           $('#tabs').tabs('update', {
              tab :currTab,
              options: {
                  content: createFrame(src)//ifram内容
              }
           });
 
    };