jQuery EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡(jiǎn)單實(shí)例
更新時(shí)間：2016年10月10日 08:34:16 投稿：jingxian
下面小編就為大家?guī)?lái)一篇jQuery EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lá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>
以上就是小編為大家?guī)?lái)的jQuery EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡(jiǎn)單實(shí)例全部?jī)?nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
這篇文章主要介紹了jQuery實(shí)現(xiàn)自定義事件的方法,實(shí)例分析了jQuery自定義事件的定義與使用方法,需要的朋友可以參考下2015-04-04
jquery.mousewheel實(shí)現(xiàn)整屏翻屏效果
jQuery Mousewheel 用于添加跨瀏覽器的鼠標(biāo)滾輪支持。 mousewheel事件的處理函數(shù)有一點(diǎn)小小的變化，它除了第一個(gè)參數(shù)event 外，還接收到第二個(gè)參數(shù)delta。通過(guò)參數(shù)delta可以獲取鼠標(biāo)滾輪的方向和速度。2015-08-08
這篇文章主要介紹了jQuery提示框插件SweetAlert用法,結(jié)合實(shí)例形式分析了SweetAlert提示框插件基本功能、使用方法及配置項(xiàng)設(shè)置方法,需要的朋友可以參考下2019-08-08
jQuery的animate函數(shù)實(shí)現(xiàn)圖文切換動(dòng)畫效果
animate()在jquery中作為一個(gè)方法,可用于創(chuàng)建動(dòng)畫效果，jquery中的animate()方法讓那個(gè)頁(yè)面增加了很好的視覺(jué)效果2015-05-05
jquery對(duì)象和javascript對(duì)象即DOM對(duì)象相互轉(zhuǎn)換
對(duì)于已經(jīng)是一個(gè) DOM 對(duì)象，只需要用 $() 把DOM對(duì)象包裝起來(lái)，就可以獲得一個(gè) jQuery 對(duì)象了，使用[index]和.get(index)可以轉(zhuǎn)為DOM對(duì)象2014-08-08
JQuery 實(shí)現(xiàn)文件下載的常用方法分析
這篇文章主要介紹了JQuery 實(shí)現(xiàn)文件下載的常用方法,結(jié)合實(shí)例形式分析了jQuery的GET方式、POST方式及HTML5 Blob對(duì)象等常見(jiàn)的文件下載機(jī)制、原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2019-10-10
本文使用jquery.form.js解決提交之后，頁(yè)面發(fā)生跳轉(zhuǎn)，在一個(gè)空白頁(yè)面上顯示了后端返回的json數(shù)據(jù)問(wèn)題，需要的朋友參考下2017-06-06
基于jQuery的簡(jiǎn)單九宮格實(shí)現(xiàn)代碼
聽(tīng)朋友說(shuō)要作個(gè)九宮格，我也就隨便寫一個(gè)，等待完善2012-08-08
Jquery中的很多方法都是如此，主要包括如下幾個(gè)2009-01-01
jQuery文本框(input textare)事件綁定方法教程
jquery​的事件綁定已經(jīng)用on替換了原來(lái)的bind，接下來(lái)為大家分享下bind的使用方法及input textare事件2013-04-04