作者:ssslinppp
1. 摘要
一般我们在设计程序主框架的时候,当点击(子)菜单时,希望相应界面都在tabs页中显示;
在显示的时候,如果之前打开过该界面,则希望重新选中对应的tab页,并刷新;
如果之前没有打开对应的tab页,则创建一个新的tab页;
如下图所示:
2. jsp界面
<!-- 主操作区 -->
<div region="center" style="background:#eee; overflow-y:hidden" >
<div id="centerTabs" class="easyui-tabs" fit="true" border="false" >
</div>
</div>
<!--===================================其他信息===================================-->
<!--tabs页右键选项 -->
<div id="mm" class="easyui-menu" style="width:150px;z-index:90000000">
<div id="mm-tabupdate">刷新</div>
<div class="menu-sep"></div>
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseall">全部关闭</div>
<div id="mm-tabcloseother">除此之外全部关闭</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">当前页右侧全部关闭</div>
<div id="mm-tabcloseleft">当前页左侧全部关闭</div>
</div>
3. 二级菜单
二级菜单:
var actionUrl = basePath + "getMainMenu.action";
var params = {
};
//菜单请求
$.ajax({
type : "POST",
url : actionUrl,
data : params,
dataType : "json",
async : false,
cache : false,
error : function(textStatus, errorThrown) {
$.messager.alert(‘错误‘, "系统菜单加载失败: " + textStatus, ‘error‘);
},
success : function(data, textStatus) {
var menuList1 = "";
$.each(data.menuList, function(i, o) {
if(o.select){
var mid = "#m"+i;//一级菜单mid
var mmmid = "m"+i;
menuList1 += ‘<a href="javascript:void(0)" class="easyui-menubutton" menu="‘+mid+‘" iconCls="‘+o.iconName+‘" style="width:130px;">‘+o.menuName+‘</a>‘;
menuList1 += ‘<div id="‘+mmmid+‘" style="width:130px;">‘;
$.each(o.childMenus, function(j, p) {
if(p.select){
var secondMenuId = ""+i+j;
menuList1 += ‘<div id="‘+secondMenuId+‘" iconCls="‘+p.iconName+‘" url="‘+p.urlPath+‘" class="secondMenu">‘+p.menuName+‘</div>‘;
}
});
menuList1 += ‘</div>‘
}
})
$(".menu1").append(menuList1);
}
});
2级菜单是通过拼接HTML语言完成的,拼接后的代码形如:
<a href="javascript:void(0)" class="easyui-menubutton" menu="#m0" iconCls="icon-ok" style="width:130px;">一级菜单1</a>
<div id="m0" style="width:130px;">
</div>
<a href="javascript:void(0)" class="easyui-menubutton" menu="#m1" iconCls="icon-ok" style="width:130px;">一级菜单2</a>
<div id="m1" style="width:130px;">
<div id="10" iconCls="icon-ok" url="null" class="secondMenu">二级菜单21</div>
<div id="11" iconCls="icon-ok" url="null" class="secondMenu">二级菜单22</div>
<div id="12" iconCls="icon-ok" url="null" class="secondMenu">二级菜单23</div>
<div id="13" iconCls="icon-ok" url="null" class="secondMenu">二级菜单24</div>
</div>
4. tabs
/*选择2级菜单功能项后在center区域 添加tabs*/
$(".secondMenu").click(function(){
var name = $(this).text();
if($("#centerTabs").tabs(‘exists‘, name)){ //选中并更新
$(‘#centerTabs‘).tabs(‘select‘, name);
$(‘#mm-tabupdate‘).click();
}
else{
var url = basePath+$(this).attr("url"); //要加载界面的URL--action请求
var icons = $(this).attr("iconCls");
$(‘#centerTabs‘).tabs(‘add‘,{
title:name,
url: url,
icon:icons,
content:‘<iframe scrolling="auto" frameborder="0" id="‘+name+‘" name="‘+name+‘" src="‘+url+‘" style="width:100%;height:100%"></iframe>‘,
closable:true});
};
});
//绑定右键菜单事件
function tabCloseEven(){
//刷新
$(‘#mm-tabupdate‘).click(function(){
var currTab = $(‘#centerTabs‘).tabs(‘getSelected‘);
var content = $(currTab.panel(‘options‘).content);
$(‘#centerTabs‘).tabs(‘update‘,{
tab:currTab,
options:{
content:content
}
})
});
};
代做毕设:
淘宝链接: http://shop110473970.taobao.com/shop/view_shop.htm?spm=a1z0e.1.10010.3.2j85Z2
时间: 2024-10-02 19:21:18