♥ § Клуб Одиноких Сердец :: Элемент Табы (Tabs) плагина UI библиотеки jQuery. ♥

Описание: Простая область контента с множеством панелей, каждая из которых связана с заголовком (хидером) в списке.
Description: A single content area with multiple panels, each associated with a header in a list.

Пример странички Таб Дефолтный (по умолчанию, Default functionality):
можно посмотреть здесь.

Пример странички Таб передача контента ажаксом (Content via Ajax):
можно посмотреть здесь.

Пример странички Таб Открытие при наведении мышки (Open on mouseover):
можно посмотреть здесь.

Пример странички Таб Сворачиваемый контент (Collapse content):
можно посмотреть здесь.

Пример странички Таб Сортируемый (Sortable):
можно посмотреть здесь.

Пример странички Таб Манипулируемый (Simple manipulation):
можно посмотреть здесь.

Пример странички Таб Нижний (Tabs below content):
можно посмотреть здесь.

---

Теория

Тесты по теории можно посмотреть здесь.

---

Options (Опции)

---

active
Type: Boolean or Integer
Default: 0

Which panel is currently open.
Какая панель открыта сейчас.

Multiple types supported:
Поддерживаются множественные типы:
• Boolean (Двоичная Логика): Setting active to false will collapse all panels. This requires the collapsible option to be true. Установка опции active (активная) на значение false (ложь) приведен к закрытию всех панелей. Это требует, чтобы опция collapsible (закрытие) была установлена на значение true (истина)
• Integer (Целое Число): The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel. Индекс с базовым значением 0 (ноль) панели, которая активная (открыта). Негативное значение выбирает панель, рассчитывая от последней панели.

Code examples: (Примеры кода: )
Initialize the tabs with the active option specified:
Инициализация Табов с определенной опцией active:



Get or set the active option, after initialization:
Можно получить или установить опцию active после инициализации:

---

collapsible
Type: Boolean
Default: false

When set to true, the active panel can be closed.
Когда опция установлена на значение true (истина), активная панель иожет быть закрыта.

Code examples: (Примеры кода: )
Initialize the tabs with the collapsible option specified:
Инициализация Табов с определенной опцией collapsible:



Get or set the collapsible option, after initialization:
Можно получить или установить опцию collapsible после инициализации:

---

disabled
Type: Boolean or Array
Default: false

Which tabs are disabled.
Какие табы Выключены. Multiple types supported:
Поддерживаются множественные типы:
• Boolean (Двоичная Логика): Enable or disable all tabs. Когда установлена на значение true (истина), все табы Выключены.
• Array (Массив): An array containing the zero-based indexes of the tabs that should be disabled, e.g., [ 0, 2 ] would disable the first and third tab. Массив, содержащий индексы табов с нулевой базой (начальной точкой отчета). Определяет выключенные табы. Например, [ 0, 2 ] выключит первый и третий табы.


Code examples: (Примеры кода: )
Initialize the tabs with the disabled option specified:
Инициализация Спиннера с определенной опцией disabled:



Get or set the disabled option, after initialization:
Можно получить или установить опцию disabled после инициализации:

---

event
Type: String
Default: "click"

The type of event that the tabs should react to in order to activate the tab. To activate on hover, use "mouseover".
Тип события, на который табы должны реагировать с целью активации таба. Для активации по событию hover (касание таба), используйте опцию "mouseover" (касание мышкой).

Code examples: (Примеры кода: )
Initialize the tabs with the event option specified:
Инициализация Табов с определенной опцией collapsible:



Get or set the event option, after initialization:
Можно получить или установить опцию collapsible после инициализации:

---

heightStyle
Type: String
Default: "content"

Controls the height of the tabs widget and each panel. Possible values:
Контролирует высоту виджета табы и каждой панели. Возможные значения:

• "auto" (авто): All panels will be set to the height of the tallest panel. Все панели будут установлены по высоте самой высокой панели. • "fill" (заполнить): Expand to the available height based on the tabs' parent height. Раширяет до возможной высоты, основываясь на высоте родительского элемента табов. • "content" (контент): Each panel will be only as tall as its content. Каждая панель будет высокой, как ее контент.

Code examples: (Примеры кода: )
Initialize the tabs with the heightStyle option specified:
Инициализация Табов с определенной опцией collapsible:



Get or set the heightStyle option, after initialization:
Можно получить или установить опцию collapsible после инициализации:

---

hide
Type: Boolean or Number or String or Object
Default: null

If and how to animate the hiding of the panel.
Определяет, анимировать ли и как анимировать панель при исчезновении.

Multiple types supported:
Поддерживаются множественные типы:
• Boolean (Двоичная Логика): When set to false, no animation will be used and the panel will be hidden immediately. When set to true, the panel will fade out with the default duration and the default easing. Когда установлена на значение false (ложь), никакой анимации и панель будет спрятана немедленно. Когда установлена на значение true (истина), панель будет исчезать с дефолтной продолжительностью и с дефолтным изингом.
• Number (Число): The panel will fade out with the specified duration and the default easing. Панель будет исчезать с заданной продолжительностью и с дефолтным изингом.
• String (Строка): The panel will be hidden using the specified effect. The value can either be the name of a built-in jQuery animation method, such as "slideUp", or the name of a jQuery UI effect, such as "fold". In either case the effect will be used with the default duration and the default easing. Панель будет исчезать с использованием заданного эффекта. Значение опции может быть либо именем встроенного анимационного метода jQuery (жКвери), например "slideUp", либо именем эффекта jQuery UI, например "fold". В любом случае эффект будет использован с дефолтной продолжительностью и с дефолтным изингом.
• Object (Объект): If the value is an object, then effect, duration, and easing properties may be provided. If the effect property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used. If effect is omitted, then "fadeOut" will be used. Если значение является Объектом, тогда он должен содержать как свойства имя эффекта, продолжительность и изинг. Если свойства эффекта содержат имя метода jQuery, тогда этот метод будет использован. Иначе будет считаться, что это имя эффекта jQuery UI. Когда используется эффект jQuery UI, который поддерживает дополнительные сеттинги, вы можете включить эти сеттинги в объект, и они будут переданы эффекту. Если не задается продолжительность изинга, будут использованы дефолтные значения. Если не задается имя эффекта, будет использован "fadeOut".

Code examples: (Примеры кода: )
Initialize the tabs with the hide option specified:
Инициализация табов с определенной опцией hide:



Get or set the hide option, after initialization:
Можно получить или установить опцию hide после инициализации:

---

show
Type: Boolean or Number or String or Object
Default: null

If and how to animate the showing of the panel.
Определяет, анимировать ли и как анимировать панель при показе.

Multiple types supported:
Поддерживаются множественные типы:
• Boolean (Двоичная Логика): When set to false, no animation will be used and the panel will be shown immediately. When set to true, the panel will fade in with the default duration and the default easing. Когда установлена на значение false (ложь), никакой анимации и панель будет показана немедленно. Когда установлена на значение true (истина), панель будет показываться с дефолтной продолжительностью и с дефолтным изингом.
• Number (Число): The panel will fade in with the specified duration and the default easing. Панель будет показываться с заданной продолжительностью и с дефолтным изингом.
• String (Строка): The panel will be shown using the specified effect. The value can either be the name of a built-in jQuery animateion method, such as "slideDown", or the name of a jQuery UI effect, such as "fold". In either case the effect will be used with the default duration and the default easing. Панель будет показана с использованием заданного эффекта. Значение опции может быть либо именем встроенного анимационного метода jQuery (жКвери), например "slideUp", либо именем эффекта jQuery UI, например "fold". В любом случае эффект будет использован с дефолтной продолжительностью и с дефолтным изингом.
• Object (Объект): If the value is an object, then effect, duration, and easing properties may be provided. If the effect property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used. If effect is omitted, then "fadeIn" will be used. Если значение является Объектом, тогда он должен содержать как свойства имя эффекта, продолжительность и изинг. Если свойства эффекта содержат имя метода jQuery, тогда этот метод будет использован. Иначе будет считаться, что это имя эффекта jQuery UI. Когда используется эффект jQuery UI, который поддерживает дополнительные сеттинги, вы можете включить эти сеттинги в объект, и они будут переданы эффекту. Если не задается продолжительность изинга, будут использованы дефолтные значения. Если не задается имя эффекта, будет использован "fadeIn".

Code examples: (Примеры кода: )
Initialize the tabs with the show option specified:
Инициализация табов с определенной опцией show:



Get or set the show option, after initialization:
Можно получить или установить опцию show после инициализации:

---

Methods (Методы)

---

destroy()
Removes the tabs functionality completely. This will return the element back to its pre-init state.
• This method does not accept any arguments.

Полностью удаляет функциональность табов. Возвращает элемент обратно в состояние до инициализации.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the destroy method:
Запуск метода destroy (разрушить):

---

disable()
Disables all tabs.
• This method does not accept any arguments.

Выключает все табы.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):

---

disable( index )
Disables a tab. The selected tab cannot be disabled. To disable more than one tab at once, set the disabled option: $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] ).
Выключает таб. Выбранный таб нельзя выключить. Для выключения более чем одного таба одновременно, установите опцию disabled (выключить): $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] ).

