tabs扩展:按照标签页ID进行检索
博客专区 > hanfeng 的博客 > 博客详情
tabs扩展:按照标签页ID进行检索
hanfeng 发表于3年前
tabs扩展:按照标签页ID进行检索
  • 发表于 3年前
  • 阅读 69
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 学生专属云服务套餐 10元起购>>>   

摘要: jQuery EasyUI的tabs组件里,几乎所有涉及到标签页检索的接口,都只提供了根据标签页的title或者index检索,并没有提供根据ID检索的功能。 不光是缺失根据ID检索的能力,即便是只根据title或者index去检索,相关接口设计得也很不合理,根据title或者index检索却只提供一个参数,看似功能灵活,实质上,个人觉得是语义不清,不提倡这种写法。 通过修改源码的方式让tabs组件支持按照ID检索是很容易的,但修改源码影响正常的版本升级。如果使用扩展的方式,涉及到的接口太多,如果想统统扩展一下,基本上等于把tabs组件重写一次了。

扩展方式实现

本文只举两个扩展方式的例子,实现select和exists两个接口按照ID检索功能,其它类似接口,可以仿照着写:

/**
 * @author {CaoGuangHui}
 */
$.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;
    }
});

使用方法:

var tab = $("tabs").tabs("selectById","tabId");
var isExist = $("tabs").tabs("existsById","tabId");

这段代码扩展了三个接口,但是只有selectById和existById才会直接用到,使用这两个方法的时候传入ID参数即可。

演示实例:

引入各大需要的js

<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
    <script type="text/javascript" src="extensions/jquery.extends.tabs.js"></script>

编写html

 <a class="easyui-linkbutton" href="javascript:void(0)" onclick="selectTab()">selectTab</a>

编写js:

<script type="text/javascript">
		var index = 0;
		function addPanel(){
			index++;
			$('#tt').tabs('add',{
                id: 'id'+index,
				title: 'Tab'+index,
				content: '<div style="padding:10px">Content'+index+'</div>',
				closable: true
			});
		}
	</script>

编写判断代码:

function selectTab(){
            var isExist = $("#tt").tabs("existsById","id2");
            if (isExist) {
            	 var tab = $("#tt").tabs("selectById","id2");
            	}else{
            		addPanel();
            	}
        }


共有 人打赏支持
粉丝 20
博文 44
码字总数 36874
×
hanfeng
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: