解决eayui tabs title重名的问题 

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了解决eayui tabs title重名的问题 ，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4801字，纯文字阅读大概需要7分钟。

内容图文

                                                                                                                             

在使用easyui tabs时候，遇到了title重名的问题让人头疼（添加的时候），最后想到了用id的办法。

将下列代码复制可使用 $("#tt").tabs("selectById", id);   方法

 1.tabs重名问题  (直接复制放在js中)
    $.extend($.fn.tabs.methods, {
        getTabById: function (jq, id) {
            var tabs = $.data(jq[0], 'tabs').tabs;
            for (var i = 0; i < tabs.length; i++) {
                var tab = tabs[i];
                if (tab.panel('options').id == id) {
                    return tab;
                }
            }
            return null;
        },
        selectById: function (jq, id) {
            return jq.each(function () {
                var state = $.data(this, 'tabs');
                var opts = state.options;
                var tabs = state.tabs;
                var selectHis = state.selectHis;
                if (tabs.length == 0) { return; }
                var panel = $(this).tabs('getTabById', id); // get the panel to be activated 
                if (!panel) { return }
                var selected = $(this).tabs('getSelected');
                if (selected) {
                    if (panel[0] == selected[0]) { return }
                    $(this).tabs('unselect', $(this).tabs('getTabIndex', selected));
                    if (!selected.panel('options').closed) { return }
                }
                panel.panel('open');
                var title = panel.panel('options').title;        // the panel title 
                selectHis.push(title);        // push select history 
                var tab = panel.panel('options').tab;        // get the tab object 
                tab.addClass('tabs-selected');
                // scroll the tab to center position if required. 
                var wrap = $(this).find('>div.tabs-header>div.tabs-wrap');
                var left = tab.position().left;
                var right = left + tab.outerWidth();
                if (left < 0 || right > wrap.width()) {
                    var deltaX = left - (wrap.width() - tab.width()) / 2;
                    $(this).tabs('scrollBy', deltaX);
                } else {
                    $(this).tabs('scrollBy', 0);
                }
                $(this).tabs('resize');
                opts.onSelect.call(this, title, $(this).tabs('getTabIndex', panel));
            });
        },
        existsById: function (jq, id) {
            return $(jq[0]).tabs('getTabById', id) != null;
        }
    });
    

 

2.eaysui tree点击的候:

  $(".easyui-tree").tree(
        {
            onClick: function (node) {
                mid = node.id;
                var title = node.text;
                currentTadName = title;
                if (title.length >= 9) {
                    title = title.substring(0, 8) + "...";
                }
                var ff = false;
                var pp1 = [];
                pp1 = $('#tt').tabs('tabs');     //获取所有tabs

                for (var i = 0; i < pp1.length; i++) {
                    if (pp1[i][0].id == node.id) {        //循环匹配    pp[i][0].id表示当前所有tabs的容器id ，与点击的tree节点id进行匹配，
                        ff = true;
                        $("#tt").tabs("selectById", pp1[i][0].id);   //匹配到使用id找到他
                        break;
                    }
                }

                if (ff == false) {
                    var src;
                    if (node.attributes != null && node.attributes != undefined) {

                        if (node.attributes.url != "" && node.attributes.url != null) {
                            if (node.attributes.logo) {
                                src = "http://" + location.host + "/" + node.attributes.url;
                            }
                            else
                                src = "http://" + host + ":8090/" + node.attributes.url;
                        }
                        var content = '<iframe id="iframe1" scrolling="no" frameborder="0" allowfullscreen="true"   src="' + src + '"></iframe>';
                        $("#tt").tabs("add",
                            {
                                id: node.id,     //将点击tree的节点id存到，对应的tabs容器中。
                                title: title,
                                content: content,
                                closable: true,
                            });

                        tt_text.push(node.text);

                        for (var i = 0; i < tt_text.length; i++) {
                            if ($(".tabs li")[i + 1].setAttribute("title", tt_text[i]) != undefined)
                                $(".tabs li")[i + 1].setAttribute("title", tt_text[i]);
                        }

                    }

                }
            }

内容总结

以上是互联网集市为您收集整理的解决eayui tabs title重名的问题 全部内容，希望文章能够帮你解决解决eayui tabs title重名的问题 所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---