MVC4 +EasyUI Tabs 使用

Tabs 右键菜单功能实现

前端

   <div id="tabs" class="easyui-tabs" fit="true" border="false"  data-options="tools:'#tab-tools'">
</div>

 <div id="tab-tools">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'" onclick="reload()"></a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-delete'" onclick="closecur()"></a>
    </div>

    <div id="mm" class="easyui-menu" style="width:150px;">
        <div data-options="iconCls:'icon-reload'" id="refresh">刷新</div>
        <div class="menu-sep"></div>
        <div data-options="iconCls:'icon-delete0'" id="closecur">关闭当前</div>
        <div data-options="iconCls:'icon-delete0'" id="closeall">全部关闭</div>
        <div data-options="iconCls:'icon-delete0'" id="closeother">除此之外全部关闭</div>
        <div class="menu-sep"></div>
        <div data-options="iconCls:'icon-delete0'" id="closeright">当前页右侧全部关闭</div>
        <div data-options="iconCls:'icon-delete0'" id="closeleft">当前页左侧全部关闭</div>
    </div>

脚本

$(function () {

    $(".tabs-header").bind('contextmenu', function (e) {
        e.preventDefault();
        $('#mm').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
    });

    //刷新
    $("#refresh").bind("click", function () {
        reload();
    })

    //关闭当前标签页
    $("#closecur").bind("click", function () {
        closecur();
    });
    //关闭所有标签页
    $("#closeall").bind("click", function () {

        var tablist = $('#tabs').tabs('tabs');
        for (var i = tablist.length - 1; i >= 0; i--) {
            $('#tabs').tabs('close', i);
        }
    });
    //关闭非当前标签页（先关闭右侧，再关闭左侧）
    $("#closeother").bind("click", function () {
        var tablist = $('#tabs').tabs('tabs');
        var tab = $('#tabs').tabs('getSelected');
        var index = $('#tabs').tabs('getTabIndex', tab);
        for (var i = tablist.length - 1; i > index; i--) {
            $('#tabs').tabs('close', i);
        }
        var num = index - 1;
        for (var i = num; i >= 0; i--) {
            $('#tabs').tabs('close', 0);
        }
    });
    //关闭当前标签页右侧标签页
    $("#closeright").bind("click", function () {
        var tablist = $('#tabs').tabs('tabs');
        var tab = $('#tabs').tabs('getSelected');
        var index = $('#tabs').tabs('getTabIndex', tab);

        for (var i = tablist.length - 1; i > index; i--) {
            $('#tabs').tabs('close', i);
        }
    });
    //关闭当前标签页左侧标签页
    $("#closeleft").bind("click", function () {
        var tab = $('#tabs').tabs('getSelected');
        var index = $('#tabs').tabs('getTabIndex', tab);
        var num = index - 1;
        for (var i = 0; i <= num; i++) {
            $('#tabs').tabs('close', 0);
        }
    });

});

function reload() {
    var currentTab = $('#tabs').tabs('getSelected');
    var iframe = $(currentTab.panel('options').content);
    var src = iframe.attr('src');
    $('#tabs').tabs('update', {
        tab: currentTab,
        options: {
            content: '<iframe scrolling="auto" frameborder="0"  style="width:100%;height:100%;" src="' + src + '" ></iframe>'
        }
    })
}

function closecur() {

    var tab = $('#tabs').tabs('getSelected');
    var index = $('#tabs').tabs('getTabIndex', tab);
    $('#tabs').tabs('close', index);
}