给jquery easy-ui 添加右键菜单
版权声明：转自为EasyUI 的Tab 标签添加右键菜单
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <title>tabs 右键菜单demo QQ：15129679</title> 6 <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css" /> 7 <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/default/easyui.css" /> 8 <link rel="stylesheet" type="text/css" href="static/js/zTree/zTreeStyle/zTreeStyle.css" /> 9 <script type="text/javascript" src="static/js/jquery.min.js"></script> 10 <script type="text/javascript" src="static/js/easyui/jquery.easyui.min.js"></script> 11 <script type="text/javascript" src="static/js/zTree/jquery.ztree.min.js"></script> 12 </head> 13 <body class="easyui-layout"> 14 <div data-options="region:'north',border:false" style="height: 60px; padding: 10px"> 15 tabs 右键菜单demo QQ：15129679</div> 16 <div data-options="region:'west',split:true,title:'操作菜单'" style="width: 150px; padding: 10px;"> 17 <ul id="webMenu_list" class="ztree" style="display: ;"> 18 </ul> 19 </div> 20 <div data-options="region:'center',title:'',border:false"> 21 <div id="tt" class="easyui-tabs" data-options="fit:true"> 22 <div title="首页" style="padding: 20px;"> 23 <h3> 24 欢迎您来到网站信息管理系统<br> 25 我的博客地址:http://www.cnblogs.com/yeminglong/p/3745914.html 26 27 </h3> 28 </div> 29 </div> 30 </div> 31 <div id="mm" class="easyui-menu" style="width:120px;"> 32 <div id="mm-tabclose" data-options="name:1">关闭</div> 33 <div id="mm-tabcloseall" data-options="name:2">全部关闭</div> 34 <div id="mm-tabcloseother" data-options="name:3">除此之外全部关闭</div> 35 <div class="menu-sep"></div> 36 <div id="mm-tabcloseright" data-options="name:4">当前页右侧全部关闭</div> 37 <div id="mm-tabcloseleft" data-options="name:5">当前页左侧全部关闭</div> 38 39 </div> 40 <script type="text/javascript"> 41 42 43 //添加Tabs 44 function addTabs(event, treeId, treeNode, clickFlag){ 45 if(!$("#tt").tabs('exists', treeNode.name)){ 46 $('#tt').tabs('add',{ 47 id:treeId, 48 title: treeNode.name, 49 selected: true, 50 href:treeNode.dataurl, 51 closable:true 52 }); 53 }else $('#tt').tabs('select',treeNode.name); 54 } 55 56 //删除Tabs 57 function closeTab(menu, type){ 58 var allTabs = $("#tt").tabs('tabs'); 59 var allTabtitle = []; 60 $.each(allTabs,function(i,n){ 61 var opt=$(n).panel('options'); 62 if(opt.closable) 63 allTabtitle.push(opt.title); 64 }); 65 66 switch (type){ 67 case 1 : 68 var curTabTitle = $(menu).data("tabTitle"); 69 $("#tt").tabs("close", curTabTitle); 70 return false; 71 break; 72 case 2 : 73 for(var i=0;i<allTabtitle.length;i++){ 74 $('#tt').tabs('close', allTabtitle[i]); 75 } 76 break; 77 case 3 : 78 79 break; 80 case 4 : 81 82 break; 83 case 5 : 84 85 break; 86 } 87 88 } 89 90 91 $(document).ready(function () { 92 //监听右键事件，创建右键菜单 93 $('#tt').tabs({ 94 onContextMenu:function(e, title,index){ 95 e.preventDefault(); 96 if(index>0){ 97 $('#mm').menu('show', { 98 left: e.pageX, 99 top: e.pageY 100 }).data("tabTitle", title); 101 } 102 } 103 }); 104 //右键菜单click 105 $("#mm").menu({ 106 onClick : function (item) { 107 closeTab(this, item.name); 108 } 109 }); 110 //treeNodes 111 var zNodes = [ 112 { id:1, pId:0, name:"操作菜单", open:true,url:"",click:false}, 113 { id: 11, pId: 1, name: "杨凌现代农业科技创业网", dataurl: "02.html", target: "_self" }, 114 { id: 12, pId: 1, name: "杨凌外贸农产品质量溯源公共服务平台", dataurl: "02.html", target: "_self" }, 115 { id: 13, pId: 1, name: "华县农产品标准化生产溯源管理系统华县农产品标准化生产溯源管理系统", dataurl: "02.html", target: "_self" }, 116 { id: 14, pId: 1, name: "杨陵区科技局", dataurl: "02.html", target: "_self" }, 117 { id: 15, pId: 1, name: "杨陵区农民专业合作社联合会", dataurl: "02.html", target: "_self" }, 118 { id: 16, pId: 1, name: "杨凌农产品标准化生产溯源管理系统", dataurl: "02.html", target: "_self" }, 119 { id: 17, pId: 1, name: "站点列表", dataurl: "02.html", target: "_self" }, 120 { id: 18, pId: 1, name: "站点列表", dataurl: "02.html", target: "_self" } 121 ]; 122 123 var setting = { 124 view: { 125 selectedMulti: false 126 }, 127 callback: { 128 onClick: addTabs 129 } 130 }; 131 132 $.fn.zTree.init($("#webMenu_list"), setting,zNodes); 133 134 }); 135 </script> 136 </body> 137 </html>
1 //删除Tabs 2 function closeTab(menu, type) { 3 var allTabs = $("#tt").tabs('tabs'); 4 var allTabtitle = []; 5 $.each(allTabs, function (i, n) { 6 var opt = $(n).panel('options'); 7 if (opt.closable) 8 allTabtitle.push(opt.title); 9 }); 10 var curTabTitle = $(menu).data("tabTitle"); 11 var curTabIndex = $("#tt").tabs("getTabIndex", $("#tt").tabs("getTab", curTabTitle)); 12 switch (type) { 13 case 1: 14 $("#tt").tabs("close", curTabIndex); 15 return false; 16 break; 17 case 2: 18 for (var i = 0; i < allTabtitle.length; i++) { 19 $('#tt').tabs('close', allTabtitle[i]); 20 } 21 break; 22 case 3: 23 for (var i = 0; i < allTabtitle.length; i++) { 24 if (curTabTitle != allTabtitle[i]) 25 $('#tt').tabs('close', allTabtitle[i]); 26 } 27 $('#tt').tabs('select', curTabTitle); 28 break; 29 case 4: 30 for (var i = curTabIndex; i < allTabtitle.length; i++) { 31 $('#tt').tabs('close', allTabtitle[i]); 32 } 33 $('#tt').tabs('select', curTabTitle); 34 break; 35 case 5: 36 for (var i = 0; i < curTabIndex-1; i++) { 37 $('#tt').tabs('close', allTabtitle[i]); 38 } 39 $('#tt').tabs('select', curTabTitle); 40 break; 41 } 42 43 }
1 <div id="mm" class="easyui-menu" style="width: 120px;"> 2 <div id="mm-tabclose" name="6"> 3 刷新</div> 4 <div id="Div1" name="1"> 5 关闭</div> 6 <div id="mm-tabcloseall" name="2"> 7 全部关闭</div> 8 <div id="mm-tabcloseother" name="3"> 9 除此之外全部关闭</div> 10 <div class="menu-sep"> 11 </div> 12 <div id="mm-tabcloseright" name="4"> 13 当前页右侧全部关闭</div> 14 <div id="mm-tabcloseleft" name="5"> 15 当前页左侧全部关闭</div> 16 </div>
1 //删除Tabs 2 function closeTab(menu, type) { 3 var allTabs = $("#tt").tabs('tabs'); 4 var allTabtitle = []; 5 $.each(allTabs, function (i, n) { 6 var opt = $(n).panel('options'); 7 if (opt.closable) 8 allTabtitle.push(opt.title); 9 }); 10 var curTabTitle = $(menu).data("tabTitle"); 11 var curTabIndex = $("#tt").tabs("getTabIndex", $("#tt").tabs("getTab", curTabTitle)); 12 switch (type) { 13 case 1://关闭当前 14 $("#tt").tabs("close", cutTabIndex); 15 return false; 16 break; 17 case 2://全部关闭 18 for (var i = 0; i < allTabtitle.length; i++) { 19 $('#tt').tabs('close', allTabtitle[i]); 20 } 21 break; 22 case 3://除此之外全部关闭 23 for (var i = 0; i < allTabtitle.length; i++) { 24 if (curTabTitle != allTabtitle[i]) 25 $('#tt').tabs('close', allTabtitle[i]); 26 } 27 $('#tt').tabs('select', curTabTitle); 28 break; 29 case 4://当前侧面右边 30 for (var i = curTabIndex; i < allTabtitle.length; i++) { 31 $('#tt').tabs('close', allTabtitle[i]); 32 } 33 $('#tt').tabs('select', curTabTitle); 34 break; 35 case 5: //当前侧面左边 36 for (var i = 0; i < curTabIndex - 1; i++) { 37 $('#tt').tabs('close', allTabtitle[i]); 38 } 39 $('#tt').tabs('select', curTabTitle); 40 break; 41 case 6: //刷新 42 var panel = $("#tt").tabs("getTab", curTabTitle).panel("refresh"); 43 break; 44 } 45 46 }
