近期研究了下MenuButton,有了新的感悟，原先在那个中右键支持做法，现在看来真是小儿科啊！

前期的准备工作：

1、下载DEMO源码，并升级为最新版本（jquery 1.7.2,Easyui 1.2.6）,直接替换就可以啦，升级easyui 是的要把css js theme 全部替换

2、在首页的HTML代码中：将

1 
     
       2         
      
       刷新
      
 3         
      
 4         
      
       关闭
      
 5         
      
       全部关闭
      
 6         
      
       除此之外全部关闭
      
 7         
      
 8         
      
       当前页右侧全部关闭
      
 9         
      
       当前页左侧全部关闭
      
10         
      
11         
      
       退出
      
12 
     

改为：

1 
     
       2         
      
       刷新
      
 3         
      
 4         
      
       关闭
      
 5         
      
       全部关闭
      
 6         
      
       除此之外全部关闭
      
 7         
      
 8         
      
       当前页右侧全部关闭
      
 9         
      
       当前页左侧全部关闭
      
10         
      
11         
      
       退出
      
12 
     

 

outlook2.js 中添加新方法如下：

 

function closeTab(action){    var alltabs = $('#tabs').tabs('tabs');    var currentTab =$('#tabs').tabs('getSelected');    var allTabtitle = [];    $.each(alltabs,function(i,n){        allTabtitle.push($(n).panel('options').title);    })    switch (action) {        case "refresh":            var iframe = $(currentTab.panel('options').content);            var src = iframe.attr('src');            $('#tabs').tabs('update', {                tab: currentTab,                options: {                    content: createFrame(src)                }            })            break;        case "close":            var currtab_title = currentTab.panel('options').title;            $('#tabs').tabs('close', currtab_title);            break;        case "closeall":            $.each(allTabtitle, function (i, n) {                if (n != onlyOpenTitle){                    $('#tabs').tabs('close', n);                }            });            break;        case "closeother":            var currtab_title = currentTab.panel('options').title;            $.each(allTabtitle, function (i, n) {                if (n != currtab_title && n != onlyOpenTitle)                {                    $('#tabs').tabs('close', n);                }            });            break;        case "closeright":            var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);            if (tabIndex == alltabs.length - 1){                alert('亲，后边没有啦 ^@^!!');                return false;            }            $.each(allTabtitle, function (i, n) {                if (i > tabIndex) {                    if (n != onlyOpenTitle){                        $('#tabs').tabs('close', n);                    }                }            });            break;        case "closeleft":            var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);            if (tabIndex == 1) {                alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!');                return false;            }            $.each(allTabtitle, function (i, n) {                if (i < tabIndex) {                    if (n != onlyOpenTitle){                        $('#tabs').tabs('close', n);                    }                }            });            break;        case "exit":            $('#closeMenu').menu('hide');            break;    }}

 

 

 

将js中tabCloseEven 方法 改为

function tabCloseEven() {    $('#mm').menu({        onClick: function (item) {            closeTab(item.id);        }    });    return false;}

 

这样就OK啦，代码比原来优雅多啦！

调用刷新，关闭当前标签时，就调用 closeTab(‘action’) //action 可以为 refresh（刷新）,close（关闭）

iframe 中使用时，要这么屎 top.closeTab('action');

 

 

亲，如果你觉得本文对你有帮助，请帮忙推荐下哦