文档章节

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

hanfeng
 hanfeng
发布于 2014/06/23 09:32
字数 640
阅读 75
收藏 0
点赞 0
评论 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
分享10个jQuery的标签页tabs和手风琴效果Accordion实现

日期:2012/02/06 来源:GBin1.com 手风琴效果和标签页效果很类似。主要的区别在于显示和隐藏的方式不同。这里我们精心收集了10个标签页和手风琴效果的实现,希望大家喜欢! 1. Yetii – Ye...

gbin1
2012/02/07
3.3K
1
EdwinHui/Bootstrap-Multitabs

bootstrap-multitabs / bootstrap 多标签页 效果图 default/默认 (带有向左、向右移动以及选项菜单) Demo: nav-tabs and nav-pills classic/折叠 (折叠隐藏tab) Demo: nav-tabs and nav-pil...

EdwinHui
2016/11/14
0
0
谁写过tab页标签,怎么写比较好?

我想写个tabs页标签方便使用,每个tab里面是iframe方式嵌入页面,类似于下面的方式使用,如何做比较好,谁做过给个参考,要可以tab页之间互相取值: ......

地瓜干
2013/04/10
899
3
Bootstrap 标签页的实现(tab)

通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。 添加 nav 和 nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中...

易水寒丶开源
2015/09/21
115
0
小谈ZK框架技巧

ZK是一套以 AJAX/XUL/Java 为基础的网页应用程序开发框架,用于丰富网页应用程序的使用界面。最大的好处是,在设计AJAX网络应用程序时,轻松简便的操作就像设计桌面程序一样。 ZK包含了一个以...

Arthur126
2016/04/29
848
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

流利阅读笔记29-20180718待学习

高等教育未来成谜,前景到底在哪里? Ray 2018-07-18 1.今日导读 在这个信息爆炸的年代,获取知识是一件越来越容易的事情。人们曾经认为,如此的时代进步会给高等教育带来众多便利。但事实的...

aibinxiao
10分钟前
6
0
第15章FTP服务搭建与配置

15.1FTP介绍 FTP多用于Windows传文件到linux rz sz在文件超过4G,就无法使用了——>安装包yum install -y install lrzsz rz把 window 上的文件传输到 linux 上 sz 把 linux 上的文件传输到 ...

Linux学习笔记
18分钟前
0
0
OSChina 周三乱弹 —— 你被我从 osc 老婆们名单中踢出了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小鱼丁:分享五月天的单曲《后来的我们 (电影《后来的我们》片名曲)》: 《后来的我们 (电影《后来的我们》片名曲)》- 五月天 手机党少年们想...

小小编辑
23分钟前
6
1
Spring Boot Admin 2.0开箱体验

概述 在我之前的 《Spring Boot应用监控实战》 一文中,讲述了如何利用 Spring Boot Admin 1.5.X 版本来可视化地监控 Spring Boot 应用。说时迟,那时快,现在 Spring Boot Admin 都更新到 ...

CodeSheep
42分钟前
0
0
Python + Selenium + Chrome 使用代理 auth 的用户名密码授权

米扑代理,全球领导的代理品牌,专注代理行业近十年,提供开放、私密、独享代理,并可免费试用 米扑代理官网:https://proxy.mimvp.com 本文示例,是结合米扑代理的私密、独享、开放代理,专...

sunboy2050
今天
0
0
实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
1
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部