jQuery EasyUI右鍵菜單實(shí)現(xiàn)關(guān)閉標(biāo)簽/選項(xiàng)卡
更新時(shí)間：2016年10月10日 08:31:09 作者：冷月葬殘花
這篇文章主要介紹了jQuery EasyUI右鍵菜單實(shí)現(xiàn)關(guān)閉標(biāo)簽/選項(xiàng)卡,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery EasyUI右鍵菜單可以選擇關(guān)閉標(biāo)簽/選項(xiàng)卡操作，供大家參考，具體內(nèi)容如下
目錄結(jié)構(gòu)：
noContextMenu.js 文件內(nèi)容如下：
$(function(){
//屏蔽右鍵菜單
$(document).bind("contextmenu", function(e){ return false; });
});
效果圖：
方式一：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>easyui右鍵菜單-關(guān)閉標(biāo)簽方式一</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/noContextMenu.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
//生成tab標(biāo)簽
$('#tt').tabs({
border : true,
/* onSelect : function(title) {
alert(title + ' is selected');
} */
});
//生成右鍵菜單
$('#tt').tabs({
onContextMenu: function(e, title, index){
//選中標(biāo)簽
$('#tt').tabs('select',index);
//顯示右鍵菜單
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
}) ;
}
});
//為每個(gè)菜單綁定點(diǎn)擊事件
//關(guān)閉選中的標(biāo)簽
$("#closeCurrent").click(function(){
//獲取選中的標(biāo)簽索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
$("#tt").tabs("close",index);
});
//關(guān)閉選中標(biāo)簽之外的標(biāo)簽
$("#closeOthers").click(function(){
//獲取所有標(biāo)簽
var tabs = $("#tt").tabs("tabs");
var length = tabs.length;
//獲取選中標(biāo)簽的索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
//關(guān)閉選中標(biāo)簽之前的標(biāo)簽
for(var i=0;i<index;i++){
$("#tt").tabs("close",0);
}
//關(guān)閉選中標(biāo)簽之后的標(biāo)簽
for(var i=0;i<length-index-1;i++){
$("#tt").tabs("close",1);
}
});
//關(guān)閉所有標(biāo)簽
$("#closeAll").click(function(){
var tabs = $("#tt").tabs("tabs");
var length = tabs.length;
for(var i=0;i<length;i++){
$("#tt").tabs("close",0);
}
});
});
</script>
</head>
<body>
<!-- menu -->
<div id="mm" class="easyui-menu" style="width:120px;">
<div id="closeCurrent" name="closeCurrent" data-options="iconCls:'icon-no'">關(guān)閉當(dāng)前</div>
<div id="closeOthers" name="closeOthers" data-options="iconCls:'icon-no'">關(guān)閉其它</div>
<div id="closeAll" name="closeAll" data-options="iconCls:'icon-cancel'">關(guān)閉所有</div>
</div>
<!-- tabs -->
<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>
<div title="Tab2" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab2</div>
<div title="Tab3" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab3</div>
</div>
</body>
</html>
方式二：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>easyui右鍵菜單-關(guān)閉標(biāo)簽方式二</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/js/noContextMenu.js"></script> --%>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
//生成tab標(biāo)簽
$('#tt').tabs({
border : true,
/* onSelect : function(title) {
alert(title + ' is selected');
} */
});
//生成右鍵菜單
$('#tt').tabs({
onContextMenu: function(e, title, index){
//讓默認(rèn)事件失效
e.preventDefault() ;
//選中標(biāo)簽
//$('#tt').tabs('select',title);
$('#tt').tabs('select',index);
//顯示右鍵菜單
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
$("#mm").menu({
onClick : function (item) {
/* alert(item.name);
alert(typeof this) ; */
closeTab(this, item.name);
}
});
}
});
});
//關(guān)閉標(biāo)簽的方法
var closeTab = function(type,menuName){
if(menuName == "closeCurrent"){
//獲取選中的標(biāo)簽索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
$("#tt").tabs("close",index);
}else if(menuName == "closeOthers"){
//獲取所有標(biāo)簽
var tabs = $("#tt").tabs("tabs");
var length = tabs.length;
//獲取選中標(biāo)簽的索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
//關(guān)閉選中標(biāo)簽之前的標(biāo)簽
for(var i=0;i<index;i++){
$("#tt").tabs("close",0);
}
//關(guān)閉選中標(biāo)簽之后的標(biāo)簽
for(var i=0;i<length-index-1;i++){
$("#tt").tabs("close",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);
}
}
} ;
</script>
</head>
<body>
<!-- menu -->
<div id="mm" class="easyui-menu" style="width:120px;">
<div id="closeCurrent" name="closeCurrent" data-options="iconCls:'icon-no'">關(guān)閉當(dāng)前</div>
<div id="closeOthers" name="closeOthers" data-options="iconCls:'icon-no'">關(guān)閉其它</div>
<div id="closeAll" name="closeAll" data-options="iconCls:'icon-cancel'">關(guān)閉所有</div>
</div>
<!-- tabs -->
<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>
<div title="Tab2" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab2</div>
<div title="Tab3" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab3</div>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jQuery編寫(xiě)QQ簡(jiǎn)易聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
jquery實(shí)現(xiàn)界面點(diǎn)擊按鈕彈出懸浮框
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)界面點(diǎn)擊按鈕彈出懸浮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
一款jquery特效編寫(xiě)的大度寬屏焦點(diǎn)圖切換特效的實(shí)例代碼
焦點(diǎn)圖顯示區(qū)域有固定的寬度,當(dāng)前顯示寬度之外是一個(gè)半透明層顯示的其它的焦點(diǎn)圖片，最好的是，此特效兼容ie6以及其它瀏覽器。2013-08-08
jQuery實(shí)現(xiàn)判斷上傳圖片類(lèi)型和大小的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)判斷上傳圖片類(lèi)型和大小的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)上傳圖片屬性獲取、判定相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jQuery實(shí)現(xiàn)浮動(dòng)層隨瀏覽器滾動(dòng)條滾動(dòng)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)浮動(dòng)層隨瀏覽器滾動(dòng)條滾動(dòng)的方法,涉及jQuery操作頁(yè)面元素滾動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
動(dòng)畫(huà)效果對(duì)于豐富網(wǎng)站的交互體驗(yàn)起到了不可或缺的作用，他可以讓你的站點(diǎn)更酷，更吸引人2012-08-08
jquery.alert 彈出式復(fù)選框?qū)崿F(xiàn)代碼
jquery alert 彈出式 復(fù)選框，需要的朋友可以參考下，代碼有點(diǎn)亂。2009-06-06
利用JQuery寫(xiě)一個(gè)簡(jiǎn)單的異步分頁(yè)插件
這篇文章主要為大家詳細(xì)介紹了如何利用JQuery寫(xiě)一個(gè)簡(jiǎn)單的異步分頁(yè)插件，感興趣的小伙伴們可以參考一下2016-03-03
詳解jQuery停止動(dòng)畫(huà)——stop()方法的使用
本文主要對(duì)jQuery停止動(dòng)畫(huà)——stop()方法的使用進(jìn)行詳細(xì)介紹，對(duì)學(xué)習(xí)jQuery動(dòng)畫(huà)有很好的幫助，下面就跟小編一起來(lái)看下吧2016-12-12
基于jQuery實(shí)現(xiàn)歌詞滾動(dòng)版音樂(lè)播放器的代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)歌詞滾動(dòng)版音樂(lè)播放器的代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09