Java教程

解决eayui tabs title重名的问题

本文主要是介绍解决eayui tabs title重名的问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

                                                                                                                             

在使用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重名的问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!