注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

╰此情可待成追忆

当没有阳光时,我自己便是阳光,当没有快乐时,我自己便是快乐

 
 
 

日志

 
 

为jQuery easyui1.3.6的tab组件添加右键菜单功能(亲测)  

2014-07-10 22:02:42|  分类: EasyUI |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
http://www.jeasyuicn.com/easyui-tabs.html
http://www.cnblogs.com/xishuai/p/3620327.html#xishuai_h5
本人亲测easyui1.3.6可用,网上搜的很多代码不全,上面2个网址可以参考下;
网上搜的代码一般缺少这句:
 //不允许关闭的标签的标题
    var onlyOpenTitle = "办公桌面";
-------------------------------------------------------------------------------------------------------
前台页面:
    //...自己引用jquery.min.js和easyui.min.js以及对应的样式文件
    <script src="~/Scripts/MyJs/common.js"></script>
<script type="text/javascript">
$(function () {
//绑定tabs选项卡右键菜单事件
tabCloseEven();
});
</script>

<div id="tabCenter" data-options="region:'center',fit:true,border:'false'" class="easyui-tabs">
<div title="办公桌面" data-options="iconCls:'icon-reload'" style="padding:10px;">
</div>
</div>
<!-- 添加自定义tab选项卡右键菜单 -->
<div id="tabsMenu" class="easyui-menu" style="width:150px;">
<div id="refresh">刷新</div>
<div class="menu-sep"></div>
<div id="close">关闭</div>
<div id="closeall">全部关闭</div>
<div id="closeother">除此之外全部关闭</div>
<div class="menu-sep"></div>
<div id="closeright">当前页右侧全部关闭</div>
<div id="closeleft">当前页左侧全部关闭</div>
<div class="menu-sep"></div>
<div id="exit">退出</div>
</div>


common.js文件:
/* http://www.cnblogs.com/xishuai/p/3620327.html#xishuai_h5
 * http://www.jeasyuicn.com/easyui-tabs.html
 * 添加自定义tab选项卡右键菜单
 * 调用页:$(function(){tabClose();tabCloseEven();})
 */
function closeTab(action) {
    //不允许关闭的标签的标题
    var onlyOpenTitle = "办公桌面";
    //所有选项卡集合
    var alltabs = $('#tabCenter').tabs('tabs');
    //当前激活的选项卡
    var currentTab = $('#tabCenter').tabs('getSelected');
    //获取所有选项卡的title属性集合
    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');
            $('#tabCenter').tabs('update', {
                tab: currentTab,
                options: {
                    content: createFrame(src) //创建iframe,用于重新加载页面(刷新)
                }
            })
            break;
        case "close":    //关闭当前页
            var currtab_title = currentTab.panel('options').title;
            $('#tabCenter').tabs('close', currtab_title);
            break;
        case "closeall": //关闭全部页面
            $.each(allTabtitle, function (i, n) {
                if (n != onlyOpenTitle) {
                    $('#tabCenter').tabs('close', n);
                }
            });
            break;
        case "closeother": //当前(激活的)选项卡外的全部页面关闭
            var currtab_title = currentTab.panel('options').title;
            $.each(allTabtitle, function (i, n) {
                if (n != currtab_title && n != onlyOpenTitle) {
                    $('#tabCenter').tabs('close', n);
                }
            });
            break;
        case "closeright":  //当前(激活的)选项卡右侧全部关闭
            var tabIndex = $('#tabCenter').tabs('getTabIndex', currentTab);
            if (tabIndex == alltabs.length - 1) {
                //alert('亲,后边没有啦 ^@^!!');
                return false;
            }
            $.each(allTabtitle, function (i, n) {
                if (i > tabIndex) {
                    if (n != onlyOpenTitle) {
                        $('#tabCenter').tabs('close', n);
                    }
                }
            });
            break;
        case "closeleft": //当前(激活的)选项卡左侧全部关闭
            var tabIndex = $('#tabCenter').tabs('getTabIndex', currentTab);
            if (tabIndex == 1) {
                //alert('亲,前边那个上头有人,咱惹不起哦。 ^@^!!');
                return false;
            }
            $.each(allTabtitle, function (i, n) {
                if (i < tabIndex) {
                    if (n != onlyOpenTitle) {
                        $('#tabCenter').tabs('close', n);
                    }
                }
            });
            break;
        case "exit":
            $('#closeMenu').menu('hide');
            break;
    }
}

//绑定右键菜单事件
function tabCloseEven() {
    //绑定tabs的右键菜单
    $("#tabCenter").tabs({
        onContextMenu: function (e, title) {
            e.preventDefault();
            $('#tabsMenu').menu('show', {
                left: e.pageX,
                top: e.pageY
            }).data("tabTitle", title);
        }
    });

    ///实例化menu的onClick事件
    $('#tabsMenu').menu({
        onClick: function (item) {
            closeTab(item.id);
        }
    });
    return false;
}
//创建iframe,用于tab右键菜单中的刷新
function createFrame(url) {
    var iframe = '<iframe scrolling="auto" frameborder="0" src="' + url
        + '" width="100%" height="100%"></iframe>';
    return iframe;
}

  评论这张
 
阅读(365)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017