Пример использования

Пример

$(document).ready(function() {

$("#tabs").tabs();
//Код первой вкладки (стандартное использование)
   $("#tab1").tabs();
//Код второй вкладки (удаленные вкладки)
   $("#tab2").tabs({show:function(e,ui){
      if (ui.index!=0){
         $(ui.panel).html("<img id='load' src='tab-load1.gif' />")
      }
   }});
//Код третьей вкладки (сворачивание активной вкладки)
   $("#tab3").tabs({collapsible:true,selected:-1});
//Код четвертой вкладки (открытие при наведении)
   $("#tab4").tabs({event:'mouseover'});

});

Попробовать в редакторе

Определение и использование

С помощью метода tabs Вы можете превратить выбранный элемент в виджет tabs.

Данный виджет (как и виджет accordion) в основном используется для того, чтобы более компактно отобразить содержимое, сэкономив при этом, место на странице.

По умолчанию переключение между вкладками виджета происходит по щелчку мыши, но данное событие может быть изменено на любое другое.

Вкладки виджета могут содержать как локальное (заданное непосредственно в коде страницы), так и удаленное содержимое (находящееся на других страницах). Удаленное содержимое загружается с помощью AJAX запросов.

С помощью опций и событий перечисленных в таблицах далее на данной странице Вы можете настроить поведение данного виджета под конкретные нужды.

Синтаксис

$(селектор).tabs(опции_или_события)

селектор выбирает элемент, который будет превращен в виджет.

опции настраивают дополнительные аспекты поведения виджета.

события события связанные с данным виджетом.

Опции

Опции	Описание
ajaxOption	Позволяет произвести дополнительные настройки AJAX запросов, которые будут совершаться во время загрузки содержимого вкладок. Полный список возможных значений Вы можете посмотреть здесь. Значение по умолчанию: null. Пример использования: .tabs({ajaxOption:{async:false}})
cache	Позволяет указать нужно ли кэшировать удаленное содержимое вкладок. Значение по умолчанию: false. Пример использования: .tabs({cache:true})
collapsible	Позволяет виджету сворачивать активное содержимое (т.е. виджет может быть отображен без единой открытой вкладки). Значение по умолчанию: false. Пример использования: .tabs({collapsible:true})
cookie	Позволяет сохранить последнюю выбранную вкладку в cookie. Значение по умолчанию: null. Пример использования: .tabs({cookie:{expires:20}})
disabled	Позволяет сделать указанные вкладки недоступными (нумерация вкладок начинается с нуля). Значение по умолчанию: []. Пример использования: .tabs({disabled:[2,3]})
event	Задает событие переключающее вкладки. Значение по умолчанию: 'click'. Пример использования: .tabs({event:'dblclick'})
selected	Указывает вкладку, которая будет открыта при инициализации виджета (нумерация вкладок начинается с нуля). Если опция имеет значение -1 при инициализации не будет открыто ни одной вкладки (необходимо также установить collapsible:true). Значение по умолчанию: 0. Пример использования: .tabs({selected:2})

Добавление/удаление вкладок

С помощью метода add Вы можете добавлять в виджет новые вкладки из кода.

Синтаксис

$(селектор).tabs("add",url,заголовок,индекс)

url указывает имя новой вкладки (например #tabs-10) или если это удаленная вкладка url адрес, по которому будет послан AJAX запрос (например https://www.wisdomweb.ru/remtab.txt).

заголовок содержит заголовок новой вкладки.

индекс обозначает местоположение новой вкладки. По умолчанию вкладка помещается в конце.

С помощью метода remove Вы можете удалять вкладки из кода.

Синтаксис

$(селектор).tabs("remove",индекс)

индекс обозначает местоположения вкладки.

События

Все обработчики событий принимают два аргумента - стандартный объект event браузера и специальный объект ui.

Объект ui имеет следующие свойства:

ui.tab - Элемент-ссылка выбранной вкладки.
ui.panel - Элемент который содержит содержимое выбранной вкладки.
ui.index - Местоположение выбранной вкладки (отсчет начинается с 0).

Синтаксис

$(селектор).tabs({событие:function(event,ui){Код обработчика}})
//или
$(селектор).bind("tabsсобытие",function(event,ui){Код обработчика})

Обратите внимание: например для того, чтобы привязать к виджету с id='test' обработчик события create, который выводит сообщение "привет" необходимо будет написать следующий код: $("#test").tabs({create:function(event,ui){alert("Привет")}}).

События	Описание
create	Определяет функцию, код которой будет выполнен, когда виджет будет создан.
select	Определяет функцию, код которой будет выполнен при открытии новой вкладки.
load	Определяет функцию, код которой будет выполнен после загрузки содержимого удаленной вкладки.
show	Определяет функцию, код которой будет выполнен во время появления содержимого вкладки.
add	Определяет функцию, код которой будет выполнен при добавлении новой вкладки.
remove	Определяет функцию, код которой будет выполнен при удалении вкладки.

« Виджеты jQuery UI