easyui选项卡切换
这里主要介绍当对应的面板已经存在时,不能新增,否则就添加新的面板
body内容
<body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" style="height:90px;"></div> <div data-options="region:'west',title:'导航菜单栏',split:true" style="width:180px;"> <div id="aa" class="easyui-accordion" style="width:300px;height:300px;"> <div title="基础数据录入"> <!-- list-style: none去左边的点;text-decoration: none:去超链接下划线,title用来区分后继定位这里的超链接 --> <ul style="list-style: none;padding: 0px;margin:0px;"> <li style="padding: 6px;"><a href="${proPath}/supplier/supplierlist.action" title="供应商管理" style="text-decoration: none;display: block;font-weight:bold;">供应商管理</a> </li> <li style="padding: 6px;"><a href="${proPath}/base/goURL/goods/goodslist.action" title="商品管理" style="text-decoration: none;display: block;font-weight:bold;" >商品管理</a> </li> </ul> </div> </div> </div> <div data-options="region:'center'" style="border:0"> <div id="tt" class="easyui-tabs" data-options="fit:true" style="width:500px;height:250px;"> <div title="系统简介" style="padding:20px;"> XXX... </div> </div> </div> </body>
js:
<script type="text/javascript"> $(function() { $("a[title]").click(function() { var title = this.title; var text = this.href; alert(title); //如果对应的面板已经存在,就选择,否则就添加新的面板 if($('#tt').tabs("exists",title)){ $('#tt').tabs("select",title); }else{ $('#tt').tabs('add',{ title:title, selected: true, closable:true, //href:xxx.jsp, //可以加载内容填充到选项卡,页面有Js时,也可加载 content:"<iframe src='"+text+"' title='"+this.title+"' height='100%' width='100%' frameborder='0px' ></iframe>" //... }); } return false; }); }); </script>