為EasyUI 的Tab 標簽添加右鍵菜單

近期研究了下MenuButton,有了新的感悟，原先在那個DEMO中右鍵支持做法，現在看來真是小兒科啊！

前期的准備工作：

1、下載DEMO源碼，並升級為最新版本（jquery 1.7.2,Easyui 1.2.6）,直接替換就可以啦，升級easyui 是的要把css js theme 全部替換

2、在首頁的HTML代碼中：將

<div id="mm" class="easyui-menu" style="width:150px;">
        <div id="mm-tabupdate">刷新</div>
        <div class="menu-sep"></div>
        <div id="mm-tabclose">關閉</div>
        <div id="mm-tabcloseall">全部關閉</div>
        <div id="mm-tabcloseother">除此之外全部關閉</div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright">當前頁右側全部關閉</div>
        <div id="mm-tabcloseleft">當前頁左側全部關閉</div>
        <div class="menu-sep"></div>
        <div id="mm-exit">退出</div>
</div>

改為：

<div id="mm" class="easyui-menu" style="width:150px;">
        <div id="refresh">刷新</div>
        <div class="menu-sep"></div>
        <div id="close">關閉</div>
        <div id="closeall">全部關閉</div>
        <div id="closeother">除此之外全部關閉</div>
        <div class="menu-sep"></div>
        <div id="closeright">當前頁右側全部關閉</div>
        <div id="closeleft">當前頁左側全部關閉</div>
        <div class="menu-sep"></div>
        <div id="exit">退出</div>
</div>

 

outlook2.js 中添加新方法如下：

 

function closeTab(action)
{
    var alltabs = $('#tabs').tabs('tabs');
    var currentTab =$('#tabs').tabs('getSelected');
    var allTabtitle = [];
    $.each(alltabs,function(i,n){
        allTabtitle.push($(n).panel('options').title);
    })


    switch (action) {
        case "refresh":
            var iframe = $(currentTab.panel('options').content);
            var src = iframe.attr('src');
            $('#tabs').tabs('update', {
                tab: currentTab,
                options: {
                    content: createFrame(src)
                }
            })
            break;
        case "close":
            var currtab_title = currentTab.panel('options').title;
            $('#tabs').tabs('close', currtab_title);
            break;
        case "closeall":
            $.each(allTabtitle, function (i, n) {
                if (n != onlyOpenTitle){
                    $('#tabs').tabs('close', n);
                }
            });
            break;
        case "closeother":
            var currtab_title = currentTab.panel('options').title;
            $.each(allTabtitle, function (i, n) {
                if (n != currtab_title && n != onlyOpenTitle)
                {
                    $('#tabs').tabs('close', n);
                }
            });
            break;
        case "closeright":
            var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);

            if (tabIndex == alltabs.length - 1){
                alert('親，后邊沒有啦 ^@^!!');
                return false;
            }
            $.each(allTabtitle, function (i, n) {
                if (i > tabIndex) {
                    if (n != onlyOpenTitle){
                        $('#tabs').tabs('close', n);
                    }
                }
            });

            break;
        case "closeleft":
            var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
            if (tabIndex == 1) {
                alert('親，前邊那個上頭有人，咱惹不起哦。 ^@^!!');
                return false;
            }
            $.each(allTabtitle, function (i, n) {
                if (i < tabIndex) {
                    if (n != onlyOpenTitle){
                        $('#tabs').tabs('close', n);
                    }
                }
            });

            break;
        case "exit":
            $('#closeMenu').menu('hide');
            break;
    }
}

 

 

 

將js中tabCloseEven 方法 改為

function tabCloseEven() {
    $('#mm').menu({
        onClick: function (item) {
            closeTab(item.id);
        }
    });

    return false;
}

 

這樣就OK啦，代碼比原來優雅多啦！

調用刷新，關閉當前標簽時，就調用 closeTab(‘action’) //action 可以為 refresh（刷新）,close（關閉）

iframe 中使用時，要這么屎 top.closeTab('action');

 

熊掌網盤 : 點此下載最新的Easyui應用實例 

 

親，如果你覺得本文對你有幫助，請幫忙推薦下哦