使用jQuery開發tab選項卡插件（可以右鍵關閉多個標簽）

 

在前一篇“使用jQuery開發tab選項卡插件”的基礎上添加了tab標簽右鍵關閉菜單功能，菜單主要包括：關閉當前標簽、關閉左側標簽、關閉右側標簽、關閉其他、關閉全部。

 

一、插件效果

　　

 

二、實現思路

為window對象添加右鍵菜單事件監聽：

當事件源對象為tab標簽時，取消默認的右鍵菜單，顯示菜單div即設置display: block，並為每一個菜單項添加事件監聽；

當事件源對象不為tab標簽時，關閉菜單div即設置display: none

 

為window對象添加單擊事件監聽：關閉菜單div即設置display: none

 

三、主要元素樣式

.tab-contextmenu {
    display: none;
    position: absolute;
    width: 140px;
    height: 125px;
    padding: 5px;
    overflow: hidden;
    border: 1px solid #dddddd;
    box-shadow: 1px 1px 1px #888;
    background: #FFFFFF;
}
.tab-contextmenu .tab-contextmenu-item {
    width: 120px;
    height: 25px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 25px;
    cursor: pointer;
}
.tab-contextmenu .tab-contextmenu-item:hover {
    color: #FFFFFF;
    background: #999;
}

 

四、函數和事件監聽

1、生成菜單div函數

/**
 * 初始化標簽右鍵菜單
 */
function initContextMenu() {
    var contextMenu = $("body .tab-contextmenu");
    if (!contextMenu[0]) {
        $("<div class='tab-contextmenu'></div>")
            .append(createContextMenuItem("關閉當前標簽", "current"))
            .append(createContextMenuItem("關閉左側標簽", "prevAll"))
            .append(createContextMenuItem("關閉右側標簽", "nextAll"))
            .append(createContextMenuItem("關閉其他", "other"))
            .append(createContextMenuItem("關閉全部", "all"))
            .appendTo("body");
    }
    // 創建一個右鍵菜單項
    function createContextMenuItem(text, target) {
        return $("<div class='tab-contextmenu-item'></div>").html(text).attr("target", target);
    }
}

 

2、window事件監聽

/**
 * 初始化tab標簽的右鍵菜單功能
 */
function initWindowContextMenu() {
    // 給body綁定兩個事件
    $("body")
    // 右鍵菜單顯示
    .bind("contextmenu", contextMenuHandler)
    // 關閉右鍵菜單
    .on("click", function() {
        $(".tab-contextmenu").css("display", "none");
    });

}

/**
 * body元素的contextmenu事件執行函數
 * @param {Object} ev
 */
function contextMenuHandler(ev) {
    
    // 獲取事件對象，需要兼容IE
    var e = ev || window.event;
    
    // 獲取自定義的右鍵菜單
    var menu = $(".tab-contextmenu");
    
    // 獲取事件源
    // e.srcElement，兼容IE、360、chrome
    // e.target，兼容Firefox
    src = $(e.srcElement || e.target);
    
    // 如果事件源對象是tab標簽才顯示右鍵菜單、綁定事件
    if (src.hasClass("tab-header-item")) {
        // 獲取tab組件
        var tab = src.parent().parent();
        // 選中點擊的標簽
        tab.tab("selectTab", src.attr("target"));
        // 取消默認的瀏覽器右鍵菜單
        e.preventDefault();
        // 根據事件對象中鼠標點擊的位置，進行定位
        // 之后根據點擊的標簽進行事件綁定
        menu
            .css({"left": e.clientX + 'px', "top": e.clientY + 'px', "display": "block"})
            .children().unbind("click").bind("click", function() {
                // 判斷關閉類型：關閉當前標簽、關閉左側標簽、關閉右側標簽、關閉其他、關閉全部
                switch($(this).attr("target")){
                    case 'current':
                        return removeTabs(tab, src);
                    case 'prevAll':
                        return removeTabs(tab, src.prevAll());
                    case 'nextAll':
                        return removeTabs(tab, src.nextAll());
                    case 'other':
                        return removeTabs(tab, src.siblings());
                    case 'all':
                        return removeTabs(tab, src.parent().children());
                }
            });
    } else {
        menu.css("display", "none");
    }
}

 

3、批量關閉標簽

/**
 * 批量刪除tab選項卡
 * @param {Object} $tab
 * @param {Object} items
 */
function removeTabs($tab, items) {
    // 遍歷需要關閉的標簽對象，逐一進行關閉
    items.each(function() {
        // 調用removeTab函數關閉一個需要關閉的標簽
        removeTab($tab, $(this).attr("target"));
    });
}