- 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] ) //第二个参数是停留时间,第三个参数是当用户选中一个标签页后是否继续执行
jquery ui tab
最新推荐文章于 2023-07-31 09:04:01 发布