jQuery易用户界面右键菜单实现关闭标签/选项卡

本文实例为大家分享了jQuery易用户界面右键菜单可以选择关闭标签/选项卡操作，供大家参考，具体内容如下

目录结构：

noContextMenu.js文件内容如下：

$(function(){ //屏蔽右键菜单$(文档)。绑定(' contextmenu '，函数{返回false});});效果图：

方式一：

“% @”页面语言=“Java”导入=“Java”。乌提尔。* "页面编码=' UTF-8 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML标题easyui右键菜单-关闭标签方式一/titlelink type='text/css' rel='样式表href=' $ { page context。请求。上下文路径}/jquery-measuri-1。3 .5/主题/默认/测量。CSS '/链接类型=' text/CSS ' rel='样式表href=' $ { page context。请求。上下文路径}/jquery-measuri-1。3 .5/主题/图标。CSS '/脚本类型=' text/JavaScript ' src=' http 3360生成标签标签$('#tt ').制表符({边框： true，/* on select : function(title){ alert(title)被选中');} */});//生成右键菜单$('#tt ').制表符({ onContextMenu:函数(e，标题，索引){ //选中标签$('#tt ').制表符(“选择”，索引)；//显示右键菜单$('#mm ').菜单(' show '，{ left: e.pageX，top : e . PageY })；} });//为每个菜单绑定点击事件//关闭选中的标签$('#closeCurrent ').单击(函数(){ //获取选中的标签索引var tab=$('#tt ').制表符(“GetSelected”)；定义变量索引=$('#tt ').制表符(' getTabIndex '，制表符);$('#tt ').制表符('关闭，索引);});//关闭选中标签之外的标签$(' #壁橱').单击(函数(){ //获取所有标签var tab=$(' # TT ').制表符('制表符');可变长度=tabs.length//获取选中标签的索引var tab=$('#tt ').制表符(“GetSelected”)；定义变量索引=$('#tt ').制表符(' getTabIndex '，制表符);//关闭选中标签之前的标签for(var I=0；索引我){ $('#tt ').制表符(“关闭”，0)；} //关闭选中标签之后的标签for(var I=0；一、长度-指数-1；我){ $('#tt ').制表符(“关闭”，1)；} });//关闭所有标签$('#closeAll ').单击(函数(){ var tab=$(' # TT ').制表符('制表符');var length=tab . length for(var I=0；长度我){ $('#tt ').制表符(“关闭”，0)；} });});/剧本/床头柜！-menu-div id=' mm ' class=' measuri-menu ' style=' width :120 px；div id='closeCurrent '名称='closeCurrent '数据-选项=' iconCls: '图标-否'关闭当前/div div id='壁橱' name='壁橱' data-options=' icon cl s 3360 ' icon-no ' '关闭其它/div div id='closeAll '名称='关闭所有'数据-选项=' iconCls: '图标-取消''关闭所有/div /div！-tab-div id=' TT ' class=' easyui-tab ' style=' width :500 px；高度：250 pxdiv title=' Tab1 ' data-options='可关闭的： true ' style='溢出的：隐藏；padd :20 pxdisplay : none tab 1/div div title=' Tab2 ' data-options=' closed : true ' style=' overflow : hidden；padd :20 pxdisplay : none tab 2/div div title=' Tab3 ' data-options=' closed : true ' style=' overflow : hidden；padd :20 pxdisplay : neonetab 3/div/div/body/html方式二：

“% @”页面语言=“Java”导入=“Java”。乌提尔。* "页面编码=' UTF-8 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML标题easyui右键菜单-关闭标签方式二/titlelink type='text/css' rel='样式表href=' $ { page context。请求。上下文路径}/jquery-measuri-1。3 .5/主题/默认/测量。CSS '/链接类型=' text/CSS ' rel='样式表href=' $ { page context。请求。上下文路径}/jquery-measuri-1。3 .5/主题/图标。CSS '/脚本类型=' text/JavaScript ' src=' http 3360生成标签标签$('#tt ').制表符({边框： true，/* on select : function(title){ alert(title)被选中');} */});//生成右键菜单$('#tt ').制表符({ onContextMenu:函数(e，标题，索引){ //让默认事件失效e . PreventDefault()；//选中标签//$('#tt ').制表符('选择，标题);$('#tt ').制表符(“选择”，索引)；//显示右键菜单$('#mm ').菜单(' show '，{ left: e.pageX，top : e . PageY })；$('#mm ').菜单({ onClick :函数(项目){/* alert(项目。姓名))；警报（此类型);*/壁橱(这个，项。姓名)；} });} });});//关闭标签的方法var壁橱b=函数（类型，menuName){ if(menuName==' closeCurrent '){//获取选中的标签索引var tab=$('#tt ').制表符(“GetSelected”)；定义变量索引=$('#tt ').制表符(' getTabIndex '，制表符);$('#tt ').制表符('关闭，索引);} else if(MenuMe==' cloud ethers '){//获取所有标签var tab=$(' # TT ').制表符('制表符');可变长度=tabs.length//获取选中标签的索引var tab=$('#tt ').制表符(“GetSelected”)；定义变量索引=$('#tt ').制表符(' getTabIndex '，制表符);//关闭选中标签之前的标签for(var I=0；索引我){ $('#tt ').制表符(“关闭”，0)；} //关闭选中标签之后的标签for(var I=0；一、长度-指数-1；我){ $('#tt ').制表符(“关闭”，1)；} } else if(menuName==' closeAll '){ var tab=$(' # TT ').制表符('制表符');var length=tab . length for(var I=0；长度我){ $('#tt ').制表符(“关闭”，0)；} } } ;/剧本/床头柜！-menu-div id=' mm ' class=' measuri-menu ' style=' width :120 px；div id='closeCurrent '名称='closeCurrent '数据-选项=' iconCls: '图标-否'关闭当前/div div id='壁橱' name='壁橱' data-options=' icon cl s 3360 ' icon-no ' '关闭其它/div div id='closeAll '名称='关闭所有'数据-选项=' iconCls: '图标-取消''关闭所有/div /div！-tab-div id=' TT ' class=' easyui-tab ' style=' width :500 px；高度：250 pxdiv title=' Tab1 ' data-options='可关闭的： true ' style='溢出的：隐藏；padd :20 pxdisplay : none tab 1/div div title=' Tab2 ' data-options=' closed : true ' style=' overflow : hidden；padd :20 pxdisplay : none tab 2/div div title=' Tab3 ' data-options=' closed : true ' style=' overflow : hidden；padd :20 pxdisplay : neonetab 3/div/div/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。