Виджет tabs библиотеки jQuery

CSS-стили вкладки

JavaScript код

Разделим весь JavaScript код на две части. В первой части рассмотрим js-код, взаимодействующий и управляющий вкладками. Во второй части – код управления стилями.

JS-код взаимодействия с вкладками

В листинге методу tabs в качестве параметра передается литерал объектов, обернутый в фигурные скобки. Таким образом, описание нескольких объектов можно представить в виде одного JSON-объекта, включающего :

JS-код изменения стиля

Опции управления вкладками

active
определяет активность вкладки. Опция может быть как логической, так и целочисленной :

collapsible
определяет возможность сворачивания всех вкладок. По умолчанию значение false, при котором одна из вкладок должна быть всегда раскрытой. При значении true активная вкладка может быть сернута.

// Создание tabs
$(".tabs").tabs({
    collapsible: true
});

// Getter
let collaps=$(".tabs").tabs("option","collapsible");
 
// Setter
$(".tabs").tabs( "option", "collapsible", true );
 

disabled
блокирование переключения вкладок. По умолчанию значение false, не блокированы.

Поддерживаемые типы :

• Boolean : блокирование или разблокирование всех вкладок;
• Array : массив блокированных вкладок, отсчет от 0. Например, [1,2] заблокирует доступ ко 2-ой и 3-ей вкладкам.

// Создание tabs
$(".tabs").tabs({
    disabled: [1, 2]
});

// Getter
let disabled=$(".tabs").tabs("option","disabled");
 
// Setter
$(".tabs").tabs("option", "disabled", [1, 2]);
 

event
определяет событие реагирования вкладки для переключения. По умолчанию значение click.

// Создание tabs
$(".tabs").tabs({
    event: "mouseover"
});

// Getter
let event=$(".tabs").tabs("option","event");
 
// Setter
$(".tabs").tabs("option", "event", "mouseover");
 

heightStyle
определяет высоту панелей для вкладок. По умолчанию используется "auto". Возможные значения :

• "auto": все панели имеют одинаковый размер, равный максимальной высоте одной из панелей;
• "fill": развернуть на возможную высоту, определенную высотой родительского компонента;
• "content": высота каждой панели определяется её содержимым.

// Создание tabs
$(".tabs").tabs({
    heightStyle: "fill"
});

// Getter
var hs = $(".tabs").tabs("option", "heightStyle");
 
// Setter
$(".tabs").tabs("option", "heightStyle", "fill");
 

hide
определяет возможность анимации и параметры анимации при закрытии деактивируемой панели. Допустимые типы и значения :

• Boolean: при значении false анимация не используется и панель деактивируется мгновенно. При значении true содержимое панели «растворяется» и исчезает со значениями duration и easing по умолчанию.
• Number: содержимое панели «растворяется» со значениями duration=number и easing по умолчанию.
• String: панель деактивируется со специальным эффектом. Значение может cоответствовать либо методу анимации jQuery типа "slideUp", либо имени эффекта jQuery UI, например "fold". В любом случае эффект анимации будет выполняться со значениями duration и easing по умолчанию.
• Object: эффект анимации деактивируемой панели определяется значениями effect, delay, duration и easing. Если свойство effect определяет метод jQuery, то этот метод будет использован. В противном случае предполагается использование эффекта jQuery UI. При использовании эффекта jQuery UI необходимо определить дополнительные значения, включив их в описание объекта. Если свойство effect не определено, то используется "fadeOut". Для свойств duration и easing используются значения по умолчанию, если их описание не включено в объект. Если не указана задержка delay, то деактивация панели будет выполнена без задержки.

// Создание tabs
$(".tabs").tabs({
  hide: {effect: "explode", duration: 1000}
});

// Getter
var hide = $(".tabs").tabs("option", "hide");
 
// Setter
$(".tabs").tabs("option", "hide", 
               {effect: "explode", duration: 1000});
 

show
определяет возможность анимации и параметры анимации при открытии активируемой панели. Допустимые типы и значения :

• Boolean: при значении false анимация не используется и панель активируется мгновенно. При значении true содержимое панели «проявляется» со значениями duration и easing по умолчанию.
• Number: содержимое панели «проявляется» со значениями duration=number и easing по умолчанию.
• String: панель активируется со специальным эффектом. Значение может cоответствовать либо методу анимации jQuery типа "slideDown", либо имени эффекта jQuery UI, например "blind". В любом случае эффект анимации будет выполняться со значениями duration и easing по умолчанию.
• Object: эффект анимации активируемой панели определяется значениями effect, delay, duration и easing. Если свойство effect определяет метод jQuery, то этот метод будет использован. В противном случае предполагается использование эффекта jQuery UI. При использовании эффекта jQuery UI необходимо определить дополнительные значения, включив их в описание объекта. Если свойство effect не определено, то используется "fadeIn". Для свойств duration и easing используются значения по умолчанию, если их описание не включено в объект. Если не указана задержка delay, то активация панели будет выполнена без задержки.

// Создание tabs
$(".tabs").tabs({
  show: {effect: "blind", duration: 1000}
});

// Getter
var show = $(".tabs").tabs("option", "show");
 
// Setter
$(".tabs").tabs("option", "show", 
               {effect: "blind", duration: 1000});
 

Методы управления вкладками

