jquery ui tab菜单说明
JQuery UI - tabs 收藏
view plaincopy to clipboardprint?
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 // 锚元素选中的标签页的索引（从开始）
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. 设置初始化时，选中的标签页的索引（从开始）。如果全部未选中，则使用-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] ) //第二个参数是停留时间，第三个参数是当用户选中一个标签页后是否继续执行