jQuery EasyUI右键菜单实现关闭标签/选项卡

前端之家收集整理的这篇文章主要介绍了jQuery EasyUI右键菜单实现关闭标签/选项卡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

目录结构:

noContextMenu.js 文件内容如下:

屏蔽右键菜单 $(document).bind("contextmenu",function(e){ return false; }); });

效果图:

方式一:

easyui右键<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>-<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a><a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>方式一

<script type="text/javascript">
$(function() {

//生成tab标签
$('#tt').tabs({
border : true,/ onSelect : function(title) {
alert(title + ' is selected');
}
/
});

//生成右键菜单
$('#tt').tabs({
onContextMenu: function(e,title,index){
//选中标签
$('#tt').tabs('select',index);
//显示右键菜单
$('#mm').menu('show',{
left: e.pageX,top: e.pageY
}) ;
}
});

//为每个菜单绑定点击事件
//关闭选中的标签
$("#closeCurrent").click(function(){
//获取选中的标签索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
$("#tt").tabs("close",index);
});
//关闭选中标签之外的标签
$("#cloSEOthers").click(function(){
//获取所有标签
var tabs = $("#tt").tabs("tabs");
var length = tabs.length;
//获取选中标签的索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
//关闭选中标签之前的标签
for(var i=0;i<index;i++){
$("#tt").tabs("close",0);
}
//关闭选中标签之后的标签
for(var i=0;i<length-index-1;i++){
$("#tt").tabs("close",1);
}
});
//关闭所有标签
$("#closeAll").click(function(){
var tabs = $("#tt").tabs("tabs");
var length = tabs.length;
for(var i=0;i<length;i++){
$("#tt").tabs("close",0);
}
});

});

关闭当前
SEOthers" name="cloSEOthers" data-options="iconCls:'icon-no'">关闭其它
关闭所有

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab1


<div title="Tab2" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab2

<div title="Tab3" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab3

方式二:

    

easyui右键<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>-<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a><a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>方式二 <%--

<script type="text/javascript">
$(function() {
//生成tab标签
$('#tt').tabs({
border : true,/ onSelect : function(title) {
alert(title + ' is selected');
}
/
});

//生成右键菜单
$('#tt').tabs({
onContextMenu: function(e,index){
//让默认事件失效
e.preventDefault() ;
//选中标签
//$('#tt').tabs('select',title);
$('#tt').tabs('select',index);
//显示右键菜单
$('#mm').menu('show',top: e.pageY
});
$("#mm").menu({
onClick : function (item) {
/ alert(item.name);
alert(typeof this) ;
/
closeTab(this,item.name);
}
});
}
});

});

//关闭标签方法
var closeTab = function(type,menuName){
if(menuName == "closeCurrent"){
//获取选中的标签索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',index);
}else if(menuName == "cloSEOthers"){
//获取所有标签
var tabs = $("#tt").tabs("tabs");
var length = tabs.length;
//获取选中标签的索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',1);
}
}else if(menuName == "closeAll"){
var tabs = $("#tt").tabs("tabs");
var length = tabs.length;
for(var i=0;i<length;i++){
$("#tt").tabs("close",0);
}
}
} ;

关闭当前
SEOthers" name="cloSEOthers" data-options="iconCls:'icon-no'">关闭其它
关闭所有

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab1


<div title="Tab2" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab2

<div title="Tab3" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab3

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/45326.html
jQuery右键菜单标签标签标签选项卡

猜你在找的jQuery相关文章