JqueryUI — Вкладки

Метод $ (селектор, контекст) .tabs (опции)

Метод tabs (options) объявляет, что HTML-элемент и его содержимое должны управляться как вкладки. Параметр options — это объект, который определяет внешний вид и поведение вкладок.

Синтаксис

$(selector, context).tabs (options);

Вы можете предоставить один или несколько параметров одновременно, используя объект JavaScript. Если нужно указать несколько параметров, разделите их запятой следующим образом:

$(selector, context).tabs({option1: value1, option2: value2..... });

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом —

$( ".selector" ).tabs (
   { active: 1 }
);

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

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

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

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

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

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

Эта опция указывает текущую активную вкладку / панель. По умолчанию его значение равно 0 .

Опция — активная

Эта опция указывает текущую активную вкладку / панель. По умолчанию его значение равно 0 .

Это может быть типа —

Boolean — при значении false свернут все панели. Это требует, чтобы свернутая опция была истинной .

Целое число —

Синтаксис

Эта опция установлена ​​в true , она позволяет отменять выбор вкладок. При значении false (по умолчанию) нажатие на выбранную вкладку не отменяет выбор (оно остается выбранным). По умолчанию его значение равно false .

Вариант — разборный

Эта опция установлена ​​в true , она позволяет отменять выбор вкладок. При значении false (по умолчанию) нажатие на выбранную вкладку не отменяет выбор (оно остается выбранным). По умолчанию его значение равно false .

Синтаксис

Эта опция использует массив для указания вкладок индекса, которые отключены (и поэтому не могут быть выбраны). Например, используйте [0, 1], чтобы отключить первые две вкладки. По умолчанию его значение равно false .

Опция — отключена

Эта опция использует массив для указания вкладок индекса, которые отключены (и поэтому не могут быть выбраны). Например, используйте [0, 1], чтобы отключить первые две вкладки. По умолчанию его значение равно false .

Это может быть типа —

Boolean — Включить или отключить все вкладки.

Array — Массив, содержащий нулевые индексы вкладок, которые следует отключить, например, [0, 2] отключит первую и третью вкладки.

Синтаксис

Эта опция является именем события, которое позволяет пользователям выбрать новую вкладку. Если, например, эта опция установлена ​​на «наведение мыши», то при наведении мыши на вкладку она будет выделена. По умолчанию его значение «клик» .

Вариант — событие

Эта опция является именем события, которое позволяет пользователям выбрать новую вкладку. Если, например, эта опция установлена ​​на «наведение мыши», то при наведении мыши на вкладку она будет выделена. По умолчанию его значение «клик» .

Синтаксис

Эта опция контролирует высоту виджета вкладок и каждой панели. По умолчанию его значением является «контент» .

Опция — heightStyle

Эта опция контролирует высоту виджета вкладок и каждой панели. По умолчанию его значением является «контент» .

Возможные значения —

auto — Все панели будут установлены на высоту самой высокой панели.

fill — Расширить до доступной высоты на основе родительской высоты вкладок.

содержимое — каждая панель будет иметь такой же высокий размер, как и ее содержимое.

Синтаксис

Эта опция указывает, как анимировать скрытие панели. По умолчанию его значение равно нулю .

Вариант — скрыть

Эта опция указывает, как анимировать скрытие панели. По умолчанию его значение равно нулю .

Это может быть типа —

Boolean — при значении false анимация не будет использоваться, и панель будет сразу же скрыта.

Число — панель будет исчезать с указанной продолжительностью и ослаблением по умолчанию.

String — Панель будет скрыта с использованием указанного эффекта. Значение может быть slideUp или fold

Объект — для этого типа могут быть предусмотрены свойства, задержка , длительность и ослабление .

Синтаксис

Эта опция указывает, как анимировать показ панели. По умолчанию его значение равно нулю .

Вариант — показать

Эта опция указывает, как анимировать показ панели. По умолчанию его значение равно нулю .

Это может быть типа —

Boolean — При значении false анимация не будет использоваться, и панель будет отображаться немедленно.

Число — панель будет исчезать с указанной продолжительностью и ослаблением по умолчанию.

String — Панель будет отображаться с использованием указанного эффекта. Значение может быть slideUp или fold .

Объект — для этого типа могут быть предусмотрены свойства, задержка , длительность и ослабление .

Синтаксис

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

Функциональность по умолчанию

В следующем примере демонстрируется простой пример функциональности вкладок без передачи параметров методу tabs () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
         " rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#tabs-1" ).tabs();
         });
      </script>
		
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-1">
         <ul>
            <li><a href = "#tabs-2">Tab 1</a></li>
            <li><a href = "#tabs-3">Tab 2</a></li>
            <li><a href = "#tabs-4">Tab 3</a></li>
         </ul>
         <div id = "tabs-2">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor sit 
               amet, consectetur, adipisci velit... 
            </p>
         </div>
         <div id = "tabs-3">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-4">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле tabsexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере, нажмите на вкладки, чтобы переключаться между контентом.

