jquery ui tab 详细参考

来源：互联网发布：安卓手机图片导入mac 编辑：程序博客网时间：2024/06/06 18:57
JQuery UI - tabs 收藏1. ·概述  2. 标签页插件通常用于将内容分解成多个部分，可交换查看，节省空间。有点类似于手风琴插件。  3. 官方示例地址：http://jqueryui.com/demos/tabs/  4.   5.   6. ·丰富的事件支持：   7.   tabsselect, tabsload, tabsshow  8.   tabsadd, tabsremove   9.   tabsenable, tabsdisable   10.   11.   事件绑定示例:   12.   $('#example').bind('tabsselect', function(event, ui) {  13.       // 在事件函数的上下文中可使用:  14.       ui.tab     // 锚元素选中的标签页  15.       ui.panel   // 锚元素选中的标签页的内容  16.       ui.index   // 锚元素选中的标签页的索引（从0开始）  17.   });  18.   注意：一个tabsselect事件如果返回false，那么新的标签页将不会被激活。（可用于验证表单内容）  19.   20. ·Ajax模式：  21.   标签页插件支持通过ajax动态加载一个标签的内容。   22.   你需要的仅是一个带有链接的HTML列表，告诉插件需要到哪获取内容。  23.   <div id="example">  24.       <ul>  25.           <li><a href="ahah_1.html" mce_href="ahah_1.html"><span>Content 1</span></a></li>  26.           <li><a href="ahah_2.html" mce_href="ahah_2.html"><span>Content 2</span></a></li>  27.           <li><a href="ahah_3.html" mce_href="ahah_3.html"><span>Content 3</span></a></li>  28.       </ul>  29.   </div>  30.   显然，这将会减缓内容加载的速度。  31.   32.   注意：如果你要重用一个标签页容器，你可以试着匹配其title属性和容器的id，  33.   例如: <li><a href="hello/world.html" mce_href="hello/world.html" title="Todo Overview"> ... </a></li>  34.   容器: <div id="Todo_Overview"> ... </div>  35.   36.   37. ·关于后退按钮和书签  38.   Tabs 2 已经支持此功能（不支持Safari 3）  39.   40. ·How to...  41.     ·检索选中标签的索引  42.     var $tabs = $('#example').tabs();  43.     var selected = $tabs.tabs('option', 'selected'); // => 0  44.       45.     ·在当前标签中打开链接，而不是跳转页面  46.     $('#example').tabs({  47.         load: function(event, ui) {  48.             $('a', ui.panel).click(function() {  49.                 $(ui.panel).load(this.href);  50.                 return false;  51.             });  52.         }  53.     });  54.       55.     ·点击链接跳转到指定的标签页（非标签头链接）  56.     var $tabs = $('#example').tabs(); // 选中第一个标签  57.     $('#my-text-link').click(function() { // 绑定点击事件  58.         $tabs.tabs('select', 2); // 激活第三个标签  59.         return false;  60.     });  61.       62.     ·选中表单前验证  63.     $('#example').tabs({  64.         select: function(event, ui) {  65.             var isValid = ... // 表单验证返回结果true或false  66.             return isValid;  67.         }  68.     });  69.       70.     ·添加一个标签并选中  71.     var $tabs = $('#example').tabs({  72.         add: function(event, ui) {  73.             $tabs.tabs('select', '#' + ui.panel.id);  74.         }  75.     });  76.       77.     ·follow a tab's URL instead of loading its content via ajax  78.     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).   79.     $('#example').tabs({  80.         select: function(event, ui) {  81.             var url = $.data(ui.tab, 'load.tabs');  82.             if( url ) {  83.                 location.href = url;  84.                 return false;  85.             }  86.             return true;  87.         }  88.     });  89.       90.     ·prevent a FOUC (Flash of Unstyled Content) before tabs are initialized  91.     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:   92.     <div id="example" class="ui-tabs">  93.       ...  94.       <div id="a-tab-panel" class="ui-tabs-hide"> </div>  95.       ...  96.     </div>  97.   98.   99. ·参数（参数名 : 参数类型 : 默认名称）  100. ajaxOptions : Options : null  101.   Ajax加载标签内容时，附加的参数 (详见 $.ajax)。  102.   初始：$('.selector').tabs({ ajaxOptions: { async: false } });  103.   获取：var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');  104.   设置：$('.selector').tabs('option', 'ajaxOptions', { async: false });  105.   106. cache : Boolean : false  107.   是否缓存Ajax加载的标签内容，如果缓存则只在第一次加载时获取。  108.   初始：$('.selector').tabs({ cache: true });  109.   获取：var cache = $('.selector').tabs('option', 'cache');  110.   设置：$('.selector').tabs('option', 'cache', true);  111.   112. collapsible : Boolean : false  113.   设置为true，则允许一个已选中的标签变成未选中状态。  114.   初始：$('.selector').tabs({ collapsible: true });  115.   获取：var collapsible = $('.selector').tabs('option', 'collapsible');  116.   设置：$('.selector').tabs('option', 'collapsible', true);  117.   118. cookie : Object : null  119.   利用cookie记录最后选中的标签，需要cookie插件支持。  120.   初始：$('.selector').tabs({ cookie: { expires: 30 } });  121.   获取：var cookie = $('.selector').tabs('option', 'cookie');  122.   设置：$('.selector').tabs('option', 'cookie', { expires: 30 });  123.   124. deselectable : Boolean : false  125.   设置标签插件为不可选中的。（不推荐使用在1.7版本，应使用collapsible）  126.   初始：$('.selector').tabs({ deselectable: true });  127.   获取：var deselectable = $('.selector').tabs('option', 'deselectable');  128.   设置：$('.selector').tabs('option', 'deselectable', true);  129.   130. disabled : Array : []  131.   在加载时，禁用哪些标签页，填写标签页的索引。  132.   初始：$('.selector').tabs({ disabled: [1, 2] });  133.   获取：var disabled = $('.selector').tabs('option', 'disabled');  134.   设置：$('.selector').tabs('option', 'disabled', [1, 2]);  135.   136. event : String : 'click'  137.   设置什么事件将触发选中一个标签页。  138.   初始：$('.selector').tabs({ event: 'mouseover' });  139.   获取：var event = $('.selector').tabs('option', 'event');  140.   设置：$('.selector').tabs('option', 'event', 'mouseover');  141.   142. fx : Options, Array : null  143.   启用动画效果当标签页显示和隐藏。  144.   初始：$('.selector').tabs({ fx: { opacity: 'toggle' } });  145.   获取：var fx = $('.selector').tabs('option', 'fx');  146.   设置：$('.selector').tabs('option', 'fx', { opacity: 'toggle' });  147.   148. idPrefix : String : 'ui-tabs-'  149.   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".  150.   初始：$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });  151.   获取：var idPrefix = $('.selector').tabs('option', 'idPrefix');  152.   设置：$('.selector').tabs('option', 'idPrefix', 'ui-tabs-primary');  153.   154. panelTemplate : String : '<div></div>'  155.   当动态添加一个标签容器时，它的容器的HTML元素。  156.   初始：$('.selector').tabs({ panelTemplate: '<li></li>' });  157.   获取：var panelTemplate = $('.selector').tabs('option', 'panelTemplate');  158.   设置：$('.selector').tabs('option', 'panelTemplate', '<li></li>');  159.   160. selected : Number : 0  161.   设置初始化时，选中的标签页的索引（从0开始）。如果全部未选中，则使用-1  162.   初始：$('.selector').tabs({ selected: 3 });   163.   获取：var selected = $('.selector').tabs('option', 'selected');  164.   设置：$('.selector').tabs('option', 'selected', 3);  165.   166. spinner : String : '<em>Loading…</em>'  167.   设置当从远程加载内容时，标签的标题显示的文本内容，如果设置为空则停用此行为。  168.   初始：$('.selector').tabs({ spinner: 'Retrieving data...' });  169.   获取：var spinner = $('.selector').tabs('option', 'spinner');  170.   设置：$('.selector').tabs('option', 'spinner', 'Retrieving data...');  171.   172. tabTemplate : String : '<li><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></li>'  173.   当动态添加一个标签页时，它的标签样式，#{href}和#{label}是用于替换add时的参数。  174.   初始：$('.selector').tabs({ tabTemplate: '<div><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></div>' });  175.   获取：var tabTemplate = $('.selector').tabs('option', 'tabTemplate');  176.   设置：$('.selector').tabs('option', 'tabTemplate', '<div><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></div>');  177.   178.   179. ·事件  180. select : tabsselect  181.   当点击一个标签标题时，触发此事件。  182.   初始：$('.selector').tabs({ select: function(event, ui) { ... } });  183.   绑定：$('.selector').bind('tabsselect', function(event, ui) { ... });  184.   185. load : tabsload  186.   当远程加载一个标签页内容完成后，触发此事件。  187.   初始：$('.selector').tabs({ load: function(event, ui) { ... } });  188.   绑定：$('.selector').bind('tabsload', function(event, ui) { ... });  189.   190. show : tabsshow  191.   当一个标签页内容显示出来后，触发此事件。  192.   初始：$('.selector').tabs({ show: function(event, ui) { ... } });  193.   绑定：$('.selector').bind('tabsshow', function(event, ui) { ... });  194.   195. add : tabsadd  196.   当添加一个标签页后，触发此事件。  197.   初始：$('.selector').tabs({ add: function(event, ui) { ... } });  198.   绑定：$('.selector').bind('tabsadd', function(event, ui) { ... });  199.   200. remove : tabsremove  201.   当移除一个标签页后，触发此事件。  202.   初始：$('.selector').tabs({ remove: function(event, ui) { ... } });  203.   绑定：$('.selector').bind('tabsremove', function(event, ui) { ... });  204.   205. enable : tabsenable  206.   当一个标签页被设置成启用后，触发此事件。  207.   初始：$('.selector').tabs({ enable: function(event, ui) { ... } });  208.   绑定：$('.selector').bind('tabsenable', function(event, ui) { ... });  209.   210. disable : tabsdisable  211.   当一个标签页被设置成禁用后，触发此事件。  212.   初始：$('.selector').tabs({ disable: function(event, ui) { ... } });  213.   绑定：$('.selector').bind('tabsdisable', function(event, ui) { ... });  214.   215.   216. ·属性  217. destroy  218.   销毁一个标签插件对象。  219.   用法：.tabs( 'destroy' )  220.   221. disable  222.   禁用标签插件。  223.   用法：.tabs( 'disable' )  224.   225. enable  226.   启用标签插件。  227.   用法：.tabs( 'enable' )  228.   229. option  230.   获取或设置标签插件的参数。  231.   用法：.tabs( 'option' , optionName , [value] )  232.   233. add  234.   添加一个标签页。  235.   用法：.tabs( 'add' , url , label , [index] )  236.   237. remove  238.   移除一个标签页。  239.   用法：.tabs( 'remove' , index )  240.   241. enable  242.   启用一组标签页。  243.   用法：.tabs( 'enable' , index ) //index是数组  244.   245. disable  246.   禁用一组标签页。  247.   用法：.tabs( 'disable' , index ) //index是数组  248.   249. select  250.   选中一个标签页。  251.   用法：.tabs( 'select' , index )  252.   253. load  254.   重新加载一个ajax标签页的内容。  255.   用法：.tabs( 'load' , index )  256.   257. url  258.   改变一个Ajax标签页的URL。  259.   用法：.tabs( 'url' , index , url )  260.   261. length  262.   获取标签页的数量。  263.   用法：.tabs( 'length' )  264.     265. abort  266.   终止正在进行Ajax请求的的标签页的加载和动画。  267.   用法：.tabs( 'abort' )  268.   269. rotate  270.   自动滚动显示标签页。  271.   用法：.tabs( 'rotate' , ms , [continuing] ) //第二个参数是停留时间，第三个参数是当用户选中一个标签页后是否继续执行