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   // 锚元素选中的标签页的索引（从0开始）  

17.  });  

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

19.  

20.·Ajax模式：  

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

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

23.  "example">  

24.      

  

25.          

• Content 1
  

26.          

• Content 2
  

27.          

• Content 3
  

28.      

29.    

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

31.  

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

33.  例如: 

34.  容器: "Todo_Overview"> ...   

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({  

.        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.    });  

.      

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.    "example" class="ui-tabs">  

93.      ...  

94.      "a-tab-panel" class="ui-tabs-hide">   

95.      ...  

96.      

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');  

1.  设置：$('.selector').tabs('option', 'selected', 3);  

165.  

166.spinner : String : 'Loading…'  

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

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

174.  初始：$('.selector').tabs({ tabTemplate: '#{label}' });  

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

176.  设置：$('.selector').tabs('option', 'tabTemplate', '#{label}');  

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) { ... });  

1.  

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

2.    

265.abort  

266.  终止正在进行Ajax请求的的标签页的加载和动画。  

267.  用法：.tabs( 'abort' )  

268.  

269.rotate  

270.  自动滚动显示标签页。  

271.  用法：.tabs( 'rotate' , ms , [continuing] ) //第二个参数是停留时间，第三个参数是当用户选中一个标签页后是否继续执行  下载本文