jquery UI Tab Detailed reference

JQuery Ui-tabs Collection 1. • Overview 2. tab plug-ins are often used to break down content into multiple parts that can be exchanged for viewing, saving space.  

A bit like the accordion plugin.   

3. Official example Address: HTTP://JQUERYUI.COM/DEMOS/TABS/4. 5.6.   • Rich event Support: 7.   Tabsselect, Tabsload, Tabsshow 8.   Tabsadd, Tabsremove 9.   

Tabsenable, tabsdisable 10.   11. Example Event binding: 12.       $ (' #example '). Bind (' Tabsselect ', function (event, UI) {13.       Used in the context of an event function: 14.       Ui.tab//Anchor element selected tab page 15.       Ui.panel//Anchor element Select the contents of the tab page 16.   Ui.index//Anchor element The index of the selected tab (starting from 0) 17.  

}); 18. Note: If a Tabsselect event returns false, the new tab will not be activated.   

(Can be used to verify form content) 19. 20.   Ajax mode: 21.   

The tab plugin supports dynamically loading the contents of a tag via Ajax.  

22. All you need is a linked HTML list that tells the plugin where to get the content.       <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& Gt; <li><a href= "ahah_3.html" mce_href= "ahah_3.html" ><span>content 3</span></a>&lt       ;/li> 28.   </ul> 29.   </div> 30.  

Obviously, this will slow down the loading of content.   31.32.   Note: If you want to reuse a tab container, you can try to match its Title property and container ID, 33. Example: <li><a href= "hello/world.html" mce_href= "hello/world.html" title= "Todo Overview" > ... </a></   Li> 34.   

Container: <div id= "Todo_overview" > ... </div> 35. 36.37.   • About back buttons and bookmarks 38.   

Tabs 2 already supports this feature (Safari 3 is not supported) 39. 40.  

How to ...     41. retrieves the index of the selected label 42.  

var $tabs = $ (' #example '). tabs (); var selected = $tabs. Tabs (' option ', ' selected ');       

= 0 44.     45. opens the link in the current tab instead of jumping to page 46.         $ (' #example '). Tabs ({47).             Load:function (event, UI) {48.                 $ (' a ', Ui.panel). Click (function () {49.  

$ (Ui.panel). Load (THIS.HREF);  

. return false;  

51.});  

52.}53.});     54.55.     • Click the link to jump to the specified tab (non-Tag header link) 56. var $tabs = $ (' #example '). tabs ();     Select the first label 57.         $ (' #my-text-link '). Click (function () {//Bind point to click Event 58. $tabs. Tabs (' select ', 2);         Activates the third label 59.  

return false;  

60.});     61.62.     • Verify 63 before checking the form.         $ (' #example '). Tabs ({64).             Select:function (event, UI) {65.             var isValid = ...//form validation Returns a result of true or false 66.  

return isValid;     67.} 68.  

});     69.70.     • Add a label and select 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). $ (' #example '). Tabs ({80. Select:function (event, UI) {81.  

var url = $.data (ui.tab, ' load.tabs ');                 The. if (URL) {83.  

location.href = URL;  

. return false;             85.} 86.  

return true;     87.} 88.  

});     89.90.     prevent a Fouc (Flash of unstyled Content) before tabs is initialized 91. Add the necessary classes to hide a Inactive tab panel to the HTML right away-note so this would not degrade gracefull     Y with JavaScript being disabled:92.       <div id= "Example" class= "Ui-tabs" > 93.  

...       94. <div id= "A-tab-panel" class= "Ui-tabs-hide" > </div> 95.  

...   

</div> 97. 98.99. • Parameters (parameter name: type of argument: default name) 100.   AjaxOptions:Options:null 101.  

When Ajax loads the contents of the tag, additional parameters (see $.AJAX).  

102. Initial: $ ('. Selector '). Tabs ({ajaxoptions: {async:false}}); 103. Get: var ajaxoptions = $ ('. Selector '). Tabs (' option ', 'Ajaxoptions ');  

104. Set: $ ('. Selector '). Tabs (' option ', ' ajaxoptions ', {async:false}); 105.106.   Cache:Boolean:false 107.  

Whether to cache the contents of an AJAX-loaded tag, if the cache is only fetched the first time it is loaded.  

108. Initial: $ ('. Selector '). Tabs ({cache:true});  

109. Get: var cache = $ ('. Selector '). Tabs (' option ', ' cache ');  

110. Set: $ ('. Selector '). Tabs (' option ', ' cache ', true); 111.112.   Collapsible:Boolean:false 113.  

