加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

jquery ui tabs 的各种用法 (1)

(2012-11-08 12:23:12)
标签：

jquery

ui

tabs

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

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有