jQuery easyUI--选项卡右键菜单
2018-02-23 18:25
239 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡右键菜单</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script> <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" /> <link rel="stylesheet" href="../js/easyui/themes/icon.css" /> <!-- 引入ztree --> <script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/> <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="' + 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树形菜单数据 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.itcast.cn"}, {id:14,pId:2,name:"百度",page:"https://www.baidu.com"} ]; // 3、生成菜单 $.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:'你我他学习吧管理系统'" style="height: 100px;">北部区域</div> <div data-options="region:'west',title:'菜单导航'" style="width: 180px;"> <!--折叠面板 --> <div class="easyui-accordion" data-options="fit:true"> <div data-options="title:'基础菜单'"> <!-- 通过ztree 插件,制作树菜单 --> <ul id="baseMenu" class="ztree">< d431 /ul> </div> <div data-options="title:'系统菜单'">面板二</div> </div> </div> <div data-options="region:'center'"> <!-- 选项卡面板--> <div id="mytabs" class="easyui-tabs" data-options="fit:true"> <div data-options="title:'选项卡面板一',closable:true">选项卡面板一</div> <div data-options="title:'选项卡面板二'">选项卡面板二</div> </div> </div> <div data-options="region:'east'" style="width: 80px;">东部区域</div> <div data-options="region:'south'" style="height: 80px;">南部区域</div> <!-- 菜单 初始化都是隐藏的--> <div id="mm" class="easyui-menu" style="width:120px;"> <div>关闭当前窗口</div> <div>关闭其它窗口</div> <div class="menu-sep"></div> <!-- 分隔线 --> <div data-options="iconCls:'icon-cancel'">关闭全部窗口</div> </div> </body> </html>
相关文章推荐
- jQuery EasyUI右键菜单实现关闭标签/选项卡
- jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
- Jquery EasyUI Datagrid右键菜单实现方法
- jQuery easyUI--树形菜单整合选项卡
- jQuery easyUI 添加tab并为tab添加右键菜单---每天多学一点
- J2EE系列:右键快捷菜单实现jquery easyui tabs 刷新关闭
- 【EasyUI】EasyUI主页面布局:左侧菜单tree、tabs选项卡、tabs右键菜单
- 实现JQuery EasyUI右键菜单变灰不可用效果
- jquery easyui 右键菜单
- C#中用鼠标右键选中tabpage选项卡 并且弹出右键菜单,实现选项卡的关闭
- JQuery EasyUI 最简单的左右布局实现及tab的右键菜单实现
- jQuery EasyUI实现右键菜单变灰不可用效果
- jQuery EasyUI实现右键菜单变灰不可用效果
- JQuery EasyUI 实现tree的右键菜单
- C#中用鼠标右键选中tabpage选项卡 并且弹出右键菜单,实现选项卡的关闭
- IE右键菜单没有出现“在新选项卡中打开”的解决方法
- 如何代码实现ArcGlobe中TOC右键菜单下Elevation选项卡中的Floating on a custom surface功能
- 迅雷组件与IE冲突导致IE右键菜单新建选项卡中打开不见了
- JQuery EasyUI 最简单的左右布局实现及tab的右键菜单实现
- Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件