EasyUI(2)扩展——右键选项卡菜单&&更换主题

右键选项卡菜单

右键tab菜单选项

<div id="mm" class="easyui-menu" style="width:140px;">
    <div id="mm-tabclosrefresh" data-options="name:6">刷新</div>
    <div id="mm-tabclose" data-options="name:1">关闭当前窗口</div>
    <div id="mm-tabcloseall" data-options="name:2">全部关闭</div>
    <div id="mm-tabcloseother" data-options="name:3">关闭非当前窗口</div>
    <div class="menu-sep"></div>
    <div id="mm-tabcloseleft" data-options="name:5">关闭左侧窗口</div>
    <div id="mm-tabcloseright" data-options="name:4">关闭右侧窗口</div>
</div>

JS代码

//监听右键事件
$("#tab").tabs({
    onContextMenu:function (e,title,index) {
        e.preventDefault();//阻止元素发生默认的行为
        if (index>0){//选项卡索引大于0才创建右键菜单
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
            }).data("tabTitle", title);
        }
    }
});

//右键菜单click
$("#mm").menu({
    onClick: function (item) {
        closeTab(this, item.name);
    }
});

function closeTab(menu, type) {
    var allTabs = $("#tab").tabs('tabs');//获取所有选项卡
    var allTabtitle = [];
    $.each(allTabs, function (i, n) {
        var opt = $(n).panel('options');//获取选项卡的所有属性
        if (opt.closable)
            allTabtitle.push(opt.title);//把所有选项卡的标题放进数组中
    });
    var curTabTitle = $(menu).data("tabTitle");//获取菜单栏标题
    var curTabIndex = $("#tab").tabs("getTabIndex", $("#tab").tabs("getTab", curTabTitle));//操作的当前选项卡索引
    switch (type) {
        case 1://关闭当前选项卡
            $("#tab").tabs("close", curTabIndex);
            return false;
            break;
        case 2://关闭全部选项卡
            for (var i = 0; i < allTabtitle.length; i++) {
                $('#tab').tabs('close', allTabtitle[i]);
            }
            break;
        case 3://关闭其他选项卡
            for (var i = 0; i < allTabtitle.length; i++) {
                if (curTabTitle != allTabtitle[i])
                    $('#tab').tabs('close', allTabtitle[i]);
            }
            $('#tab').tabs('select', curTabTitle);
            break;
        case 4://关闭右侧选项卡
            for (var i = curTabIndex; i < allTabtitle.length; i++) {
                $('#tab').tabs('close', allTabtitle[i]);
            }
            $('#tab').tabs('select', curTabTitle);
            break;
        case 5://关闭左侧选项卡
            for (var i = 0; i < curTabIndex-1; i++) {
                $('#tab').tabs('close', allTabtitle[i]);
            }
            $('#tab').tabs('select', curTabTitle);
            break;
        case 6: //刷新当前选项卡
            var panel = $("#tab").tabs("getTab", curTabTitle).panel("refresh");
            break;
    }
}

更换主题皮肤

需要引入的文件

jquery.cookie.js

下载地址：https://download.csdn.net/download/qq_40629521/12119246

H5

<div style="position: absolute;right: 1px;top:54px;">
    <div style="padding:5px;">
       <a href="javascript:void(0);" class="easyui-menubutton"
           data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>
    </div>
 </div>
    <div id="layout_north_pfMenu" style=" display: none;">
        <div onclick="changeThemeFun('default');">默认风格 </div>
        <div onclick="changeThemeFun('gray');">gray </div>
        <div onclick="changeThemeFun('bootstrap');">bootstrap </div>
        <div onclick="changeThemeFun('black');">black </div>
        <div onclick="changeThemeFun('metro');">metro</div>
        <div onclick="changeThemeFun('metro-blue');">metro-blue </div>
        <div onclick="changeThemeFun('metro-gray');">metro-gray </div>
        <div onclick="changeThemeFun('metro-green');">metro-green </div>
        <div onclick="changeThemeFun('metro-orange');">metro-orange </div>
        <div onclick="changeThemeFun('metro-red');">metro-red </div>
    </div>

JS

jQuery.cookie = function(key, value, options) {
    if (arguments.length > 1 && (value === null || typeof value !== "object")) {
        options = jQuery.extend({}, options);
        if (value === null) {
            options.expires = -1;
        }
        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }
        return (document.cookie = [
            encodeURIComponent(key),
            '=',
            options.raw ? String(value) : encodeURIComponent(String(value)),
            options.expires ? '; expires=' + options.expires.toUTCString(): '',
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : '' ].join(''));
    }
    options = value || {};
    var result, decode = options.raw ? function(s) {
        return s;
    } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};

/**
 * 更换主题
 */
function changeThemeFun(themeName) {
    var $easyuiTheme = $('#easyuiTheme');
    var url = $easyuiTheme.attr('href');
    var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
    $easyuiTheme.attr('href', href);

    var $iframe = $('iframe');
    if ($iframe.length > 0) {
        for ( var i = 0; i < $iframe.length; i++) {
            var ifr = $iframe[i];
            $(ifr).contents().find('#easyuiTheme').attr('href', href);
        }
    }
    $.cookie('easyuiThemeName', themeName, {
        expires : 7
    });
}

$(document).ready(function(){
    if ($.cookie('easyuiThemeName')) {
        changeThemeFun($.cookie('easyuiThemeName'));
    }
});

注意

这里需要加上id="easyuiTheme"

<!-- easyui的核心css -->
<link rel="stylesheet" id="easyuiTheme" href="/static/easyui/themes/default/easyui.css">