文档章节

easyui扩展tabs

沉默的懒猫
 沉默的懒猫
发布于 2016/06/20 11:22
字数 234
阅读 32
收藏 0
(function () {
   $.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;
        }
    });
})(jQuery);

判断

var isOpen = $('#tabs').tabs('existsById', node.id);
		if (isOpen) {
			$('#tabs').tabs('selectById', node.id);
			var tab = $('#tabs').tabs('getTabById', node.id);
			tab.panel('refresh');
			return;
		}

 

© 著作权归作者所有

共有 人打赏支持
沉默的懒猫
粉丝 8
博文 97
码字总数 36067
作品 0
海淀
程序员
私信 提问
Jquery easyui中tabs新建标签设置href会提交两次请求

Jquery easyui 1.2.4中tabs新建标签设置href会提交两次请求,这个问题应该说是个挺严重的bug,换用1.2.3版本就没有这个问题。猜想easyui是修改了panel的加载机制或缓存机制吧,总之在options...

乌鸦FB
2012/03/27
0
0
jQuery EasyUI使用教程之创建标签页

<jQuery EasyUI最新版下载> 本教程将展示如何使用easyui创建一个标签组件。标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。 标签一次只能显示一个面板,每...

Miss_Hello_World
2015/11/18
0
0
jquery easyui tab加载内容的几种方法

两者特点: href方式加载数据的特点: 被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段。 加载远程url时有遮罩效果,也就是“等待中……”效果,用户体...

文文1
2015/03/26
0
0
easyui为tabs添加右键菜单

挂上一图,看看效果,菜单就是easyui的menu组件,使用者可以为菜单选项添加图标,定义样式,甚至可以设置多级结构的菜单。 <div id="rcmenu" class="easyui-menu" style=""><div data-option...

Jialy
2014/04/10
0
1
用户界面框架jQuery EasyUI正式发布v1.4.4[附下载]

jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合当今网络的应用程序。 免费下载:jQu...

Miss_Hello_World
2015/11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

get和post详解

get和post是表单提交的两种方式,get请求数据通过域名后缀URL传送,用户可见,不安全,post请求数据通过在请求报文正文里传输,相对比较安全。get是通过URL传递表单值,post通过URL看不到表单...

青衣霓裳
30分钟前
1
0
linux-如何快速替换IP

在Linux在做高可用的时候,经常会使用到虚拟IP。在windows上一个网卡可以配置两个IP,在Linux直接使用ip命令就可以添加了。 添加 ip address add 192.168.1.200/24 broadcast 192.168.1.255 ...

Linux就该这么学
35分钟前
0
0
Unix-Linux 编程实践教程 第五章 小结

设备文件中用逗号连接起来的两个数字为主设备号和从设备号。主设备号确定实际的设备驱动程序,从设备号作为参数。 如下图中的,主设备号-4,从设备号-2 设备文件中的i-node存储的是指向内核子...

Explorer0
38分钟前
1
0
virtual box centos7 挂载进行文件和共享使用说明

一、virtualbox共享文件夹无访问权限问题解决方法 (转载 http://www.cnblogs.com/zhuguanhao/p/6192777.html) 这篇文章主要介绍了virtualbox共享文件夹无访问权限问题解决方法,造成这个问题...

mbzhong
40分钟前
1
0
Rabbitmq---消息队列

一 . MQ:message queue   消息队列的作用:   1 通信解耦   2 高峰限流 原理分析: 一开始,认证系统是强耦合的,A系统传递认证系统消息接收计算结果的过程中   1 传给认证系统   2 认...

Ala6
44分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部