📅 最后修改于: 2020-11-27 02:04:32 🧑 作者: Mango
选项卡是一组逻辑分组的内容，可帮助用户在它们之间进行切换。制表符像手风琴一样节省空间。
每个标签都必须使用以下标记集才能正常工作。
jQuery UI tabs()方法用于更改页面内HTML元素的外观。此方法遍历HTML代码，并向该元素添加新的CSS类以为其提供适当的样式。
句法：
您可以通过两种形式使用tabs()方法：
$(selector, context).tabs (options) Method
$(selector, context).tabs ("action", params) Method
选项卡(选项)方法指定应将HTML元素及其内容作为选项卡进行管理。这里的“选项”参数是一个对象，它指定选项卡的外观和行为。
句法：
$(selector, context).tabs (options);
您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示：
$(selector, context).tabs({option1: value1, option2: value2..... });
以下是可用于此方法的选项列表：
| Option | Description |
|---|---|
| active | This option indicates the current active tab/panel. By default its value is 0. |
| collapsible | If you set this option to TRUE, it allows tabs to be deselected. When it is set to false (the default), clicking on a selected tab does not deselect (it remains selected). By default its value is false. |
| disabled | This option uses an array to indicate index tabs that are disabled (and therefore cannot be selected). for example, use [0, 1] to disable the first two tabs. By default its value is false. |
| event | This option is a name of the event that lets users select a new tab. If, for example, this option is set to “mouseover”, passing the mouse over a tab will select it. By default its value is “click”. |
| heightStyle | This option controls the height of the tabs widget. By default its value is “content”. |
| hide | This option specifies how to animate hiding of panel. By default its value is null. |
| show | This option specifies how to animate showing of panel. By default its value is NULL. |
让我们以一个简单的示例来演示tab的功能，不向tabs()方法传递任何参数。
jQuery UI Tabs functionality
Twinkle, twinkle, little star,
How I wonder what you are.
Up above the world so high,
Like a diamond in the sky.
Twinkle, twinkle, little star,
How I wonder what you are!
Man said to God --- Why did you make women so beautiful?
God said to man --- So that you will love them.
Man said to God --- But why did you make them so dumb?
God said to man --- So that they will love you.
" The whole secret of existence is to have no fear."
Buddha
使用heightStyle，可折叠和隐藏：
让我们以一个示例来演示heightUI选项的用法，可折叠和隐藏在jQueryUI的tabs函数中。
jQuery UI Tabs functionality
Twinkle, twinkle, little star,
How I wonder what you are.
Up above the world so high,
Like a diamond in the sky.
Twinkle, twinkle, little star,
How I wonder what you are!
Man said to God --- Why did you make women so beautiful?
God said to man --- So that you will love them.
Man said to God --- But why did you make them so dumb?
God said to man --- So that they will love you.
" The whole secret of existence is to have no fear."
Buddha
事件的使用：
让我们以一个示例来演示jQueryUI的tab函数中选项事件的用法。
jQuery UI Tabs functionality
Twinkle, twinkle, little star,
How I wonder what you are.
Up above the world so high,
Like a diamond in the sky.
Twinkle, twinkle, little star,
How I wonder what you are!
Man said to God --- Why did you make women so beautiful?
God said to man --- So that you will love them.
Man said to God --- But why did you make them so dumb?
God said to man --- So that they will love you.
" The whole secret of existence is to have no fear."
Buddha
选项卡(“操作”，参数)方法允许选项卡上的操作(通过JavaScript程序)选择，禁用，添加或删除选项卡。在这里，“操作”被指定为第一个参数中的字符串(例如，“添加”以添加新标签)。
句法：
$(selector, context).tabs ("action", params);
以下是可与该方法一起使用的不同操作的列表。
| Action | Description |
|---|---|
| destroy | This action destroys the tabs functionality of an element completely and makes elements return to their pre-init state. This method does not accept any arguments. |
| disable | This action disables all tabs. This method does not accept any arguments. |
| disable( index ) | This action is used to disable the specified tab. Here index is the tab to be disabled. |
| enable | This action activates all the tabs. This signature does not accept any arguments. |
| enable( index ) | This action activates a specified tab. Here index is the tab to be enabled. |
| load( index ) | This action forces a reload of the indexed tab, ignoring the cache. Here index is the tab to load. |
| option( optionName ) | This action gets the value currently associated with the specified optionName. |
| option | This action gets an object containing key/value pairs representing the current tabs options hash. |
| option( optionName, value ) | This action sets the value of the tabs option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value of the option to be set. |
| option( Options ) | This action sets one or more options to the tabs. |
| refresh | This action re-computes the height of the tab panels when any tabs that were added or removed directly in the DOM. Its result depends on the content and the heightStyle option. |
| widget | This action returns the element serving as the tabs widget, annotated with the UI-tabs class name. |
动作diable()的使用：
让我们举个例子来看一下action disable()方法的用法。
jQuery UI Tabs functionality
Twinkle, twinkle, little star,
How I wonder what you are.
Up above the world so high,
Like a diamond in the sky.
Twinkle, twinkle, little star,
How I wonder what you are!
Man said to God --- Why did you make women so beautiful?
God said to man --- So that you will love them.
Man said to God --- But why did you make them so dumb?
God said to man --- So that they will love you.
" The whole secret of existence is to have no fear."
Buddha