為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例
加入了右擊TAB選項(xiàng)卡時(shí)顯示關(guān)閉的上下文菜單
具體實(shí)現(xiàn)代碼:
右鍵菜單 HTML:
<div id="mm" class="easyui-menu" style="width:150px;">
<div id="mm-tabclose">關(guān)閉</div>
<div id="mm-tabcloseall">全部關(guān)閉</div>
<div id="mm-tabcloseother">除此之外全部關(guān)閉</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">當(dāng)前頁右側(cè)全部關(guān)閉</div>
<div id="mm-tabcloseleft">當(dāng)前頁左側(cè)全部關(guān)閉</div>
</div>
下面是js代碼:
$(function(){
tabClose();
tabCloseEven();
})
function tabClose()
{
/*雙擊關(guān)閉TAB選項(xiàng)卡*/
$(".tabs-inner").dblclick(function(){
var subtitle = $(this).children("span").text();
$('#tabs').tabs('close',subtitle);
})
$(".tabs-inner").bind('contextmenu',function(e){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY,
});
var subtitle =$(this).children("span").text();
$('#mm').data("currtab",subtitle);
return false;
});
}
//綁定右鍵菜單事件
function tabCloseEven()
{
//關(guān)閉當(dāng)前
$('#mm-tabclose').click(function(){
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close',currtab_title);
})
//全部關(guān)閉
$('#mm-tabcloseall').click(function(){
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
$('#tabs').tabs('close',t);
});
});
//關(guān)閉除當(dāng)前之外的TAB
$('#mm-tabcloseother').click(function(){
var currtab_title = $('#mm').data("currtab");
$('.tabs-inner span').each(function(i,n){
var t = $(n).text();
if(t!=currtab_title)
$('#tabs').tabs('close',t);
});
});
//關(guān)閉當(dāng)前右側(cè)的TAB
$('#mm-tabcloseright').click(function(){
var nextall = $('.tabs-selected').nextAll();
if(nextall.length==0){
//msgShow('系統(tǒng)提示','后邊沒有啦~~','error');
alert('后邊沒有啦~~');
return false;
}
nextall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
});
//關(guān)閉當(dāng)前左側(cè)的TAB
$('#mm-tabcloseleft').click(function(){
var prevall = $('.tabs-selected').prevAll();
if(prevall.length==0){
alert('到頭了,前邊沒有啦~~');
return false;
}
prevall.each(function(i,n){
var t=$('a:eq(0) span',$(n)).text();
$('#tabs').tabs('close',t);
});
return false;
});
}
以上就是小編為大家?guī)淼臑閖Query-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例全部?jī)?nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
jQuery動(dòng)態(tài)生成不規(guī)則表格(前后端)
這篇文章主要介紹了jQuery動(dòng)態(tài)生成不規(guī)則表格的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-02-02
Jquery 數(shù)據(jù)選擇插件Pickerbox使用介紹
目前市面上很少見或幾乎沒有這數(shù)據(jù)(對(duì)象)選擇插件.比如,點(diǎn)擊input , select 元素時(shí)彈出div(窗口),載入數(shù)據(jù)讓用戶選擇數(shù)據(jù),選擇后在填充回對(duì)應(yīng)的元素.2012-08-08
淺析Bootstrip的select控件綁定數(shù)據(jù)的問題
這篇文章主要介紹了淺析Bootstrip的select控件綁定數(shù)據(jù)的問題 的相關(guān)資料,小編認(rèn)為非常具有參考價(jià)值,感興趣的朋友一起看下吧2016-05-05
JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法
這篇文章主要介紹了JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法,也就是比較多的數(shù)據(jù),超過max_upload_size等設(shè)置,本文方法在chrome瀏覽器下測(cè)試通過,需要的朋友可以參考下2014-07-07
jQuery實(shí)現(xiàn)自動(dòng)滾動(dòng)到頁面頂端的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)滾動(dòng)到頁面頂端的方法,涉及jQuery針對(duì)頁面操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
基于jQuery ligerUI實(shí)現(xiàn)分頁樣式
這篇文章主要為大家詳細(xì)介紹了基于jQuery ligerUI實(shí)現(xiàn)分頁樣式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09
jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02

