MVC 4+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);

}