文档章节

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
2018/06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

全面理解Java内存模型(JMM)及volatile关键字

理解Java内存区域与Java内存模型 Java内存区域 Java虚拟机在运行程序时会把其自动管理的内存划分为以上几个区域,每个区域都有的用途以及创建销毁的时机,其中蓝色部分代表的是所有线程共享的...

亭子happy
21分钟前
1
0
Prometheus监控mysql实例--centos7安装mysql_exporter

目录 概述 环境准备 普罗米修斯简介 mysql安装 mysqld_exporter安装 启动参数列表 概述 prometheus(普罗米修斯) 是一个开源系统监控和报警工具包,许多公司和组织都采用了Prometheus,该项目...

java_龙
26分钟前
4
0
拥有2000家门店,他如何晋升为服装界的新宠?

摘要: —— iwarm3.0加热组件、碳纳米管膜炎、管状石墨结构体...你看到并不是一款高科技电子产品,这是快鱼服饰在这个冬天推出的黑科技产品 - 智能温控羽绒服。 在竞争激烈的服装行业,快鱼...

阿里云云栖社区
28分钟前
2
0
不忘初心 砥砺前行-智和信通2018年年会报道

1月18日,智和信通以“不忘初心 砥砺前行”为主题的2018总结会议暨2019年年会在京召开。年会以总经理李少龙的讲话为开场,充分肯定了全体员工2018年的工作和成绩,并表达了公司产品智和网管平...

智和网管平台
37分钟前
1
0
NGINX api网关

nginx配置 vi nginx.conf include /usr/local/nginx/conf/api/gateway.conf; # 所有的API网关配置 include /usr/local/nginx/conf/vhosts/*.conf; # 正常web域名配置......

以谁为师
38分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部