JqueryUI — Аккордеон

Accordion Widget в jQueryUI — это расширяемый и складной держатель контента на основе jQuery, который разбит на части и, вероятно, выглядит как вкладки. jQueryUI предоставляет метод accordion () для достижения этой цели.

Синтаксис

Метод accordion () можно использовать в двух формах:

• Метод $ (селектор, контекст) .accordion (параметры)

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

Метод $ (селектор, контекст) .accordion (параметры)

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

Метод $ (селектор, контекст) .accordion (параметры)

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

Синтаксис

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

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

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

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

$( ".selector" ).accordion(
   { active: 2 }
);

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);

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

$( ".selector" ).accordion(
   { disabled: true }
);

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

$( ".selector" ).accordion(
   { header: "h3" }
);

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

$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

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

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

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

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

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

Целое число — Начинающийся с нуля индекс активной (открытой) панели. Отрицательное значение выбирает панели, идущие назад от последней панели.

Синтаксис

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

Вариант — одушевленный

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

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

Boolean — значение false отключит анимацию.

Число — это продолжительность в миллисекундах

String — Имя упрощения для использования с продолжительностью по умолчанию.

Объект — настройки анимации со свойствами замедления и длительности.

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

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

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

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

Синтаксис

Эта опция указывает селектор или элемент для переопределения шаблона по умолчанию для идентификации элементов заголовка. По умолчанию его значение > li>: first-child,>: not (li): even .

Опция — заголовок

Эта опция указывает селектор или элемент для переопределения шаблона по умолчанию для идентификации элементов заголовка. По умолчанию его значение > li>: first-child,>: not (li): even .

Синтаксис

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

Опция — heightStyle

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

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

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

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

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

Синтаксис

Этот параметр представляет собой объект, который определяет значки, используемые слева от текста заголовка для открытых и закрытых панелей. Значок, используемый для закрытых панелей, указывается как свойство с именем header , тогда как значок для использования с открытыми панелями указывается в качестве свойства headerSelected . По умолчанию его значение равно {«header»: «ui-icon-triangle-1-e», «activeHeader»: «ui-icon-triangle-1-s»} .

Вариант — иконки

Этот параметр представляет собой объект, который определяет значки, используемые слева от текста заголовка для открытых и закрытых панелей. Значок, используемый для закрытых панелей, указывается как свойство с именем header , тогда как значок для использования с открытыми панелями указывается в качестве свойства headerSelected . По умолчанию его значение равно {«header»: «ui-icon-triangle-1-e», «activeHeader»: «ui-icon-triangle-1-s»} .

Синтаксис

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

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </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() {
            $( "#accordion-1" ).accordion();
         });
      </script>
      
      <style>
         #accordion-1{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-1">
         <h3>Tab 1</h3>
         <div>
            <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>
         <h3>Tab 2</h3>
         <div>
            <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>
         <h3>Tab 3</h3>
         <div>
            <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-файле accordionexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Щелкните заголовки (вкладка 1, вкладка 2, вкладка 3), чтобы развернуть / свернуть содержимое, разбитое на логические разделы, как вкладки.

Использование разборного

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </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() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>
      
      <style>
         #accordion-2{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-2">
         <h3>Tab 1</h3>
         <div>
            <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>
         <h3>Tab 2</h3>
         <div>
            <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>
         <h3>Tab 3</h3>
         <div>
            <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>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
   </body>
</html>

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

Здесь мы установили разборное значение true . Нажмите на заголовок аккордеона, это позволяет свернуть активный раздел.

Использование heightStyle

В следующем примере демонстрируется использование трех опций heightStyle в виджете гармошки JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </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() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>
      
      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <h3>Height style-content</h3>
      <div style = "height:250px">
         <div id = "accordion-3">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. 
               </p>
            </div>
         </div>
      </div><br><br>
      
      <h3>Height style-Fill</h3>
      <div style = "height:250px">
         <div id = "accordion-4">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua. 
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

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

Здесь у нас есть два аккордеона, первый из которых имеет параметр heightStyle, установленный на контент , который позволяет панелям аккордеона сохранять свою собственную высоту. Второй аккордеон имеет параметр heightStyle, установленный для заполнения , скрипт автоматически установит размеры аккордеона на высоту его родительского контейнера.

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

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

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

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

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

var options = $( ".selector" ).accordion( "option" );

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

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

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </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() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>
      
      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-5">
         <h3>Tab 1</h3>
            <div>
               <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>
            <h3>Tab 2</h3>
            <div>
               <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>
            <h3>Tab 3</h3>
            <div>
               <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>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
               </ul>
            </div>
         </div>
         <div style = "margin-top:30px">
            <input type = "radio" name = "disable" id = "disableaccordion"  
               value = "disable">Disable accordion
            <input type = "radio" name = "disable" id = "enableaccordion" checked 
               value = "enable">Enable accordion
         </div>
     </body>
</html>

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

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </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() {
            $( "#accordion-6" ).accordion({
               create: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>Created</b><br>");
               },
					
               beforeActivate : function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     ", <b>beforeActivate</b><br>");
               },
					
               activate: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>activate</b><br>");
               }
            });
         });
      </script>
      
      <style>
         #accordion-6{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-6">
         <h3>Tab 1</h3>
         <div>
            <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>
         <h3>Tab 2</h3>
         <div>
            <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>
         <h3>Tab 3</h3>
         <div>
            <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>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>