Set to True to allow a selected label to become unchecked.  

114. Initial: $ ('. Selector '). Tabs ({collapsible:true});  

115. Get: var collapsible = $ ('. Selector '). Tabs (' option ', ' collapsible ');  

116. Set: $ ('. Selector '). Tabs (' option ', ' collapsible ', true); 117.118.   Cookie:Object:null 119.  

Cookies are used to record the last selected label and require cookie plugin support.  

120. Initial: $ ('. Selector '). Tabs ({cookie: {expires:30}});  

121. Get: var cookie = $ ('. Selector '). Tabs (' option ', ' Cookie ');  

122. Set: $ ('. Selector '). Tabs (' option ', ' Cookie ', {expires:30}); 123.124.   Deselectable:Boolean:false 125. The Settings tab plugin is not selected. (not recommended for use in version 1.7should use collapsible) 126.  

Initial: $ ('. Selector '). Tabs ({deselectable:true});  

127. Get: var deselectable = $ ('. Selector '). Tabs (' option ', ' deselectable ');  

128. Set: $ ('. Selector '). Tabs (' option ', ' deselectable ', true); 129.130.   Disabled:array: [] 131.  

When loading, which tabs are disabled, fill in the Index of the tab page.  

132. Initial: $ ('. Selector '). Tabs ({disabled: [1, 2]});  

133. Get: var disabled = $ ('. Selector '). Tabs (' option ', ' disabled ');  

134. Set: $ ('. Selector '). Tabs (' option ', ' disabled ', [1, 2]); 135.136.   Event:string: ' Click ' 137.  

Setting what event will trigger the selection of a tab page.  

138. Initial: $ ('. Selector '). Tabs ({event: ' mouseover '});  

139. Get: var event = $ ('. Selector '). Tabs (' option ', ' event ');  

140. Set: $ ('. Selector '). Tabs (' option ', ' event ', ' mouseover '); 141.142.   Fx:options, Array:null 143.  

Enables animation effects when tabs are displayed and hidden.  

144. Initial: $ ('. Selector '). Tabs ({fx: {opacity: ' Toggle '}});  

145. Get: var FX = $ ('. Selector '). Tabs (' option ', ' FX '); 146. Set: $ ('. Selector '). Tabs (' option ', ' FX ', {opacity: ' tOggle '}); 147.148.   Idprefix:string: ' ui-tabs-' 149.  If The Remote tab, its anchor element-is, have no title attribute to generate a ID from, a id/fragment identifier is  

Created from the prefix and a unique ID returned by $.data (EL), for example "ui-tabs-54".  

150. Initial: $ ('. Selector '). Tabs ({idprefix: ' ui-tabs-primary '});  

151. Get: var Idprefix = $ ('. Selector '). Tabs (' option ', ' idprefix ');  

152. Set: $ ('. Selector '). Tabs (' option ', ' idprefix ', ' ui-tabs-primary '); 153.154.   Paneltemplate:string: ' <div></div> ' 155.  

When you dynamically add a label container, it's the HTML element of the container.  

156. Initial: $ ('. Selector '). Tabs ({paneltemplate: ' <li></li> '});  

157. Get: var paneltemplate = $ ('. Selector '). Tabs (' option ', ' paneltemplate ');  

158. Set: $ ('. Selector '). Tabs (' option ', ' paneltemplate ', ' <li></li> '); 159.160.   selected:number:0 161. The index of the Selected tab page (starting at 0) when the setting is initialized.   If all is unchecked, use-1 162.   

Initial: $ ('. Selector '). Tabs ({selected:3}); 163. Get: VarSelected = $ ('. Selector '). Tabs (' option ', ' selected ');  

164. Set: $ ('. Selector '). Tabs (' option ', ' selected ', 3); 165.166.   Spinner:string: ' <em>Loading...</em> ' 167.  

Sets the title of the label to display the text content when content is loaded from the remote, and disables this behavior if set to null.  

168. Initial: $ ('. Selector '). Tabs ({spinner: ' Retrieving Data ... '});  

169. Get: var spinner = $ ('. Selector '). Tabs (' option ', ' spinner ');  

170. Set: $ ('. Selector '). Tabs (' option ', ' Spinner ', ' retrieving data ... '); 171.172. Tabtemplate:string: ' <li><a href= ' #{href} ' mce_href= ' #{href} ' ><span>#{label}</span></a   ></li> ' 173.  

