文档章节

tabs扩展:按照标签页ID进行检索

hanfeng
 hanfeng
发布于 2014/06/23 09:32
字数 640
阅读 77
收藏 0

扩展方式实现

本文只举两个扩展方式的例子,实现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();
            	}
        }


本文转载自:http://www.easyui.info/archives/1711.html

共有 人打赏支持
hanfeng
粉丝 19
博文 48
码字总数 36874
作品 0
福州
高级程序员
私信 提问
jquery ui tabs 讲解

JQuery UI - tabs 收藏 ·概述 标签页插件通常用于将内容分解成多个部分,可交换查看,节省空间。有点类似于手风琴插件。 官方示例地址:http://jqueryui.com/demos/tabs/ ·丰富的事件支持:...

郑兵
2012/11/20
0
0
jquery ui tab菜单说明

JQuery UI - tabs 收藏 view plaincopy to clipboardprint? 1. ·概述 2. 标签页插件通常用于将内容分解成多个部分,可交换查看,节省空间。有点类似于手风琴插件。 3. 官方示例地址:http:...

孙斐
2011/09/06
0
0
用Javascript编写Chrome浏览器插件

我为Chrome浏览器开发了一款插件,当我向朋友展示自己的插件时,受到他们的羡慕和称赞,那感觉酷极了!通过这次开发,我发现整个开发过程比较简单,有Javascript基础的朋友,都可以开发出属于...

云栖希望。
2017/12/04
0
0
easyui使用json创建树形菜单

HTML 元素 JavaScript 代码 添加标签页面板 tabsId 标签页 ID title 标签页面板的标题文字 url 加载远程内容来填充标签页面板的 URL 数据格式(JSON)...

fengyexjtu
2016/12/11
531
0
chrome扩展与标签tab的内容交互

chrome插件提供了查找tab的api:   chrome.tabs.get(integer tabId, function callback) 但是出于安全的考虑,tab的属性中没有document,因此无法在扩展中直接获取某个页签页面中的页面元素...

crackernet
06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Vue.js 3.0 新特性预览

Evan You(尤雨溪)(2018年11月16日)前几日的早上在 Vue Toronto 的主题演讲中预演了 Vue 3 。 利用现代浏览器支持的新功能,Vue 3 将成为我们已经了解和喜爱的 Vue.js 强大的的改进版本。...

我的卡
27分钟前
1
0
Mybatis自带连接池阅读

1、数据源初始化,初始化入口由SqlSessionFactoryBuilder.build(InputStream inputStream, String environment, Properties properties)方法提供 public SqlSessionFactory build(InputStre......

jcc_codingBoy
33分钟前
3
0
Oracle 数据库勒索病毒 RushQL 处理办法

Oracle 数据库勒索病毒 RushQL 处理办法 办法来自Oracle 官方: https://blogs.oracle.com/cnsupport_news/%E5%AF%B9%E6%95%B0%E6%8D%AE%E5%BA%93%E7%9A%84%E2%80%9C%E6%AF%94%E7%89%B9%E5%......

rootliu
34分钟前
2
0
聊聊flink LocalEnvironment的execute方法

序 本文主要研究一下flink LocalEnvironment的execute方法 实例 final ExecutionEnvironment env = ExecutionEnvironment.getExecutionEnvironment(); DataSet<RecordDto>......

go4it
36分钟前
2
0
Spring Boot中对自然语言处理工具包hanlp的调用详解

概 述 HanLP 是基于 Java开发的 NLP工具包,由一系列模型与算法组成,目标是普及自然语言处理在生产环境中的应用。而且 HanLP具备功能完善、性能高效、架构清晰、语料时新、可自定义的特点,...

左手的倒影
42分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部