• index
Type: Number or String (Число или Строка)
Which tab to disable. Какой таб выключить.

Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):

---

enable()
Enables all tabs.
• This method does not accept any arguments.

Включает все табы.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):

---

enable( index )
Enables a tab. To enable more than one tab at once reset the disabled property like: $( "#example" ).tabs( "option", "disabled", [] );.
Включает таб. Для включения более чем одного таба одновременно, сбросьте свойство disabled (выключить): $( "#example" ).tabs( "option", "disabled", [] );.

• index
Type: Number or String (Число или Строка)
Which tab to enable. Какой таб включить.

Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):

---

load( index )
Loads the panel content of a remote tab.
Загружает контент панели из удаленного таба.

• index
Type: Number or String (Число или Строка)
Which tab to load. Какой таб загрузить.

Code examples: (Примеры кода: )
Invoke the load method:
Запуск метода load (загрузить):

---

option( optionName )
Returns: Object
Gets the value currently associated with the specified optionName.
Получает значение, связанное с определенным optionName (имя опции).
• optionName
Type: String
The name of the option to get.
Имя опции, для которой получаем значение.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

option()
Returns: PlainObject
Gets an object containing key/value pairs representing the current tabs options hash.
• This method does not accept any arguments.

Получает объект, содержащий пары key/value (ключ/значение), представляющий текущее состояние набора значений табов.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

option( optionName, value )
Sets the value of the tabs option associated with the specified optionName.
Устанавливает значение опции табов, связанное с определенным optionName (именем опции).

• optionName
Type: String
The name of the option to set.
Имя опции для установки.

• value
Type: Object
A value to set for the option.
Значение, которое устанавливается для опции.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

option( options )
Sets one or more options for the tabs.

Устанавливает одну или более опций для табов.

• options
Type: Object
A map of option-value pairs to set.
Карта пар option-value (опция-значение) для установки.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

refresh()
Process any tabs that were added or removed directly in the DOM and recompute the height of the tab panels. Results depend on the content and the heightStyle option.
• This method does not accept any arguments.

Проводит процесс обновления относительно табов, которые были добавлены в ДОМ или удалены из ДОМа и пересчитывает высоту панелей табов. Результат зависит от контента и от опции heightStyle (стиль высоты).
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the refresh method:
Запуск метода refresh:

---

widget()
Returns a jQuery object containing the tabs container.
• This method does not accept any arguments.

Возвращает объект jQuery, содержащий контейнер с табами.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:

---

Events (События)

---

activate( event, ui )
Type: tabsactivate

Triggered after a tab has been activated (after animation completes). If the tabs were previously collapsed, ui.oldTab and ui.oldPanel will be empty jQuery objects. If the tabs are collapsing, ui.newTab and ui.newPanel will be empty jQuery objects.

• event
Type: Event

• ui
Type: Object

◦ newTab
Type: jQuery
The tab that was just activated.

◦ oldTab
Type: jQuery
The tab that was just deactivated.

◦ newPanel
Type: jQuery
The panel that was just activated.

◦ oldPanel
Type: jQuery
The panel that was just deactivated.

Code examples: (Примеры кода: )
Initialize the tabs with the activate callback specified:

Bind an event listener to the tabsactivate event:

---

beforeActivate( event, ui )
Type: tabsbeforeactivate

Triggered directly after a tab is activated. Can be canceled to prevent the tab from activating. If the tabs are currently collapsed, ui.oldTab and ui.oldPanel will be empty jQuery objects. If the tabs are collapsing, ui.newTab and ui.newPanel will be empty jQuery objects.

• event
Type: Event

• ui
Type: Object

◦ newTab
Type: jQuery
The tab that is about to be activated.

◦ oldTab
Type: jQuery
The tab that is about to be deactivated.

◦ newPanel
Type: jQuery
The panel that is about to be activated.

◦ oldPanel
Type: jQuery
The panel that is about to be deactivated.

Code examples: (Примеры кода: )
Initialize the tabs with the beforeActivate callback specified:

Bind an event listener to the tabsbeforeactivate event:

---

beforeLoad( event, ui )
Type: tabsbeforeload

Triggered when a remote tab is about to be loaded, after the beforeActivate event. Can be canceled to prevent the tab panel from loading content; though the panel will still be activated. This event is triggered just before the Ajax request is made, so modifications can be made to ui.jqXHR and ui.ajaxSettings.

• event
Type: Event

• ui
Type: Object

◦ tab
Type: jQuery
The tab that is being loaded.

◦ panel
Type: jQuery
The panel which will be populated by the Ajax response.

