Учебники

MooTools — Аккордеон

Сентябрь 8, 2018

Аккордеон — самый популярный плагин, который предоставляет MooTools. Это помогает скрывать и раскрывать данные. Давайте обсудим больше об этом.

Создание нового баяна

Основными элементами, которые требуются аккордеону, являются пары переключателей и их содержимое. Давайте создадим пары заголовков и содержание HTML. 

<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>

Взгляните на следующий синтаксис, чтобы понять, как создать аккордеон на основе приведенной выше структуры HTML.

Синтаксис 

var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);

пример

Давайте возьмем пример, который определяет основные функции Аккордеона. Посмотрите на следующий код. 

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            var AccordionObject = new Fx.Accordion(toggles, content);
         });
      </script>
   </head>
   
   <body>
      <h3 class = "togglers">Toggle 1</h3>
      <p class = "elements">Here is the content of toggle 1</p>
      <h3 class = "togglers">Toggle 2</h3>
      <p class = "elements">Here is the content of toggle 2</p>
      <h3 class = "togglers">Toggle 3</h3>
      <p class = "elements">Here is the content of toggle 3</p>
   </body>
   
</html>

Вы получите следующий вывод —

Выход

Варианты Аккордеона

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

дисплей

Эта опция определяет, какой элемент отображается при загрузке страницы. По умолчанию установлено значение 0, поэтому отображается первый элемент. Чтобы установить другой элемент, просто введите другое целое число, соответствующее его индексу. В отличие от «шоу», дисплей будет переходить элемент открытым.

Синтаксис 

var AccordionObject = new Accordion(toggles, content {
   display: 0 //default is 0
});

шоу

Как и «display», show определяет, какой элемент будет открыт при загрузке страницы, но вместо перехода «show» будет просто отображать содержимое при загрузке без какого-либо перехода.

Синтаксис 

var AccordionObject = new Accordion(toggles, content {
   show: 0 //default is 0
});

рост

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

Синтаксис 

var AccordionObject = new Accordion(toggles, content {
   height: true //default is true
});

ширина

Это работает так же, как опция высоты . Однако вместо перехода по высоте для отображения содержимого это помогает при переходе по ширине. Если вы используете «ширину» со стандартной настройкой, как мы использовали выше, то пространство между переключателем заголовка останется прежним, в зависимости от высоты содержимого. Div «content» будет затем перемещаться слева направо для отображения в этом пространстве.

Синтаксис 

var AccordionObject = new Accordion(toggles, content {
   width: false //default is false
});

помутнение

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

Синтаксис 

var AccordionObject = new Accordion(toggles, content {
   opacity: true //default is true
});

fixedHeight

Чтобы установить фиксированную высоту, вам нужно исправить целое число (например, вы могли бы поставить 100 для контента высотой 100 пикселей). Это следует использовать с некоторым свойством CSS overflow, если вы планируете иметь фиксированную высоту, меньшую, чем естественная высота содержимого.

Синтаксис 

var AccordionObject = new Accordion(toggles, content {
   fixedHeight: false //default is false
});

моноширинный

Точно так же как «fixedHeight» выше, это установит ширину, если вы дадите этой опции целое число.

Синтаксис 

var AccordionObject = new Accordion(toggles, content {
   fixedWidth: false //default is false
});

alwaysHide

Этот параметр позволяет добавить элемент управления для заголовков. Если для этого параметра установлено значение true, при щелчке по открытому заголовку содержимого элемент содержимого автоматически закрывается, ничего больше не открывая. Вы можете увидеть выполнение в следующем примере.

Синтаксис 

var AccordionObject = new Accordion(toggles, content {
   alwaysHide: false //default is false
});

Аккордеонные События

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

onActive

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

Синтаксис 

var AccordionObject = new Accordion(toggles, content {
   onActive: function(toggler, element) {
      toggler.highlight('#76C83D'); //green
      element.highlight('#76C83D');
   }
});

OnBackground

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

Синтаксис 

var AccordionObject = new Accordion(toggles, content {
   onBackground: function(toggler, element) {
      toggler.highlight('#DC4F4D'); //red
      element.highlight('#DC4F4D');
   }
});

OnComplete

Это ваше стандартное событие onComplete. Он передает переменную, содержащую элемент содержимого.

Синтаксис 

var AccordionObject = new Accordion(toggles, content {
   onComplete: function(one, two, three, four){
      one.highlight('#5D80C8'); //blue
      two.highlight('#5D80C8');
      three.highlight('#5D80C8');
      four.highlight('#5D80C8');
   }
});

Аккордеонные Методы

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

addSection ()

С помощью этого метода вы можете добавить раздел (пара элементов toggle / content). Это работает, как и многие другие методы, которые мы видели. Сначала обратитесь к объекту accordion, используйте .addSection, затем вы можете вызвать идентификатор заголовка, идентификатор содержимого и, наконец, указать, в какой позиции вы хотите, чтобы новый контент появлялся (0 — первое место).

Синтаксис 

AccordionObject.addSection('togglersID', 'elementsID', 2);

Примечание. Когда вы добавляете такой раздел, хотя он будет отображаться в месте индекса 2, фактический индекс будет +1 к последнему индексу. Таким образом, если у вас есть 5 элементов в вашем массиве (0-4), и вы добавляете 6- й , его индекс будет равен 5 независимо от того, где вы добавите его с помощью .addSection ();

Дисплей ()

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

Синтаксис 

AccordionObject.display(5); //would display the newly added element

пример

В следующем примере объясняется функция Accordion с несколькими эффектами. Посмотрите на следующий код. 

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            color: #222;
            margin: 0;
            padding: 2px 5px;
            background: #EC7063;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 15px;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
         }
         
         .ind {
            background: #2E86C1;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 20px;
            color: aliceblue;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
            width: 200px;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            
            var AccordionObject = new Fx.Accordion(toggles, content, {
               show: 0,
               height : true,
               width : false,
               opacity: true,
               fixedHeight: false,
               fixedWidth: false,
               alwaysHide: true,
               
               onActive: function(toggler, element) {
                  toggler.highlight('#DC7633'); //green
                  element.highlight('#DC7633');
                  $('active').highlight('#DC7633');
               },
               
               onBackground: function(toggler, element) {
                  toggler.highlight('#AED6F1'); //red
                  element.highlight('#AED6F1');
                  $('background').highlight('#F4D03F');
               }
            });
            $('display_section').addEvent('click', function(){
               AccordionObject.display(4);
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "active" class = "ind">onActive</div>
      <div id = "background" class = "ind">onBackground</div>
      
      <div id = "accordion_wrap">
         <p class = "togglers">Toggle 1: click here</p>
         <p class = "elements">Here is the content of toggle 1 Here is the content of
            toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
            is the content of toggle 1 Here is the content of toggle 1 Here is the content
            of toggle 1 Here is the content of toggle 1</p>
         <p class = "togglers">Toggle 2: click here</p>
         <p class = "elements">Here is the content of toggle 2</p>
         <p class = "togglers">Toggle 3: click here</p>
         <p class = "elements">Here is the content of toggle 3</p>
         <p class = "togglers">Toggle 4: click here</p>
         <p class = "elements">Here is the content of toggle 4</p>
      </div>
      
      <p>
         100
         <button id = "display_section" class = "btn btn-primary">
            display section
         </button>
      </p>
      
   </body>
</html>

Выход

Нажмите на каждый раздел Toggle, чтобы найти скрытые данные и индикаторы событий для каждого действия.

45
Share: