easyui之菜单导航切换Tab

    xiaoxiao2021-12-12  2

    1, 主页HTML 引包 <link rel="stylesheet" type="text/css" href="../js_lib/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../js_lib/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../res/css/mlh.css"> <script type="text/javascript" src="../js_lib/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../js_lib/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="../js_lib/easyui/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="../js/admin.js"></script> DIV设置north(上,标题)south(下)west(左,菜单)east(右)center(居中,主工作区,Tab选项卡) <div id="cc" class="easyui-layout">    <div id="c_north" data-options="region:'north'">       <div id="c_west" data-options="region:'west',split:true" title="导航菜单" style="width: 200px;"></div>         <div id="c_center" data-options="region:'center', border: false">             <div id="c_tabs" class="easyui-tabs" data-options="fit:true, border: false">                   <div id="tab_index" title="首页">首页</div>             </div>         </div> </div> 2, 主页JS 菜单项 var menuData = [        {id: "2",text: "系统配置",linkUrl:},     {id: "3",text: "业务管理",linkUrl: }     ]; 菜单节点() $(function() {     $('#cc').layout({fit: true});          // 菜单树节点点击事件     $('#c_west').tree({            onClick: function(node) {             var href = node.linkUrl;             if (!href) return;                          var tab = $('#c_tabs').tabs('getTab', 1);                          if (tab) {// 存在则先关闭                 $('#c_tabs').tabs('close', 1);             }                          $('#c_tabs').tabs('add', {                 closable: true,                 cache: false,                 title: node.text,                 border: false,                 index: 1             });                          tab = $('#c_tabs').tabs('getTab', 1);             tab.panel('refresh', href);         }     });          // 加载菜单树数据,菜单默认是全部展开的     $('#c_west').tree('loadData', menuData);          // 皮肤     $('#cb-theme').combobox({         data: [             {value:'default',text:'Default'},             {value:'gray',text:'Gray'},             {value:'metro',text:'Metro'},             {value:'bootstrap',text:'Bootstrap'}         ],         editable: false,         panelHeight: 'auto',         onChange: function(theme) {             var link = $(document).find('link:first');             link.attr('href', '../js_lib/easyui/themes/'+theme+'/easyui.css');         },         onLoadSuccess: function() {             $(this).combobox('setValue', 'default');         }     }); }); 3,tab选项卡页面 <div class="easyui-layout" style="width: 100%; height: 100%;" data-options="region:'center'" >      <div id="tab_index" title="Tab1">hello</div> </div> 4,controller层 @RequestMapping("/controller") public class Controller {     @RequestMapping("/admin")      public String index(HttpServletRequest request) {         return "ui/Tab1";     }
    转载请注明原文地址: https://ju.6miu.com/read-900256.html

    最新回复(0)