【EasyUI学习-3】Easyui tabs入门实践

作者：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://localhost:8080/MainFrameTest/index.action 

---

代做毕设：

淘宝链接： http://shop110473970.taobao.com/shop/view_shop.htm?spm=a1z0e.1.10010.3.2j85Z2 

来自为知笔记(Wiz)

附件列表