When adding a tab dynamically, its label style, #{href}, and #{label} are the parameters used to replace the Add. 174. Initial: $ ('. Selector '). Tabs ({tabtemplate: ' <div><a href= ' #{href} ' mce_href= "#{href}" ><span>#{  

Label}</span></a></div> '});  

175. Get: var tabtemplate = $ ('. Selector '). Tabs (' option ', ' tabtemplate '); 176. Set: $ ('. Selector '). Tabs (' option ', ' tabtemplate ', ' <div><a href= ' #{href} ' mce_href= ' #{hrEF} "><span>#{label}</span></a></div>");   

177.178. 179. Event 180.   Select:tabsselect 181.  

This event is triggered when a label header is clicked.  

182. Initial: $ ('. Selector '). Tabs ({select:function (event, UI) {...}});  

183. Bind: $ ('. Selector '). Bind (' Tabsselect ', function (event, UI) {...}); 184.185.   Load:tabsload 186.  

This event is triggered when the content of a tabbed page is loaded remotely.  

187. Initial: $ ('. Selector '). Tabs ({load:function (event, UI) {...}});  

188. Bind: $ ('. Selector '). Bind (' Tabsload ', function (event, UI) {...}); 189.190.   Show:tabsshow 191.  

This event is triggered when a tab page content is displayed.  

192. Initial: $ ('. Selector '). Tabs ({show:function (event, UI) {...}});  

193. Bind: $ ('. Selector '). Bind (' Tabsshow ', function (event, UI) {...}); 194.195.   Add:tabsadd 196.  

This event is triggered when a tab page is added.  

197. Initial: $ ('. Selector '). Tabs ({add:function (event, UI) {...}});  

198. Bind: $ ('. Selector '). Bind (' Tabsadd ', function (event, UI) {...}); 199.200.   Remove:tabsremove 201.  This event is triggered when a tab page is removed.

202. Initial: $ ('. Selector '). Tabs ({remove:function (event, UI) {...}});  

203. Bind: $ ('. Selector '). Bind (' Tabsremove ', function (event, UI) {...}); 204.205.   Enable:tabsenable 206.  

This event is triggered when a tab page is set to Enabled.  

207. Initial: $ ('. Selector '). Tabs ({enable:function (event, UI) {...}});  

208. Bind: $ ('. Selector '). Bind (' tabsenable ', function (event, UI) {...}); 209.210.   Disable:tabsdisable 211.  

This event is triggered when a tab page is set to disabled.  

212. Initial: $ ('. Selector '). Tabs ({disable:function (event, UI) {...}});  

213. Bind: $ ('. Selector '). Bind (' tabsdisable ', function (event, UI) {...});   

214.215. 216. Property 217.   Destroy 218.  

Destroys a label plug-in object.   

219. Usage:. Tabs (' Destroy ') 220.   221. Disable 222.  

Disables the label plugin.   

223. Usage:. Tabs (' disable ') 224.   225. Enable 226.  

Enable the label plugin.   

227. Usage:. Tabs (' Enable ') 228.   229. Option 230.  

Gets or sets the parameters of the label plug-in.   

231. Usage:. Tabs (' option ', Optionname, [value]) 232.   233. Add 234.  

Add a tab page. 235. Usage:. tABS (' Add ', URL, label, [index]) 236.   237. Remove 238.  

Removes a tab page.   

239. Usage:. Tabs (' Remove ', index) 240.   241. Enable 242.  

Enables a set of tabs.   

243. Usage:. Tabs (' Enable ', index)//index is an array of 244.   245. Disable 246.  

Disables a set of tabs.   

247. Usage:. Tabs (' Disable ', index)//index is an array of 248.   249. Select 250.  

Select a tab page.   

251. Usage:. Tabs (' select ', index) 252.   253. Load 254.  

Reloads the contents of an AJAX tab page.   

255. Usage:. Tabs (' Load ', index) 256.   257. URL 258.  

Change the URL of an AJAX tab page.   

259. Usage:. Tabs (' url ', index, URL) 260.   261. Length 262.  

Gets the number of tab pages.     

263. Usage:. Tabs (' length ') 264.   265. Abort 266.  

Terminates the loading and animation of the tab page in which the AJAX request is being made.   

267. Usage:. Tabs (' abort ') 268.   269. Rotate 270.  

Auto-scroll to display tabs.  

 271. Usage:. Tabs (' Rotate ', MS, [continuing])//The second parameter is the dwell time, and the third parameter is whether to continue execution after the user selects a tab page