easyui-tabs判断选项卡tab不重复的另一种方式,不用title和index判断

日常开发中,在一个页面里利用选项卡和iframe框架加载不同的页面,这种开发模式比较便利和普遍。本人用的是easyui框架。

easyui-tabs判断选项卡是否存在通用的方法是用exits方法,可以找到很多例子。

但是如果菜单存在重复名称,再用这种方式判断就不灵了。研究了好久,终于找到一种不用title和index判断是否存在重复选项卡的方式。

先看动态添加tab的代码:

//添加选项卡
        function AddTabs(title, url) {
            $("#tabs").tabs("add", {
                title: "" + title + "",
                closable: true,
                selected: true,
                content: ""
            });
        }

以上代码中iframe的高度并不通用,一般用jquery函数获取需要的高度再赋值。此文略过。

然后不用title和index判断是否重复:

//加载左侧导航菜单
            $("#sm").sidemenu({
                border: false,
                data: [{
                    text: "亚马逊平台",
                    iconCls: "icon-sum",
                    state: "open",
                    children: [{
                        text: "订单管理",
                        value: "Amazon/OrderAMZ.aspx"
                    }, {
                        text: "货件管理",
                        value: "Amazon/ShipmentAMZ.aspx"
                    }]
                }, {
                    text: "天猫平台",
                    iconCls: "icon-sum",
                    state: "open",
                    children: [{
                        text: "订单管理",
                        value: "Tmall/OrderTM.aspx"
                    }]
                }],
                onSelect: function (item) {
                    var isIn = false;
                    var tabs = $("#tabs").tabs("tabs");
                    for (var i = 0; i < tabs.length; i++) {
                        var ifrmSrc = $(tabs[i].panel("options").content).attr("src");
                        if (ifrmSrc == item.value) {
                            $("#tabs").tabs("select", $("#tabs").tabs("getTabIndex", tabs[i]));
                            isIn = true;
                            break;
                        }
                    }
                    if (isIn == false) {
                        AddTabs(item.text, item.value);
                    }
                }
            });

以上用到了easyui-sidemenu控件,结合easyui-tabs控件,原理是获取iframe的src属性来判断是否存在tab,就算存在重名菜单项,也可以很好的解决一个页面多个选项卡展示不同页面的问题。

你可能感兴趣的:(easyui)