文档章节

jquery ui tabs 讲解

郑兵
 郑兵
发布于 2012/11/20 10:50
字数 1805
阅读 5548
收藏 6

JQuery UI - tabs 收藏

·概述  

标签页插件通常用于将内容分解成多个部分,可交换查看,节省空间。有点类似于手风琴插件。  

官方示例地址:http://jqueryui.com/demos/tabs/  

  

  

·丰富的事件支持:   

  tabsselect, tabsload, tabsshow  

  tabsadd, tabsremove   

  tabsenable, tabsdisable   

  

  事件绑定示例:   

  $('#example').bind('tabsselect', function(event, ui) {  

      // 在事件函数的上下文中可使用:  

      ui.tab     // 锚元素选中的标签页  

      ui.panel   // 锚元素选中的标签页的内容  

      ui.index   // 锚元素选中的标签页的索引(从0开始)  

  });  

  注意:一个tabsselect事件如果返回false,那么新的标签页将不会被激活。(可用于验证表单内容)  

  

·Ajax模式:  

  标签页插件支持通过ajax动态加载一个标签的内容。   

  你需要的仅是一个带有链接的HTML列表,告诉插件需要到哪获取内容。  

  <div id="example">  

      <ul>  

          <li><a href="ahah_1.html" mce_href="ahah_1.html"><span>Content 1</span></a></li>  

          <li><a href="ahah_2.html" mce_href="ahah_2.html"><span>Content 2</span></a></li>  

          <li><a href="ahah_3.html" mce_href="ahah_3.html"><span>Content 3</span></a></li>  

      </ul>  

  </div>  

  显然,这将会减缓内容加载的速度。  

  

  注意:如果你要重用一个标签页容器,你可以试着匹配其title属性和容器的id,  

  例如: <li><a href="hello/world.html" mce_href="hello/world.html" title="Todo Overview"> ... </a></li>  

  容器: <div id="Todo_Overview"> ... </div>  

  

  

·关于后退按钮和书签  

  Tabs 2 已经支持此功能(不支持Safari 3)  

  

·How to...  

    ·检索选中标签的索引  

    var $tabs = $('#example').tabs();  

    var selected = $tabs.tabs('option', 'selected'); // => 0  

      

    ·在当前标签中打开链接,而不是跳转页面  

    $('#example').tabs({  

        load: function(event, ui) {  

            $('a', ui.panel).click(function() {  

                $(ui.panel).load(this.href);  

                return false;  

            });  

        }  

    });  

      

    ·点击链接跳转到指定的标签页(非标签头链接)  

    var $tabs = $('#example').tabs(); // 选中第一个标签  

    $('#my-text-link').click(function() { // 绑定点击事件  

        $tabs.tabs('select', 2); // 激活第三个标签  

        return false;  

    });  

      

    ·选中表单前验证  

    $('#example').tabs({  

        select: function(event, ui) {  

            var isValid = ... // 表单验证返回结果true或false  

            return isValid;  

        }  

    });  

      

    ·添加一个标签并选中  

    var $tabs = $('#example').tabs({  

        add: function(event, ui) {  

            $tabs.tabs('select', '#' + ui.panel.id);  

        }  

    });  

      

    ·follow a tab's URL instead of loading its content via ajax  

    Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html).   

    $('#example').tabs({  

        select: function(event, ui) {  

            var url = $.data(ui.tab, 'load.tabs');  

            if( url ) {  

                location.href = url;  

                return false;  

            }  

            return true;  

        }  

    });  

      

    ·prevent a FOUC (Flash of Unstyled Content) before tabs are initialized  

    Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled:   

    <div id="example" class="ui-tabs">  

      ...  

      <div id="a-tab-panel" class="ui-tabs-hide"> </div>  

      ...  

    </div>  

  

  

·参数(参数名 : 参数类型 : 默认名称)  

ajaxOptions : Options : null  

  Ajax加载标签内容时,附加的参数 (详见 $.ajax)。  

  初始:$('.selector').tabs({ ajaxOptions: { async: false } });  

  获取:var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');  

  设置:$('.selector').tabs('option', 'ajaxOptions', { async: false });  

  

cache : Boolean : false  

  是否缓存Ajax加载的标签内容,如果缓存则只在第一次加载时获取。  

  初始:$('.selector').tabs({ cache: true });  

  获取:var cache = $('.selector').tabs('option', 'cache');  

  设置:$('.selector').tabs('option', 'cache', true);  

  

collapsible : Boolean : false  

  设置为true,则允许一个已选中的标签变成未选中状态。  

  初始:$('.selector').tabs({ collapsible: true });  

  获取:var collapsible = $('.selector').tabs('option', 'collapsible');  

  设置:$('.selector').tabs('option', 'collapsible', true);  

  

