jquery ui tabs重要参考

2023年6月21日发(作者：)

JQuery UI - tabs

收藏

view plaincopy to clipboardprint?

1. ·概述

2. 标签页插件通常用于将内容分解成多个部分，可交换查看，节省空间。有点类似于手风琴插件。

3. 官方示例地址：/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. // 锚元素选中的标签页

15. // 锚元素选中的标签页的内容

16. // 锚元素选中的标签页的索引（从0开始）

17. });

18. 注意：一个tabsselect事件如果返回false，那么新的标签页将不会被激活。（可用于验证表单内容）

19.

20. ·Ajax模式：

21. 标签页插件支持通过ajax动态加载一个标签的内容。

22. 你需要的仅是一个带有链接的HTML列表，告诉插件需要到哪获取内容。

23.

30. 显然，这将会减缓内容加载的速度。

31.

32. 注意：如果你要重用一个标签页容器，你可以试着匹配其title属性和容器的id，

33. 例如:

...

34. 容器:

35. 36.

37. ·关于后退按钮和书签

38. Tabs 2 已经支持此功能（不支持Safari 3）

39.

40. ·

41. ·检索选中标签的索引

42. var $tabs = $('#example').tabs();

43. var selected = $('option', 'selected'); // => 0

44.

45. ·在当前标签中打开链接，而不是跳转页面

46. $('#example').tabs({

47. load: function(event, ui) {

48. $('a', ).click(function() {

49. $().load();

50. return false;

51. });

52. }

53. });

54.

55. ·点击链接跳转到指定的标签页（非标签头链接）

56. var $tabs = $('#example').tabs(); // 选中第一个标签

57. $('#my-text-link').click(function() { // 绑定点击事件

58. $('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. $('select', '#' + );

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 (/alertbox/).

79. $('#example').tabs({

80. select: function(event, ui) {

81. var url = $.data(, '');

82. if( url ) {

83. = 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.

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 : '

'

155. 当动态添加一个标签容器时，它的容器的HTML元素。

156. 初始：$('.selector').tabs({ panelTemplate: '

' });

157. 获取：var panelTemplate = $('.selector').tabs('option', 'panelTemplate'); 158. 设置：$('.selector').tabs('option', 'panelTemplate', '

');

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 : 'Loading…'

167. 设置当从远程加载内容时，标签的标题显示的文本内容，如果设置为空则停用此行为。

168. 初始：$('.selector').tabs({ spinner: '' });

169. 获取：var spinner = $('.selector').tabs('option', 'spinner');

170. 设置：$('.selector').tabs('option', 'spinner', '');

171.

172. tabTemplate : String : '

#{label}

'

173. 当动态添加一个标签页时，它的标签样式，#{href}和#{label}是用于替换add时的参数。

174. 初始：$('.selector').tabs({ tabTemplate: '

' });

175. 获取：var tabTemplate = $('.selector').tabs('option', 'tabTemplate');

176. 设置：$('.selector').tabs('option', 'tabTemplate', '

');

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] ) //第二个参数是停留时间，第三个参数是当用户选中一个标签页后是否继续执行

2023年6月21日发(作者：)

JQuery UI - tabs

收藏

view plaincopy to clipboardprint?

1. ·概述

2. 标签页插件通常用于将内容分解成多个部分，可交换查看，节省空间。有点类似于手风琴插件。

3. 官方示例地址：/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. // 锚元素选中的标签页

15. // 锚元素选中的标签页的内容

16. // 锚元素选中的标签页的索引（从0开始）

17. });

18. 注意：一个tabsselect事件如果返回false，那么新的标签页将不会被激活。（可用于验证表单内容）

19.

20. ·Ajax模式：

21. 标签页插件支持通过ajax动态加载一个标签的内容。

22. 你需要的仅是一个带有链接的HTML列表，告诉插件需要到哪获取内容。

23.

30. 显然，这将会减缓内容加载的速度。

31.

32. 注意：如果你要重用一个标签页容器，你可以试着匹配其title属性和容器的id，

33. 例如:

...

34. 容器:

35. 36.

37. ·关于后退按钮和书签

38. Tabs 2 已经支持此功能（不支持Safari 3）

39.

40. ·

41. ·检索选中标签的索引

42. var $tabs = $('#example').tabs();

43. var selected = $('option', 'selected'); // => 0

44.

45. ·在当前标签中打开链接，而不是跳转页面

46. $('#example').tabs({

47. load: function(event, ui) {

48. $('a', ).click(function() {

49. $().load();

50. return false;

51. });

52. }

53. });

54.

55. ·点击链接跳转到指定的标签页（非标签头链接）

56. var $tabs = $('#example').tabs(); // 选中第一个标签

57. $('#my-text-link').click(function() { // 绑定点击事件

58. $('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. $('select', '#' + );

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 (/alertbox/).

79. $('#example').tabs({

80. select: function(event, ui) {

81. var url = $.data(, '');

82. if( url ) {

83. = 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.

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 : '

'

155. 当动态添加一个标签容器时，它的容器的HTML元素。

156. 初始：$('.selector').tabs({ panelTemplate: '

' });

157. 获取：var panelTemplate = $('.selector').tabs('option', 'panelTemplate'); 158. 设置：$('.selector').tabs('option', 'panelTemplate', '

');

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 : 'Loading…'

167. 设置当从远程加载内容时，标签的标题显示的文本内容，如果设置为空则停用此行为。

168. 初始：$('.selector').tabs({ spinner: '' });

169. 获取：var spinner = $('.selector').tabs('option', 'spinner');

170. 设置：$('.selector').tabs('option', 'spinner', '');

171.

172. tabTemplate : String : '

#{label}

'

173. 当动态添加一个标签页时，它的标签样式，#{href}和#{label}是用于替换add时的参数。

174. 初始：$('.selector').tabs({ tabTemplate: '

' });

175. 获取：var tabTemplate = $('.selector').tabs('option', 'tabTemplate');

176. 设置：$('.selector').tabs('option', 'tabTemplate', '

');

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] ) //第二个参数是停留时间，第三个参数是当用户选中一个标签页后是否继续执行