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] ) //第二個參數是停留時間，第三個參數是當用戶選中一個標籤頁後是否繼續執行