cookie : Object : null  

  利用cookie记录最后选中的标签,需要cookie插件支持。  

  初始:$('.selector').tabs({ cookie: { expires: 30 } });  

  获取:var cookie = $('.selector').tabs('option', 'cookie');  

  设置:$('.selector').tabs('option', 'cookie', { expires: 30 });  

  

deselectable : Boolean : false  

  设置标签插件为不可选中的。(不推荐使用在1.7版本,应使用collapsible)  

  初始:$('.selector').tabs({ deselectable: true });  

  获取:var deselectable = $('.selector').tabs('option', 'deselectable');  

  设置:$('.selector').tabs('option', 'deselectable', true);  

  

disabled : Array : []  

  在加载时,禁用哪些标签页,填写标签页的索引。  

  初始:$('.selector').tabs({ disabled: [1, 2] });  

  获取:var disabled = $('.selector').tabs('option', 'disabled');  

  设置:$('.selector').tabs('option', 'disabled', [1, 2]);  

  

event : String : 'click'  

  设置什么事件将触发选中一个标签页。  

  初始:$('.selector').tabs({ event: 'mouseover' });  

  获取:var event = $('.selector').tabs('option', 'event');  

  设置:$('.selector').tabs('option', 'event', 'mouseover');  

  

fx : Options, Array : null  

  启用动画效果当标签页显示和隐藏。  

  初始:$('.selector').tabs({ fx: { opacity: 'toggle' } });  

  获取:var fx = $('.selector').tabs('option', 'fx');  

  设置:$('.selector').tabs('option', 'fx', { opacity: 'toggle' });  

  

idPrefix : String : 'ui-tabs-'  

  If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54".  

  初始:$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });  

  获取:var idPrefix = $('.selector').tabs('option', 'idPrefix');  

  设置:$('.selector').tabs('option', 'idPrefix', 'ui-tabs-primary');  

  

panelTemplate : String : '<div></div>'  

  当动态添加一个标签容器时,它的容器的HTML元素。  

  初始:$('.selector').tabs({ panelTemplate: '<li></li>' });  

  获取:var panelTemplate = $('.selector').tabs('option', 'panelTemplate');  

  设置:$('.selector').tabs('option', 'panelTemplate', '<li></li>');  

  

selected : Number : 0  

  设置初始化时,选中的标签页的索引(从0开始)。如果全部未选中,则使用-1  

  初始:$('.selector').tabs({ selected: 3 });   

  获取:var selected = $('.selector').tabs('option', 'selected');  

  设置:$('.selector').tabs('option', 'selected', 3);  

  

spinner : String : '<em>Loading…</em>'  

  设置当从远程加载内容时,标签的标题显示的文本内容,如果设置为空则停用此行为。  

  初始:$('.selector').tabs({ spinner: 'Retrieving data...' });  

  获取:var spinner = $('.selector').tabs('option', 'spinner');  

  设置:$('.selector').tabs('option', 'spinner', 'Retrieving data...');  

  

tabTemplate : String : '<li><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></li>'  

  当动态添加一个标签页时,它的标签样式,#{href}和#{label}是用于替换add时的参数。  

  初始:$('.selector').tabs({ tabTemplate: '<div><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></div>' });  

  获取:var tabTemplate = $('.selector').tabs('option', 'tabTemplate');  

  设置:$('.selector').tabs('option', 'tabTemplate', '<div><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></div>');  

  

  

·事件  

select : tabsselect  

  当点击一个标签标题时,触发此事件。  

  初始:$('.selector').tabs({ select: function(event, ui) { ... } });  

  绑定:$('.selector').bind('tabsselect', function(event, ui) { ... });  

  

load : tabsload  

  当远程加载一个标签页内容完成后,触发此事件。  

  初始:$('.selector').tabs({ load: function(event, ui) { ... } });  

  绑定:$('.selector').bind('tabsload', function(event, ui) { ... });  

  

show : tabsshow  

  当一个标签页内容显示出来后,触发此事件。  

  初始:$('.selector').tabs({ show: function(event, ui) { ... } });  

  绑定:$('.selector').bind('tabsshow', function(event, ui) { ... });  

  

add : tabsadd  

  当添加一个标签页后,触发此事件。  

  初始:$('.selector').tabs({ add: function(event, ui) { ... } });  

  绑定:$('.selector').bind('tabsadd', function(event, ui) { ... });  

  

remove : tabsremove  

  当移除一个标签页后,触发此事件。  

  初始:$('.selector').tabs({ remove: function(event, ui) { ... } });  

  绑定:$('.selector').bind('tabsremove', function(event, ui) { ... });  

  

enable : tabsenable  

  当一个标签页被设置成启用后,触发此事件。  

  初始:$('.selector').tabs({ enable: function(event, ui) { ... } });  

  绑定:$('.selector').bind('tabsenable', function(event, ui) { ... });  

  

