(一):环境引用
当引入的easyui.min 的 时候,等于引入了所有组件,在页面通过引入以下东西
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<!--主题-->
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../css/default.css">
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui/ext/jquery.cookie.js"></script>
<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<!-- 导入ztree类库 -->
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css" />
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
(二):最终界面
(三) 逐步实现: 总体布局
<body class="easyui-layout">
<div data-options="region:'north',title:'northOption'" style="height: 100px;" >
north 区域
</div>
<div data-options="region: 'west',title:'westOption' " style="height: 100px">
west 区域
</div>
<div data-options="region: 'center',title:'中央区域' ">
中央区域
</div>
<div data-options="region: 'east' ,title:'eastOption' " style="width: 80px">
east 区域
</div>
<div data-options="region: 'south' ,title:'southOption' " style="height: 80px">
south 区域
</div>
</body>
对指定区域添加下拉选项:
初始化ZTree, 是由ul标签, class="tree"引入
$.fn.zTree.init($("#baseMenu"), setting, zNodes); //arg0:选定UL 定位; //arg1,设置该树所基于的类型:
var setting = { data: { simpleData: { enable: true // 支持简单json数据格式 } } };var zNodes = [ {id:1,pId:0,name:"父节点一"}, //id 就是自身ID {id:2,pId:0,name:"父节点二"}, //pId: 所属父节点 {id:11,pId:1,name:"子节点一"}, //name;就是name {id:12,pId:1,name:"子节点二"}, {id:13,pId:2,name:"子节点三"}, {id:14,pId:2,name:"子节点四"} ]; 根据需要,在对 ZNodes,进行更改// arg2,Zodes 主要设置具体节点信息,这里先任意写几个,测试是否能成功
var zNodes = [ {id:1,pId:0,name:"父节点一"}, {id:2,pId:0,name:"父节点二"}, {id:11,pId:1,name:"子节点一",page:"lalal.cn"}, {id:12,pId:1,name:"子节点二",page:"bbb.cn"}, {id:13,pId:2,name:"HTML1",page:"http://www.baidu.cn"}, {id:14,pId:2,name:"HTML2",page:"https://www.baidu.com"} ];
zNodes,主要用于设置树节点信息
下一步:树形菜单整合选项卡,就是说tree被点击时,生成选项卡,并且在该选项卡所属的位置,显示出真实内容
通过Ztree,联动选项卡,主要是修改tree里面的setting信息
$(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="' + treeNode.page + '" 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树形菜单数据
这个page是啥? ,反正这样写,所链接的东西就到选项卡所在的选项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:"HTML1",page:"http://www.baidu.cn"}, {id:14,pId:2,name:"HTML2",page:"https://www.baidu.com"} ]; // 3、生成菜单 $.fn.zTree.init($("#baseMenu"), setting, zNodes); });
对选项卡进行右键增强,屏蔽原先右键,增加自定义右键
首先创建DIV 承载右键信息.
<!--设置右键选项,通过class="easyui-mune"--> <div id="mm" class="easyui-menu" style="width:120px;"> <div id="closeCurr" data-options="iconCls:'icon-cancel'">关闭当前窗口</div> <div id="closeOthers" data-options="iconCls:'icon-cancel'">关闭其它窗口</div> <div> <span>Open</span> <div style="width:150px;"> <div><b>Word</b></div> <div>Excel</div> <div>PowerPoint</div> </div> </div> <div data-options="name:'new'">new</div> <div class="menu-sep"></div> <!-- 分隔线 --> <div id="closeAll" data-options="iconCls:'icon-cancel'">关闭全部窗口</div> </div>
屏蔽自带右键 并且确定上述DIV位置跟随鼠标
选定选项卡所在的DIV ,屏幕IE自带的右键,添加自定义右键 $("#mytabs").tabs({ onContextMenu: function(e, title,index){ // 阻止默认菜单显示 e.preventDefault(); // 显示自定义右键菜单 $("#mm").menu('show',{ left : e.pageX, top : e.pageY }); } });
最后,对上面的DIV实现功能