jQuery EasyUI 右鍵菜單--關(guān)閉標簽/選項卡的簡單實例
更新時間：2016年10月10日 08:34:16 投稿：jingxian
下面小編就為大家?guī)硪黄猨Query EasyUI 右鍵菜單--關(guān)閉標簽/選項卡的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
目錄結(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)閉標簽方式一</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標簽
$('#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
}) ;
}
});
//為每個菜單綁定點擊事件
//關(guān)閉選中的標簽
$("#closeCurrent").click(function(){
//獲取選中的標簽索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
$("#tt").tabs("close",index);
});
//關(guān)閉選中標簽之外的標簽
$("#closeOthers").click(function(){
//獲取所有標簽
var tabs = $("#tt").tabs("tabs");
var length = tabs.length;
//獲取選中標簽的索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
//關(guān)閉選中標簽之前的標簽
for(var i=0;i<index;i++){
$("#tt").tabs("close",0);
}
//關(guān)閉選中標簽之后的標簽
for(var i=0;i<length-index-1;i++){
$("#tt").tabs("close",1);
}
});
//關(guān)閉所有標簽
$("#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)閉當前</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)閉標簽方式二</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標簽
$('#tt').tabs({
border : true,
/* onSelect : function(title) {
alert(title + ' is selected');
} */
});
//生成右鍵菜單
$('#tt').tabs({
onContextMenu: function(e, title, index){
//讓默認事件失效
e.preventDefault() ;
//選中標簽
//$('#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)閉標簽的方法
var closeTab = function(type,menuName){
if(menuName == "closeCurrent"){
//獲取選中的標簽索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
$("#tt").tabs("close",index);
}else if(menuName == "closeOthers"){
//獲取所有標簽
var tabs = $("#tt").tabs("tabs");
var length = tabs.length;
//獲取選中標簽的索引
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
//關(guān)閉選中標簽之前的標簽
for(var i=0;i<index;i++){
$("#tt").tabs("close",0);
}
//關(guān)閉選中標簽之后的標簽
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)閉當前</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>
以上就是小編為大家?guī)淼膉Query EasyUI 右鍵菜單--關(guān)閉標簽/選項卡的簡單實例全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
這篇文章主要整理分享了jQuery修改class屬性和CSS樣式,十分詳細，需要的朋友可以參考下2015-01-01
用JQUERY疊加兩個INPUT框來實現(xiàn)登陸中需要輸入的用戶名、密碼來實現(xiàn)提示與用戶的輸出，使用jquery在一個INPUT框中即可實現(xiàn)2014-01-01
這篇文章主要介紹了jQuery實現(xiàn)右鍵菜單、遮罩、彈出層效果，適應管理系統(tǒng)界面,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
jQuery + Flex 通過拖拽方式動態(tài)改變圖片的代碼
功能終于告一段落了，實現(xiàn)了預期的功能。遇到了一個小麻煩，js 會把某些變量（ 如果你是通過對象的方式傳遞的，將在傳遞之后丟失類型信息 ，后面*號部分）2011-08-08
如果Table數(shù)據(jù)過多，頁面必然會拉的很長，固定表頭，可以方便用戶對照表頭項目列表。近日做后臺界面時，整理固定表頭三種方法2011-01-01
這篇文章主要為大家詳細介紹了簡單實現(xiàn)jQuery進度條輪播實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
jquery ajax局部加載方法詳解(實現(xiàn)代碼)
下面想就為大家?guī)硪黄猨query ajax局部加載方法詳解(實現(xiàn)代碼)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
本節(jié)主要介紹了jquery如何獲取一個元素下面相同子元素的個數(shù)代碼,需要的朋友可以參考下2014-07-07
Jquery Ajax學習實例 向頁面發(fā)出請求，返回XML格式數(shù)據(jù)
Jquery Ajax學習實例 向頁面發(fā)出請求，返回XML格式數(shù)據(jù)的代碼2010-03-03
jquery選擇符快速提取web表單數(shù)據(jù)示例
遇到要重復多次同樣的事時，就想找一種省時省力的方法，下面就為大家介紹下利用jquery選擇符快速提取web表單數(shù)據(jù)2014-03-03