disable : tabsdisable  

  当一个标签页被设置成禁用后,触发此事件。  

  初始:$('.selector').tabs({ disable: function(event, ui) { ... } });  

  绑定:$('.selector').bind('tabsdisable', function(event, ui) { ... });  

  

  

·属性  

destroy  

  销毁一个标签插件对象。  

  用法:.tabs( 'destroy' )  

  

disable  

  禁用标签插件。  

  用法:.tabs( 'disable' )  

  

enable  

  启用标签插件。  

  用法:.tabs( 'enable' )  

  

option  

  获取或设置标签插件的参数。  

  用法:.tabs( 'option' , optionName , [value] )  

  

add  

  添加一个标签页。  

  用法:.tabs( 'add' , url , label , [index] )  

  

remove  

  移除一个标签页。  

  用法:.tabs( 'remove' , index )  

  

enable  

  启用一组标签页。  

  用法:.tabs( 'enable' , index ) //index是数组  

  

disable  

  禁用一组标签页。  

  用法:.tabs( 'disable' , index ) //index是数组  

  

select  

  选中一个标签页。  

  用法:.tabs( 'select' , index )  

  

load  

  重新加载一个ajax标签页的内容。  

  用法:.tabs( 'load' , index )  

  

url  

  改变一个Ajax标签页的URL。  

  用法:.tabs( 'url' , index , url )  

  

length  

  获取标签页的数量。  

  用法:.tabs( 'length' )  

    

abort  

  终止正在进行Ajax请求的的标签页的加载和动画。  

  用法:.tabs( 'abort' )  

  

rotate  

  自动滚动显示标签页。  

  用法:.tabs( 'rotate' , ms , [continuing] ) //第二个参数是停留时间,第三个参数是当用户选中一个标签页后是否继续执行

本文转载自:

共有 人打赏支持
郑兵
粉丝 0
博文 5
码字总数 1191
作品 0
丰台
私信 提问
jQuery UI 1.8.5 发布-下载

这是 jQuery UI 1.8 的第五个维护版本,包含核心模块的bug修复,以及包括 Autocomplete, Button, Datepicker Dialog, Tabs widgets 的定位问题修复. 更详细的改进内容请看 changelog. 下载地...

红薯
2010/09/18
3K
1
[笔记]jQuery UI的tabs组件在IE浏览器中的缓存问题~

jQuery中禁用缓存 最近在使用jQuery ui中的tabs插件时,遇到一个问题。 在非IE浏览器下,标签是自动刷新的。就是在不同的标签间切换,不用刷新整个页面,如果某个标签内容有更新,比如显示时...

leeoo
2011/12/24
0
0
30 个实用的 jQuery 选项卡/导航教程推荐

很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果。本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助。 1. Animated Tabbed Conte...

小编辑
2011/11/18
5K
5
15 个免费的 CSS jQuery Tabs 插件

Tabslet jQueryUi Tabs IDTabs Tabulous. js ION Tabs Easy Tabs Tabify Smart Tabs Organic Tabs CSS3 jQuery folder tabs Responsive tabs JQuery Script Style your jQuery UI tabs How t......

oschina
2014/03/08
4.1K
2
jQuery UI 1.8.17 释出

jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、...

afantee
2011/12/09
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

常用缓存淘汰算法

LFU(Least Frequently Used)算法根据数据的历史访问频率来淘汰数据,其核心思想是“如果数据过去被访问多次,那么将来被访问的频率也更高”。 LRU(Least recently used,最近最少使用)算...

wangmarke
30分钟前
2
0
linux查看系统配置,例如一级缓存总大小、一级缓存行大小

chuqq@chuqq-vb:~$ getconf -a|grep CACHELEVEL1_ICACHE_SIZE 32768LEVEL1_ICACHE_ASSOC 8LEVEL1_ICACHE_LINESIZE 64LEVEL1_DCACHE_SIZE ......

chuqq
33分钟前
1
0
全职ui设计师岗位需要具备哪些工作技能

好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。Ui设计师可以让网页变的更美,让图片变的更真实,而今,ui设计师成了一个公司不可...

纤纤郡主
33分钟前
0
0
分布式之数据库和缓存双写一致性方案解析

先做一个说明,从理论上来说,给缓存设置过期时间,是保证最终一致性的解决方案。这种方案下,我们可以对存入缓存的数据设置过期时间,所有的写操作以数据库为准,对缓存操作只是尽最大努力即...

微笑向暖wx
38分钟前
0
0
正则验证整数或保留小数一位

var reg = new Regex(@"^\d*\.{0,1}\d{0,1}$"); if (!reg.IsMatch(body.Quota.ToString())) {}...

Lytf
38分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部