easyui實現tabs選項卡之間的切換(只顯示一個)
阿新 • • 發佈:2019-01-07
一、建立選單項
<div class="easyui-accordion" id="wl_accordion" data-options="fit:true,border:false"> <div title="aa" data-options="iconCls:'icon-hamburg-graphic'" style="overflow:auto;"> <ul class="easyui-tree"> <li data-options="iconCls:'icon-hamburg-monitor'"><a href="javascript:;" class="btn_menu" url="aa1url" name="icon-hamburg-monitor">aa1</a></li> </ul> </div> <div title="bb" data-options="iconCls:'icon-hamburg-graphic'" style="overflow:auto;"> <ul class="easyui-tree"> <li data-options="iconCls:'icon-hamburg-monitor'"><a href="javascript:;" class="btn_menu" url="bb1url" name="icon-hamburg-monitor">bb1</a></li> <li data-options="iconCls:'icon-hamburg-monitor'"><a href="javascript:;" class="btn_menu" url="bb2url" name="icon-hamburg-monitor">bb2</a></li> </ul> </div> </div>
二、點選選單生成tabs選項卡,並新增重新整理按鈕,實現選項卡之間切換(只顯示一個)
$(".tree-node").click(function () { var title = $(this).find(".btn_menu").text(); var url = $(this).find(".btn_menu").attr("url"); var icon = $(this).find(".btn_menu").attr("name"); var isSelect = $("#tabs").tabs('exists', title); var strHtml = '<iframe src="' + url + '" frameborder="0" width="100%" height="100%" marginwidth="0px" marginheight="0px" scrolling="no" style="display:block"></iframe>'; //'exists' 方法來判斷 tab 是否已經存在,如果為true,則選中tab if (isSelect) { $("#tabs").tabs('select', title); return; }else{ $(".tabs li").each(function (index, obj) { //獲取所有可關閉的選項卡 var tab = $(".tabs-closable", this).text(); $(".easyui-tabs").tabs('close', tab); }); //新增tab選單 $("#tabs").tabs('add', { title: title, content: strHtml, closable: true, iconCls: icon, //重新整理按鈕 tools: [{ iconCls: 'icon-mini-refresh', handler: function(){ $('.panel:visible > .panel-body > iframe').get(0).contentDocument.location.reload(true); } }] }); } });