Использование heightStyle, складной и скрыть

В следующем примере демонстрируется использование трех опций (a) heightStyle (b) разборный и (c) скрытие в функции вкладок JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-5" ).tabs({
               heightStyle:"fill",
               collapsible:true,
               hide:"slideUp"
            });
         });
      </script>
		
      <style>
         #tabs-5{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-5">
         <ul>
            <li><a href = "#tabs-6">Tab 1</a></li>
            <li><a href = "#tabs-7">Tab 2</a></li>
            <li><a href = "#tabs-8">Tab 3</a></li>
         </ul>
         <div id = "tabs-6">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-8">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле tabsexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Нажмите на выбранную вкладку, чтобы переключить ее содержимое на закрытое / открытое. Вы также можете увидеть анимационный эффект «slideUp», когда вкладка закрыта.

Использование события

В следующем примере демонстрируется использование события трех опций в функции вкладок JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel="stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>
		
      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-9">
         <ul>
            <li><a href = "#tabs-10">Tab 1</a></li>
            <li><a href = "#tabs-11">Tab 2</a></li>
            <li><a href = "#tabs-12">Tab 3</a></li>
         </ul> 
         <div id = "tabs-10">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit... </p>
         </div>
         <div id = "tabs-11">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-12">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле tabsexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В приведенном выше примере переключение разделов, открытых / закрытых с помощью мыши над вкладками.

Метод $ (селектор, контекст) .tabs («действие», params)

Метод tabs («action», params) позволяет выполнять действие над вкладками (с помощью программы JavaScript), выбирать, отключать, добавлять или удалять вкладки. Действие указывается в виде строки в первом аргументе (например, «добавить», чтобы добавить новую вкладку). Проверьте действия, которые можно передать, в следующей таблице.

Синтаксис

$(selector, context).tabs ("action", params);;

В следующей таблице перечислены различные действия, которые можно использовать с этим методом —

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

$( ".selector" ).tabs("disable");

$( ".selector" ).tabs( "disable", 1 );

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

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

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

var isDisabled = $( ".selector" ).tabs( "option", "disabled" );

$( ".selector" ).tabs("option");

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

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

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

var widget = $( ".selector" ).tabs( "widget" );

Это действие полностью уничтожает функциональность вкладок элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов.

Действие — уничтожить

Это действие полностью уничтожает функциональность вкладок элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов.

Синтаксис

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

Действие — отключить

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

Синтаксис

Это действие отключает указанную вкладку. Где индекс — это вкладка, которую нужно отключить.

Действие — отключить (индекс)

Это действие отключает указанную вкладку. Где индекс — это вкладка, которую нужно отключить. Чтобы отключить более одной вкладки одновременно, установите отключенную опцию: $ («#tabs») .tabs («опция», «отключено», [1, 2, 3]).

Синтаксис

Это действие активирует все вкладки. Эта подпись не принимает никаких аргументов.

Действие — включить

Это действие активирует все вкладки. Эта подпись не принимает никаких аргументов.

Синтаксис

Это действие активирует указанную вкладку. Где индекс — это вкладка, которая должна быть включена.

Действие — включить (индекс)

Это действие активирует указанную вкладку. Где индекс — это вкладка, которую нужно включить. Чтобы включить более одной вкладки одновременно, сбросьте отключенное свойство, например: $ («#example») .tabs («option», «disabled», []) ;.

Синтаксис

Это действие вызывает перезагрузку индексированной вкладки, игнорируя кеш. Где индекс — вкладка для загрузки.

Действие — нагрузка (индекс)

Это действие вызывает перезагрузку индексированной вкладки, игнорируя кеш. Где индекс — вкладка для загрузки.

Синтаксис

Это действие возвращает значение, связанное с указанным параметром optionName .

Действие — опция (optionName)

Это действие возвращает значение, связанное с указанным параметром optionName .

Синтаксис

Это действие получает объект, содержащий пары ключ / значение, представляющие хэш текущих параметров вкладок.

Действие — опция

Это действие получает объект, содержащий пары ключ / значение, представляющие хэш текущих параметров вкладок. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие устанавливает значение параметра вкладок, связанного с указанным параметром optionName . Аргумент optionName — это имя опции, которую нужно установить, а значение — это значение, которое нужно установить для опции.

Действие — опция (optionName, value)

Это действие устанавливает значение параметра вкладок, связанного с указанным параметром optionName . Аргумент optionName — это имя опции, которую нужно установить, а значение — это значение, которое нужно установить для опции.

Синтаксис

Это действие устанавливает один или несколько параметров для вкладок.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для вкладок.

Синтаксис

Это действие пересчитывает высоту панелей вкладок, когда любые вкладки были добавлены или удалены непосредственно в DOM. Результаты зависят от содержимого и параметра heightStyle .

Действие — обновить

Это действие пересчитывает высоту панелей вкладок, когда любые вкладки были добавлены или удалены непосредственно в DOM. Результаты зависят от содержимого и параметра heightStyle .

Синтаксис

Это действие возвращает элемент, служащий виджетом вкладок, помеченный именем класса ui-tabs .

Действие — виджет

Это действие возвращает элемент, служащий виджетом вкладок, помеченный именем класса ui-tabs .

Синтаксис

Использование действия Disable ()

Теперь давайте посмотрим на пример, используя действия из таблицы выше. В следующем примере демонстрируется использование метода disable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-13" ).tabs();
            $( "#tabs-13" ).tabs("disable");
         });
      </script>
		
      <style>
         #tabs-13{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-13">
         <ul>
            <li><a href = "#tabs-14">Tab 1</a></li>
            <li><a href = "#tabs-15">Tab 2</a></li>
            <li><a href = "#tabs-16">Tab 3</a></li>
         </ul>
         <div id = "tabs-14">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-15">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-16">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле tabsexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

