文档章节

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
chrome扩展与标签tab的内容交互

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

crackernet
06/29
0
0
easyui使用json创建树形菜单

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

fengyexjtu
2016/12/11
531
0

没有更多内容

加载失败,请刷新页面

加载更多

如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
今天
3
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
3
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
今天
2
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
今天
3
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部