Виджет вкладок

classes

{
  "ui-tabs": "ui-corner-all",
  "ui-tabs-nav": "ui-corner-all",
  "ui-tabs-tab": "ui-corner-top",
  "ui-tabs-panel": "ui-corner-bottom"
}

$( ".selector" ).tabs({
  classes: {
    "ui-tabs": "highlight"
  }
});

// Getter
var themeClass = $( ".selector" ).tabs( "option", "classes.ui-tabs" );
 
// Setter
$( ".selector" ).tabs( "option", "classes.ui-tabs", "highlight" );

collapsible

Инициализация вкладок с указанным параметром collapsible:

$( ".selector" ).tabs({
  collapsible: true
});

Получение или установка параметра collapsible после инициализации:

// Getter
var collapsible = $( ".selector" ).tabs( "option", "collapsible" );
 
// Setter
$( ".selector" ).tabs( "option", "collapsible", true );

disabled

• Boolean: Включить или отключить все вкладки.
• Array: Массив, содержащий номера (с нуля) вкладок, которые должны быть отключены, например, [ 0, 2 ] отключит первую и третью вкладку.

Инициализация вкладок с указанным параметром disabled:

$( ".selector" ).tabs({
  disabled: [ 0, 2 ]
});

Получение или установка параметра disabled после инициализации:

// Getter
var disabled = $( ".selector" ).tabs( "option", "disabled" );
 
// Setter
$( ".selector" ).tabs( "option", "disabled", [ 0, 2 ] );

event

Инициализация вкладок с указанным параметром event:

$( ".selector" ).tabs({
  event: "mouseover"
});

Получение или установка параметра event после инициализации:

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

heightStyle

Инициализация вкладок с указанным параметром heightStyle:

$( ".selector" ).tabs({
  heightStyle: "fill"
});

Получение или установка параметра heightStyle после инициализации:

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

hide

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

Инициализация вкладок с указанным параметром hide:

$( ".selector" ).tabs({
  hide: { effect: "explode", duration: 1000 }
});

Получение или установка параметра hide после инициализации:

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

show

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

Инициализация вкладок с указанным параметром show:

$( ".selector" ).tabs({
  show: { effect: "blind", duration: 800 }
});

Получение или установка параметра show после инициализации:

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

beforeActivate( event, ui )Тип: tabsbeforeactivate

• event
  Тип: Event
• ui
  Тип: Объект
  • newTab
    Тип: jQuery
    Вкладка, которая собирается активироваться.
  • oldTab
    Тип: jQuery
    Вкладка, которая собирается деактивироваться.
  • newPanel
    Тип: jQuery
    Панель, которая собирается активироваться.
  • oldPanel
    Тип: jQuery
    Панель, которая собирается деактивироваться.

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

$( ".selector" ).on( "tabsbeforeactivate", function( event, ui ) {} );

beforeLoad( event, ui )Тип: tabsbeforeload

• event
  Тип: Event
• ui
  Тип: Объект
  • tab
    Тип: jQuery
    Вкладка, которая загружается.
  • panel
    Тип: jQuery
    Панель, которая будет заполнена ответом Ajax.
  • jqXHR
    Тип: jqXHR
    Объект jqXHR который запрашивает содержимое.
  • ajaxSettings
    Тип: Объект
    Свойства, которые будут использованы jQuery.ajax для запроса содержимого.

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

$( ".selector" ).on( "tabsbeforeload", function( event, ui ) {} );

create( event, ui )Тип: tabscreate

• event
  Тип: Event
• ui
  Тип: Объект
  • tab
    Тип: jQuery
    Активная вкладка.
  • panel
    Тип: jQuery
    Активная панель.

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

$( ".selector" ).on( "tabscreate", function( event, ui ) {} );

load( event, ui )Тип: tabsload

• event
  Тип: Event
• ui
  Тип: Объект
  • tab
    Тип: jQuery
    Вкладка, которая только что была загружена.
  • panel
    Тип: jQuery
    Панель, которая только что была заполнена ответом Ajax.

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

$( ".selector" ).on( "tabsload", function( event, ui ) {} );