效果如下
代碼如下
<html> <head> <title>easyui</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/Javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" href="easyui/themes/default/easyui.CSS" type="text/css"></link> <link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link> <script type="text/javascript"> var data = [ { "id" : 1, "text" : "menu demo 1", "children" : [ { "id" : 11, "text" : "menu demo 1 1", "url" : "/menu/demo/1/1" }, { "id" : 12, "text" : "menu demo 1 2", "url" : "/menu/demo/1/2" } ] }, { "id" : 2, "text" : "menu demo 2", "children" : [ { "id" : 21, "text" : "menu demo 2 1", "url" : "/menu/demo/2/1", "children" : [ { "id" : 211, "text" : "menu demo 2 1 1", "url" : "/menu/demo/2/1/1" } ] } ] } ]; function show () { for (var i = 0; i < data.length; i ++) { //添加分類 $("#menu").accordion('add', { id : data[i].id, title : data[i].text, selected : false }); //在分類中添加目錄 $('<div></div>').tree({ data : data[i].children, onClick : function(node) { tab(node); } }).appendTo("#" + data[i].id); } } function tab(node) { var tabs = $('#tabs'); //如果選項卡已經打開 if (tabs.tabs('exists', node.text)) { tabs.tabs('select', node.text); return; } //如果節點的url為空，不打開新選項卡 if (node.url == null || node.url == '') return; //添加新選項卡 tabs.tabs('add', { id : node.id, title : node.text, href : node.url, closable : true }); } </script> </head> <body class="easyui-layout" onload="show();"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:200px;"> <div id="menu" data-options="fit:true,border:false" class="easyui-accordion"></div> </div> <div data-options="region:'center',title:'center title'"> <div id="tabs" data-options="fit:true,border:false" class="easyui-tabs"> <div title="welcome">welcome</div> </div> </div> </div> </body></html>
新聞熱點
疑難解答
