jquery ui tab

最新推荐文章于 2023-04-11 08:46:50 发布
转载最新推荐文章于 2023-04-11 08:46:50 发布 · 818 阅读
js 同时被 2 个专栏收录
46 篇文章
订阅专栏
jquery
17 篇文章
订阅专栏
本文详细介绍了jQuery UI Tabs插件的基本概念、功能特性、事件支持、Ajax模式、后退按钮与书签功能，以及如何通过事件绑定、参数配置、属性管理等方法进行定制与优化。涵盖了从初始化配置、动态加载内容、标签页切换、验证表单、添加与删除标签页、防止闪烁内容等多方面应用实例。
[javascript]view plaincopyprint? 
   
 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] ) //第二个参数是停留时间，第三个参数是当用户选中一个标签页后是否继续执行