◦ jqXHR
Type: jqXHR
The jqXHR object that is requesting the content.

◦ ajaxSettings
Type: Object
The settings that will be used by jQuery.ajax to request the content.

Code examples: (Примеры кода: )
Initialize the tabs with the beforeLoad callback specified:

Bind an event listener to the tabsbeforeload event:

---

create( event, ui )
Type: tabscreate

Triggered when the tabs are created. If the tabs are collapsed, ui.tab and ui.panel will be empty jQuery objects.

• event
Type: Event

• ui
Type: Object

◦ tab
Type: jQuery
The active tab.

◦ panel
Type: jQuery
The active panel.

Code examples: (Примеры кода: )
Initialize the tabs with the create callback specified:

Bind an event listener to the tabscreate event:

---

load( event, ui )
Type: tabsload

Triggered after a remote tab has been loaded.

• event
Type: Event

• ui
Type: Object

◦ tab
Type: jQuery
The tab that was just loaded.

◦ panel
Type: jQuery
The panel which was just populated by the Ajax response.

Code examples: (Примеры кода: )
Initialize the tabs with the load callback specified:

Bind an event listener to the tabsload event:

---

Overview (Обзор)
Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.

The content for each tab panel can be defined in-page or can be loaded via Ajax; both are handled automatically based on the href of the anchor associated with the tab. By default tabs are activated on click, but the events can be changed to hover via the event option.

Табы обычно используются для разбивки контента в несколько разделов, которые открываются по одному для экономии места на экране. Это делает табы похожими на аккордион (accordion).

Контент для каждой панели таба может быть определен прямо на странице или может быть загружен удаленно по технологии Аджакс (Ajax). Оба способа управляются автоматически на основе якоря href, связанного с табом. По умолчанию табы активируются по клику, но эти события могут быть изменены с помощью опции event (событие) по касанию мыши (hover).

---

Keyboard interaction (Клавиши Клавиатуры)
When focus is on a tab, the following key commands are available:

• UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.
• DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.
• HOME: Move focus to the first tab. Activate focused tab after a short delay.
• END: Move focus to the last tab. Activate focused tab after a short delay.
• SPACE: Activate panel associated with focused tab.
• ENTER: Activate or toggle panel associated with focused tab.
• ALT+PAGE UP: Move focus to the previous tab and immediately activate.
• ALT+PAGE DOWN: Move focus to the next tab and immediately activate.

When focus is in a panel, the following key commands are available:

• CTRL+UP: Move focus to associated tab.
• ALT+PAGE UP: Move focus to the previous tab and immediately activate.
• ALT+PAGE DOWN: Move focus to the next tab and immediately activate.

Когда фокус на табе, с клавиатуры возможны следующие команды:

• UP/LEFT (ВЕРХ/ЛЕВО): Перемещает фокус на предыдущий таб. Если на первом табе, двигает фокус на последний таб. Активирует сфокусированный таб после короткой задержки.
• DOWN/RIGHT (ВНИЗ/ПРАВО): Перемещает фокус на следующий таб. Если на последнем табе, двигает фокус на первый таб. Активирует сфокусированный таб после короткой задержки.
• HOME (ДОМОЙ): Перемещает фокус на первый таб. Активирует сфокусированный таб после короткой задержки.
• END (КОНЕЦ): Перемещает фокус на последний таб. Активирует сфокусированный таб после короткой задержки.
• SPACE (ПРОБЕЛ): Активирует панель, связанную с фокусированным табом.
• ENTER (ВВОД): Активирует или деактивирует панель, связанную с фокусированным табом.
• ALT+PAGE UP (альт+PAGE UP): Перемещает фокус на предыдущий таб и немедленно активирует.
• ALT+PAGE DOWN (альт+PAGE DOWN): Перемещает фокус на следующий таб и немедленно активирует.

Когда фокус на панели, с клавиатуры возможны следующие команды:

• CTRL+UP: Перемещает фокус на связанный таб.
• ALT+PAGE UP: Перемещает фокус на предыдущий таб и немедленно активирует.
• ALT+PAGE DOWN: Перемещает фокус на следующий таб и немедленно активирует.

---

Additional Notes (Дополнительная информация)
• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
• Этот виджет требует определенных стилей CSS, иначе он не будет работать. Если вы используете адаптированную схему, оттолкитесь в своей разработке от специализированного файла CSS.

---

Example:

---

Example: A simple jQuery UI Tabs.
Этот пример можно посмотреть здесь.

---

Примеры табов на этом сайте: Дефолтный, Ажакс, Быстрооткрываемый, Сворачиваемый, Сортируемый, Манипулируемый, Нижний.

---