<script type="text/javascript"> $(function() { leftMenus(); }); function leftMenus() { var _menus=<%=jsonStr %>; //$(".easyui-accordion").empty(); $.each(_menus.menus, function(i, n) { $(".easyui-accordion").accordion('add', { title: n.text, content:moduleIndex(n.menus) }); }); $(".easyui-accordion").accordion(); $('.easyui-accordion li a').click(function() { var tabTitle = $(this).text(); var url = $(this).attr("href"); //alert(url); addTab(tabTitle,url); $('.easyui-accordion li div').removeClass("selected"); $(this).parent().addClass("selected"); }).hover(function() { $(this).parent().addClass("hover"); },function() { $(this).parent().removeClass("hover"); }); } function addTab(subtitle,url){ if(!$('#tabs').tabs('exists',subtitle)){ $('#tabs').tabs('add',{ title:subtitle, content:createFrame(url), closable:true, width:$('#mainPanle').width()-10, height:$('#mainPanle').height()-26 }); }else{ $('#tabs').tabs('select',subtitle); } //tabClose(); } function createFrame(url) { var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'; return s; } function moduleIndex(menusData) { var text=""; text += '<ul>'; $.each(menusData,function(j,o) { text += '<li><div ><a target="mainFrame" href="'+o.attributes+'" >' + o.text + '</a></div></li> '; }); text += '</ul>'; return text; } </script>
<body id="cc" class="easyui-layout"> <div data-options="region:'west',split:true" title="导航菜单" style="width: 200px;"> <div class="easyui-accordion" data-options="fit:true,border:false"> </div> </div> <div id="mainPanle" data-options="region:'center'"> <div id="tabs" class="easyui-tabs" fit="true" border="false" > <div title="欢迎使用" style="padding:20px;overflow:hidden;" id="home"> <h1>欢迎您使用，报表在线查询系统</h1> </div> </div> </div> </body>
展示效果图片：
