jquery ui tabs 讲解

2012/11/20 10:50
阅读数 1.1W

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
6 收藏
分享
加载中
更多评论
打赏
0 评论
6 收藏
0
分享
返回顶部
顶部