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内容
}
});
};