jQuery EasyUi实现tab页

在项目中往往会遇到这种情况，点击菜单，上面出现tab页，下次如果再要访问这个菜单下面的数据就不用重新加载，以下代码是我这次在项目中用jQuery EasyUI实现的tab页：

在jsp中需要引入的重要js：

<link href="<%=request.getContextPath()%>/common/jquery-easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/common/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath()%>/common/js/jquery.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/common/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>

接下来是jsp中的tab页div：

<div id="phone_list_date">
			<div id="tab" class="easyui-tabs">
			</div>
		</div>

以下是js中对应的一些代码，菜单树使用的也是jquery EasyUI实现的

//加载菜单树
	$('#tt').tree({
		data: menuData,
		loadFilter: function(rows) {
			return convert(rows);
		},
		onClick : function(node) {   //点击onclick事件，查询出对应的数据
			addTablePanel(node);   //添加table页
			onclickMenu(node);   //数据加载到table页中
		}
	});

下面代码是向页面中添加tab页的核心代码：

/**
 * 点击菜单树添加table页
 */
function addTablePanel(node){
	 if(isTabExists(node.text)){
		  $('#tab').tabs('select',node.text);//选中当前tabs
	 }else{
		 $('.multipleAnalyse_iframe').removeClass("multipleAnalyse_iframe").addClass('xx');
		 $('#tab').tabs('add',{
			 title:node.text,
			 content:"<iframe class='multipleAnalyse_iframe' style='height:100%; width:100%'></iframe>", //每个tab页里面添加一个iframe标签
			 closable:true
		 });
		 $('.multipleAnalyse_iframe').height($('#phone_list_date').height()-29);
	 }
}
/**
 * 判断tab页是否存在
 * @param title
 * @returns
 */
function isTabExists(title){
	return $('#tab').tabs('exists',title);
}

下面代码就是向tab页里面添加数据啦，这里添加的又是jsp页面

/**
 * 根据不同的菜单，向iframe里面添加不同的jsp页面
 * @param node
 */
function onclickMenu(node){
	var nodeId = node.id;
	switch(nodeId){
	case 93: //DT用户跟踪
		$(".multipleAnalyse_iframe").attr("src",path+"/multipleAnalyse/jsp/extendsBusinessAnalyse.jsp");
        <span style="white-space:pre">	</span>$.messager.alert('提示','演示版暂时未提供该功能演示，请谅解！！');
		break;
	}
}