首页 > 代码库 > EasyUI+zTree实现简单的树形菜单切换
EasyUI+zTree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <!--导入juery核心配置文件--> <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.8.3.js"></script> <!--导入easyui类库--> <script type="text/javascript" src="http://www.mamicode.com/js/easyui/jquery.easyui.min.js"></script> <!--导入默认主题css文件--> <link id="easyuiTheme" rel="stylesheet" type="text/css" href="http://www.mamicode.com/js/easyui/themes/default/easyui.css"/> <!--导入图标css文件--> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/js/easyui/themes/icon.css" /> <!--导入国际化文件--> <script src="http://www.mamicode.com/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <!-- 引入 ztree --> <script src="http://www.mamicode.com/js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/js/ztree/zTreeStyle.css"/> <title></title> <script type="text/javascript"> //页面加载后执行 $(function(){ //1.进行ztree菜单设置 var setting = { data: { simpleData:{ enable:true //支持简单的json数据 } }, callback: { onClick : function(event, treeId,treeNode,clickFlag){ var content= ‘<div style="width:100%;height:100%;overflow:hidden;">‘ + ‘<iframe src="http://www.mamicode.com/‘" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>‘; //没有page树形菜单,不打开选项卡 if(treeNode.page!=undefined && treeNode.page!=""){ //如果选项卡已经打开,选中 if($("#mytabs").tabs(‘exists‘,treeNode.name)){ //选中选项卡 $("#mytabs").tabs(‘select‘,treeNode.name); }else{ //如果没有打开,添加选项卡 $("#mytabs").tabs(‘add‘,{ title:treeNode.name, content:content, closable:true }); } } } } }; //2.提供ztree 树形菜单结构 var zNodes = [ {id:1,pId:0,name:"父节点一"}, {id:2,pId:0,name:"父节点二"}, {id:11,pId:1,name:"子节点一"}, {id:12,pId:1,name:"子节点二"}, {id:13,pId:2,name:"腾讯",page:"http://www.qq.com/"}, {id:14,pId:2,name:"百度",page:"http://www.baidu.com/"}, {id:21,pId:11,name:"子节点"}, {id:31,pId:21,name:"子节点"} ]; //3.生成菜单 //$.fn.zTree.init($("#baseMenu"),setting,zNodes); $.fn.zTree.init($("#baseMenu"),setting, zNodes); //对选项卡注册右键事件 $("#mytabs").tabs({ onContextMenu:function(e,title,index){ //阻止默认菜单显示 e.preventDefault(); //显示自定义右键菜单 $("#mm").menu(‘show‘,{ left : e.pageX, top : e.pageY }); } }); }); </script> </head> <body class="easyui-layout"> <div data-options="region:‘north‘,title:‘xxxx管理系统‘,split:true" style="height:100px;"></div> <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div> <div data-options="region:‘west‘,title:‘菜单导航‘,split:true" style="width:200px;"> <!--折叠面板--> <div class="easyui-accordion" data-options="fit:true"> <div data-options="title:‘基础菜单‘"> <!--<a href="javascript:void(0)" id="czbkLink">传智播客</a>--> <!--通过ztree插件制作树形菜单--> <ul id="baseMenu" class="ztree"></ul> </div> <div data-options="title:‘系统菜单‘"> </div> </div> </div> <div data-options="region:‘center‘,title:‘消息中心‘" style="padding:5px;background:#eee;"> <!--选项卡面板--> <div id="mytabs" class="easyui-tabs" data-options="fit:true"> <div data-options="title:‘选项卡面板一‘,closable:true">选项卡面板一</div> <div data-options="title:‘选项卡面板二‘,closable:true">选项卡面板二</div> </div> </div> <!--菜单,初始化都是隐藏的--> <div id="mm" class="easyui-menu" style="width: 120px;"> <div>关闭当前窗口</div> <div data-options="iconCls:‘icon-cancel‘">关闭其他窗口</div> <div class="menu-sep"></div> <!--分割线--> <div data-options="iconCls:‘icon-cancel‘">关闭全部窗口</div> </div> </body> </html>效果如下
EasyUI+zTree实现简单的树形菜单切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。