Webform中Tabs插件打开的标签页过多自动关闭

最新推荐文章于 2021-04-07 15:07:57 发布

weixin_30758821

最新推荐文章于 2021-04-07 15:07:57 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/masonblog/p/8628668.html

本文介绍了一个名为AddTab的JavaScript方法，该方法用于动态添加带iframe的标签页到Tabs控件中，并实现当标签页数量超过10个时自动关闭首个标签页的功能。

1、 AddTab的js方法。
function addTab(ResourceID, ResourceName, Url) {

    if (Url != "" && Url != null && Url != undefined) {
        var h = jQuery("#frmContent").height();
        var frameid = 'ifr' + ResourceID;
        $("#hfIfrID").val(frameid);
        var tabs = $('#tabs');
        var opts = {
            id: ResourceID,
            title: ResourceName,
            content: '<iframe src="' + Url + '" width="100%" height="' + h + '" scrolling="no" frameborder="0" id="' + frameid + '" name="' + frameid + '" class="iframe_content"></iframe> ',
            closable: true
        };
        if (tabs.tabs('exists', opts.title)) {
            tabs.tabs('select', opts.title);
        } else {
           /***逻辑处理开始:2017-09-18 打开的Tabs标签页超过10个，就关闭打开的第一个标签页。***/
            var tabcount = $('#tabs').tabs('tabs').length;
            if (tabcount > 10) {
                var Title = $(".tabs-title.tabs-closable").eq(0).text();
                tabs.tabs('close', Title);
            }
           /***逻辑处理结束***/
            tabs.tabs('add', opts);
        }
        $("#hfIfrID").val(frameid);
    }
}

2、说明
（1）先根据$('#tabs').tabs('tabs').length获取已经打开的标签页的个数，如果超过10则进行逻辑处理。
（2）Tabs生成的标签页的标题的格式：<span class="tabs-title tabs-closable">报废记录</span>
   所以使用jQuery获取var Title = $(".tabs-title.tabs-closable").eq(0).text();第一个标签页的标题。
（3）调用Tabs的方法进行关闭：tabs.tabs('close', Title);