destroy()
полное удаление всей функциональности виджета tabs. В результате выполнения данного метода будет разрушена вся структура интерфейса вкладок.

$(".tabs").tabs("destroy");
 

disable()
блокирование доступа ко всем вкладкам виджета.

// Блокирование доступа
$(".tabs").tabs("disable");
 

disable(idx)
блокирование доступа к одной или нескольким вкладкам виджета. Активная вкладка не может быть деактивирована. Отсчет вкладок от 0. При блокировании доступа к нескольким вкладкам необходимо их определить в виде массива в квадратных скобках. Например, [2, 3].

// Блокирование доступа к 3-й вкладке
$(".tabs").tabs("disable", 2);
 

disable(href)
блокирование доступа к вкладке виджета с идентификатором href.

// Блокирование доступа к вкладке info
$(".tabs").tabs("disable", "#info");
 

enable()
разблокирование доступа ко всем вкладкам виджета.

$(".tabs").tabs("enable");
 

enable(idx)
разблокирование доступа к вкладке виджета с индексом idx. При разблокировании нескольких вкладок необходимо их определить в виде массива в квадратных скобках. Например, [2, 3].

$(".tabs").tabs("enable", 1);
 

enable(href)
разблокирование доступа к вкладке виджета с идентификатором href.

$(".tabs").tabs("enable", "#info");
 

instance()
получение эземпляра класса.

console.log('instance exists : ' + 
           ($(".tabs").tabs("instance") != null));
 

load(idx)
загрузка содержимого панели виджета. Отсчет номера панели от 0.

$(".tabs").tabs("load", 1);
 

load(href)
загрузка содержимого панели виджета с идентификатором href.

$(".tabs").tabs("load", "info"));
 

option(optionName)
чтение опции виджета.

let enabled = $(".tabs").tabs("option","enabled");
 

option()
чтение опций виджета в виде пар значений key/value.

let options = $(".tabs").tabs("option");
 

option(optionName, value)
определение значения опции виджета.

$(".tabs").tabs("option", "disabled", true);
 

option(literal)
определение значений опций виджета согласно описанию литерала объекта.

$(".tabs").tabs("option", {disabled: true});
 

refresh()
обновить виджет после добавления или удаления панелей непосредственно в DOM-структуре и пересчитать высоту панелей виджета согласно значению опции heightStyle.

$(".tabs").tabs("refresh");
 

widget()
получение объекта jQuery, определяющий виджет tabs. В представленном примере блокируется доступ к 3-ей вкладке виджета через объект jQuery :

// Получение виджета tabs в виде объекта jQuery
let widget = $(".tabs").tabs("widget");
// Блокирование доступа к объекту
if (widget != null)
    widget.tabs("disable", 2);
 

События

activate(event, ui)
возникает после активации панели (вкладки). Если используется анимация, то событие возникает после анимации.

• event – стандартные события DOM;
• ui – тип Object :
  • newTab : активируемая вкладка;
  • oldTab : деактивируемая вкладка;
  • newPanel : активируемая панель;
  • oldPanel : деактивируемая панель.

Ниже представлен пример инициализации виджета tabs, у которого будет вызываться callback-функция после активации вкладки :

$(".tabs").tabs({
    activate: function(event, ui) {
        // ...
    }
});
 

beforeActivate(event, ui)
возникает непосредственно перед активацией панели (вкладки).

• event – стандартные события DOM;
• ui – тип Object :
  • newTab : активируемая вкладка;
  • oldTab : деактивируемая вкладка;
  • newPanel : активируемая панель;
  • oldPanel : деактивируемая панель.

Ниже представлен пример инициализации виджета tabs, у которого будет вызываться callback-функция перед активацией вкладки :

$(".tabs").tabs({
    beforeActivate: function(event, ui) {
        // ...
    }
});
 

beforeLoad(event, ui)
возникает перед загрузкой содержимого «удаленного» контента.

• event – стандартные события DOM;
• ui – тип Object :
  • tab : активная вкладка;
  • panel : панель, заполняемая ajax-ответом;
  • jqXHR : объект jqXHR, запрашивающий контент;
  • ajaxSettings : свойства, которые будут использоваться при ajax-запросе контента.

Ниже представлен пример инициализации виджета tabs, у которого будет вызываться callback-функция перед загрузкой содержимого :

$(".tabs").tabs({
    beforeLoad: function(event, ui) {
        // ...
    }
});

 

create(event, ui)
возникает после создания виджета. Если виджет collapsed, то ui.tab и ui.panel будут пустыми jQuery объектами.

• event – стандартные события DOM;
• ui – тип Object :
  • tab : активная вкладка;
  • panel : активная панель.

Ниже представлен пример инициализации tabs, у которого будет вызвана callback-функция после создания виджета :

$(".tabs").tabs({
    create: function(event, ui) {
        // ...
    }
});
 

load(event, ui)
возникает после загрузки «удаленной» вкладки.

• event – стандартные события DOM;
• ui – тип Object :
  • tab : загруженная вкладка;
  • panel : панель, заполненная ajax-ответом.

Ниже представлен пример инициализации tabs, у которого будет вызвана callback-функция после загрузки вкладки :

$(".tabs").tabs({
    load: function(event, ui) {
        // ...
    }
});
 

Связанные страницы