为jQuery-easyui的tab组件添加右键菜单功能

jQuery中的easyui插件包的tab标签组件，挺不错的，下面介绍如何为tab标签组件添加右键功能，效果图如下：

加入了右击TAB选项卡时显示关闭的上下文菜单

具体实现代码：

右键菜单 HTML:

 Code  [http://www.xueit.com]

   
   


    
    <
    
    div 
    
    id
    
    ="mm"
    
     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
    
    >

   
   

下面是js代码：

 Code  [http://www.xueit.com]

   
   


    
    $(
    
    function
    
    (){ tabClose(); tabCloseEven(); }) 
    
    function
    
     tabClose() { 
    
    /*
    
    双击关闭TAB选项卡
    
    */
    
     $(
    
    "
    
    .tabs-inner
    
    "
    
    ).dblclick(
    
    function
    
    (){ 
    
    var
    
     subtitle 
    
    =
    
     $(
    
    this
    
    ).children(
    
    "
    
    span
    
    "
    
    ).text(); $(
    
    '
    
    #tabs
    
    '
    
    ).tabs(
    
    '
    
    close
    
    '
    
    ,subtitle); }) $(
    
    "
    
    .tabs-inner
    
    "
    
    ).bind(
    
    '
    
    contextmenu
    
    '
    
    ,
    
    function
    
    (e){ $(
    
    '
    
    #mm
    
    '
    
    ).menu(
    
    '
    
    show
    
    '
    
    , { left: e.pageX, top: e.pageY, }); 
    
    var
    
     subtitle 
    
    =
    
    $(
    
    this
    
    ).children(
    
    "
    
    span
    
    "
    
    ).text(); $(
    
    '
    
    #mm
    
    '
    
    ).data(
    
    "
    
    currtab
    
    "
    
    ,subtitle); 
    
    return
    
     
    
    false
    
    ; }); } 
    
    //
    
    绑定右键菜单事件
    
     
    
    function
    
     tabCloseEven() { 
    
    //
    
    关闭当前
    
     
    
     $(
    
    '
    
    #mm-tabclose
    
    '
    
    ).click(
    
    function
    
    (){ 
    
    var
    
     currtab_title 
    
    =
    
     $(
    
    '
    
    #mm
    
    '
    
    ).data(
    
    "
    
    currtab
    
    "
    
    ); $(
    
    '
    
    #tabs
    
    '
    
    ).tabs(
    
    '
    
    close
    
    '
    
    ,currtab_title); }) 
    
    //
    
    全部关闭
    
     
    
     $(
    
    '
    
    #mm-tabcloseall
    
    '
    
    ).click(
    
    function
    
    (){ $(
    
    '
    
    .tabs-inner span
    
    '
    
    ).each(
    
    function
    
    (i,n){ 
    
    var
    
     t 
    
    =
    
     $(n).text(); $(
    
    '
    
    #tabs
    
    '
    
    ).tabs(
    
    '
    
    close
    
    '
    
    ,t); }); }); 
    
    //
    
    关闭除当前之外的TAB
    
     
    
     $(
    
    '
    
    #mm-tabcloseother
    
    '
    
    ).click(
    
    function
    
    (){ 
    
    var
    
     currtab_title 
    
    =
    
     $(
    
    '
    
    #mm
    
    '
    
    ).data(
    
    "
    
    currtab
    
    "
    
    ); $(
    
    '
    
    .tabs-inner span
    
    '
    
    ).each(
    
    function
    
    (i,n){ 
    
    var
    
     t 
    
    =
    
     $(n).text(); 
    
    if
    
    (t
    
    !=
    
    currtab_title) $(
    
    '
    
    #tabs
    
    '
    
    ).tabs(
    
    '
    
    close
    
    '
    
    ,t); }); }); 
    
    //
    
    关闭当前右侧的TAB
    
     
    
     $(
    
    '
    
    #mm-tabcloseright
    
    '
    
    ).click(
    
    function
    
    (){ 
    
    var
    
     nextall 
    
    =
    
     $(
    
    '
    
    .tabs-selected
    
    '
    
    ).nextAll(); 
    
    if
    
    (nextall.length
    
    ==
    
    0
    
    ){ 
    
    //
    
    msgShow('系统提示','后边没有啦~~','error');
    
     
    
     alert(
    
    '
    
    后边没有啦~~
    
    '
    
    ); 
    
    return
    
     
    
    false
    
    ; } nextall.each(
    
    function
    
    (i,n){ 
    
    var
    
     t
    
    =
    
    $(
    
    '
    
    a:eq(0) span
    
    '
    
    ,$(n)).text(); $(
    
    '
    
    #tabs
    
    '
    
    ).tabs(
    
    '
    
    close
    
    '
    
    ,t); }); 
    
    return
    
     
    
    false
    
    ; }); 
    
    //
    
    关闭当前左侧的TAB
    
     
    
     $(
    
    '
    
    #mm-tabcloseleft
    
    '
    
    ).click(
    
    function
    
    (){ 
    
    var
    
     prevall 
    
    =
    
     $(
    
    '
    
    .tabs-selected
    
    '
    
    ).prevAll(); 
    
    if
    
    (prevall.length
    
    ==
    
    0
    
    ){ alert(
    
    '
    
    到头了，前边没有啦~~
    
    '
    
    ); 
    
    return
    
     
    
    false
    
    ; } prevall.each(
    
    function
    
    (i,n){ 
    
    var
    
     t
    
    =
    
    $(
    
    '
    
    a:eq(0) span
    
    '
    
    ,$(n)).text(); $(
    
    '
    
    #tabs
    
    '
    
    ).tabs(
    
    '
    
    close
    
    '
    
    ,t); }); 
    
    return
    
     
    
    false
    
    ; }); }