Здесь вы можете увидеть все вкладки отключены.

Использование действия Disable (индекс)

Теперь давайте посмотрим на пример, используя действия из таблицы выше. В следующем примере демонстрируется использование метода disable (index) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-17" ).tabs();
            $( "#tabs-17" ).tabs("disable",2);
         });
      </script>
		
      <style>
         #tabs-17{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-17">
         <ul>
            <li><a href = "#tabs-18">Tab 1</a></li>
            <li><a href = "#tabs-19">Tab 2</a></li>
            <li><a href = "#tabs-20">Tab 3</a></li>
         </ul>
         <div id = "tabs-18">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-19">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-20">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле tabsexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод:

В приведенном выше примере вы заметили, что вкладка 3 отключена.

Управление событиями на вкладках элементов

В дополнение к методу tabs (options), который мы видели в предыдущих разделах, JqueryUI предоставляет методы события, которые запускаются для определенного события. Эти методы событий перечислены ниже —

$( ".selector" ).slider({
   activate: function( event, ui ) {}
});

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

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

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

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

Это событие вызывается после активации вкладки (после завершения анимации).

Событие — активировать (событие, пользовательский интерфейс)

Это событие вызывается после активации вкладки (после завершения анимации). Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

newTab — вкладка, которая была только что активирована.

oldTab — вкладка, которая была только что деактивирована.

newPanel — Панель, которая была только что активирована.

oldPanel — Панель, которая была только что деактивирована.

Синтаксис

Это событие вызывается до того, как вкладка была активирована.

Событие — beforeActivate (событие, пользовательский интерфейс)

Это событие вызывается до того, как вкладка была активирована. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

newTab — вкладка, которая должна быть активирована.

oldTab — вкладка, которая должна быть деактивирована.

newPanel — Панель должна быть активирована.

oldPanel — Панель собирается быть деактивирована.

Синтаксис

Это событие срабатывает, когда загружается удаленная вкладка после события beforeActivate . Это событие вызывается непосредственно перед выполнением запроса Ajax.

Событие — beforeLoad (событие, пользовательский интерфейс)

Это событие срабатывает, когда загружается удаленная вкладка после события beforeActivate . Это событие вызывается непосредственно перед выполнением запроса Ajax. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

вкладка — вкладка, которая загружается.

панель — панель, которая будет заполнена ответом Ajax.

jqXHR — объект jqXHR , запрашивающий содержимое.

ajaxSettings — настройки, которые будут использоваться jQuery.ajax для запроса содержимого.

Синтаксис

Это событие срабатывает при создании вкладок.

Событие — создать (событие, пользовательский интерфейс)

Это событие срабатывает при создании вкладок. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

Вкладка — активная вкладка.

панель — активная панель.

Синтаксис

Это событие вызывается после загрузки удаленной вкладки.

Событие — загрузка (событие, пользовательский интерфейс)

Это событие вызывается после загрузки удаленной вкладки. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

tab — вкладка, которая была только что загружена.

панель — панель, которая была просто заполнена ответом Ajax.

Синтаксис

пример

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-21" ).tabs({
               activate: function( event, ui ) {
                  var result = $( "#result-2" ).empty();
                  result.append( "activated" );
               },
               create: function( event, ui ) {
                  var result = $( "#result-1" ).empty();
                  result.append( "created" );
               }
            });
         });
      </script>
		
      <style>
         #tabs-21{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-21">
         <ul>
            <li><a href = "#tabs-22">Tab 1</a></li>
            <li><a href = "#tabs-23">Tab 2</a></li>
            <li><a href = "#tabs-24">Tab 3</a></li>
         </ul>
         <div id = "tabs-22">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-23">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>   
         </div>
         <div id = "tabs-24">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
               enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div><br>
      
      <span class = "resultarea" id = result-1></span><br>
      <span class = "resultarea" id = result-2></span>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле tabsexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод:

Нажмите на вкладки, чтобы увидеть распечатанное ниже сообщение о конкретных событиях.