JSフロントエンドフレーム9 EasyUI(tabs右クリックメニュー)

この文書では、チュートリアル以外の使用要点コードセグメントのみを記録します.
tabに右クリックメニューを付ける

$.fn.contextMenus=function(){
        var $tabs=$(this);

        var temphtml='<div id="tabs-contextmenuparent"><div id="tabs-contextmenu" class="easyui-menu" style="width:150px">'+
            '<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></div>';
        $("body").append(temphtml);
        $.parser.parse($('#tabs-contextmenuparent'));
        var $menus=$("#tabs-contextmenu");
        $(document).on("dblclick",".tabs-inner",function(){
            var currtab_title = $(this).children("span").text();
            var $link=$(".tabs-title:contains("+currtab_title+")",$tabs);
            if($link.is('.tabs-closable')){
                $tabs.tabs('close',currtab_title);
            }
        });
        $(document).on("contextmenu",".tabs-inner",function(e){

            $menus.menu('show', {
                left: e.pageX,
                top: e.pageY
            });
            var subtitle =$(this).children("span").text();
            $menus.data("currtab",subtitle);
            return false;

        });
        //    
        $('#mm-tabclose',$menus).click(function() {
            var currtab_title = $menus.data("currtab");
            var $link=$(".tabs-title:contains("+currtab_title+")",$tabs);

            if ($link.is('.tabs-closable')) {
                $tabs.tabs('close', currtab_title);
            }
        });
        //    
        $('#mm-tabcloseall',$menus).click(function() {
            $('.tabs-inner span',$tabs).each(function(i, n) {
                if ($(this).is('.tabs-closable')) {
                    var t = $(n).text();
                    $tabs.tabs('close', t);
                }
            });
        });
        //        TAB
        $('#mm-tabcloseother',$menus).click(function() {
            var currtab_title = $('tabs-contextmenu').data("currtab");
            $('.tabs-inner span').each(function(i, n) {
                if ($(this).is('.tabs-closable')) {
                    var t = $(n).text();
                    if (t != currtab_title)
                        $tabs.tabs('close', t);
                }
            });
        });
        //       TAB
        $('#mm-tabcloseright',$menus).click(function() {
            var currtab_title = $('tabs-contextmenu').data("currtab");
            var $li=$(".tabs-title:contains("+currtab_title+")",$tabs).parent().parent();
            var nextall = $li.nextAll();

            if (nextall.length == 0) {
                jAlert('        ');
                return false;
            }
            nextall.each(function(i, n) {
                if ($('a.tabs-close', $(n)).length > 0) {
                    var t = $('a:eq(0) span', $(n)).text();
                    $tabs.tabs('close', t);
                }
            });
            return false;
        });
        //       TAB
        $('#mm-tabcloseleft',$menus).click(function() {
            var currtab_title = $menus.data("currtab");
            var $li=$(".tabs-title:contains("+currtab_title+")",$tabs).parent().parent();

            var prevall =$li.prevAll();
            if (prevall.length == 1) {
                jAlert('       ');
                return false;
            }
            prevall.each(function(i, n) {
                if ($('a.tabs-close', $(n)).length > 0) {
                    var t = $('a:eq(0) span', $(n)).text();
                    $tabs.tabs('close', t);
                }
            });
            return false;
        });
    };

使用方法:tabsを最初に定義する

   $('#div-tabs').tabs({

   });

次に

 $("#div-tabs").contextMenus();

できます.