Bootstrap - Плагин Collapse

: Bootstrap 3; 23 сентября 2018; 05 января 2019; Просмотров: 6282

Bootstrap - Плагин Collapse

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

Содержание:

Применение Collapse
Опции Collapse
Методы Collapse
События Collapse

Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится collapse.js, после включения bootstrap.js или bootstrap.min.js.

Вы можете использовать плагин collapse -

Создавать складные группы или аккордеон. Это можно создать, как в примере ниже -

   <div class = "panel-group" id = "accordion0">
   <div class = "panel panel-default">
     
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion0" href = "#collapseOne0">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
     
      <div id = "collapseOne0" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
  
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion0" href = "#collapseTwo0">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>
 
      <div id = "collapseTwo0" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
  
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion0" href = "#collapseThree0">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
    
      <div id = "collapseThree0" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
    
   </div>
</div>

Data-toggle = "collapse" добавляется к ссылке, на которую вы нажимаете, чтобы развернуть или свернуть компонент.
К родительскому компоненту добавляется атрибут href или атрибут data , значение которого равно id дочернего компонента.
Атрибут data-parent добавлен для создания эффекта аккордеона.

Создать простой разборный без аккордеонной разметки. Это можно создать, как в примере примера ниже -

<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>
 
<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>

Как вы можете видеть в примере, мы создали простой сборный компонент, в отличие от аккордеона, мы не добавили атрибут data-parent.

Применение Collapse

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

Класс	Описание
.collapse	Скрывает содержимое.
.collapse.in	Показывает содержимое.
.collapsing	Добавляется, когда начинается переход, и удаляется, когда он заканчивается.

Вы можете использовать плагин Collapse двумя способами:

Через атрибуты данных - добавьте data-toggle = "collapse" и data-target для элемента, чтобы автоматически назначать управление сбрасываемым элементом. Атрибут data-target принимает селектор CSS, чтобы применить коллапс. Не забудьте добавить класс .collapse к сбрасываемому элементу. Если вы хотите открыть его по умолчанию, добавьте дополнительный класс .in. Чтобы добавить гармоничное управление группами в сворачиваемый элемент управления, добавьте данные атрибута data-parent = "#selector".
Через JavaScript - метод свернуть можно активировать с помощью JavaScript, как показано ниже -
```
$('.collapse').collapse()
```

Опции Collapse

Существуют определенные опции, которые могут быть переданы через атрибуты данных, или JavaScript перечислены в следующей таблице -

Название опции	Тип/значение по умолчанию	Имя атрибута данных	Описание
parent	selector По умолчанию - false	data-parent	Если селектор ошибочен, то все сбрасываемые элементы под указанным родителем будут закрыты (подобно традиционному аккордеонному поведению - это зависит от класса группы аккордеона).
toggle	boolean Значение по умолчанию - true	data-toggle	Переключает сбрасываемый элемент при вызове.

Методы Collapse

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

Метод	Описание	Пример
Параметры - .collapse (опции)	Активирует ваш контент как складной элемент. Принимает необязательный объект опций.	$('#identifier').collapse({toggle: false})
Toggle - .collapse ('toggle')	Переключает сложенный элемент на показанный или скрытый.	$('#identifier').collapse('toggle')
Show - .collapse ('show')	Показывает складной элемент.	$('#identifier').collapse('show')
Hide - .collapse ('hide')	Скрывает складной элемент.	$('#identifier').collapse('hide')

Следующий пример демонстрирует использование методов -

<div class = "panel-group" id = "accordion1">
   <div class = "panel panel-default">
     
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion1" href = "#collapseOne1">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
     
      <div id = "collapseOne1" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
  
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion1" href = "#collapseTwo1">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
     
      <div id = "collapseTwo1" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
  
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion1" href = "#collapseThree1">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree1" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
  
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion1" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
     
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>
 
<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
 
   $(function () { $('#collapseTwo1').collapse('show')});
   $(function () { $('#collapseThree1').collapse('toggle')});
   $(function () { $('#collapseOne1').collapse('hide')});
</script>

События Collapse

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

Событие	Описание	Пример
show.bs.collapse	Вызывается после вызова метода show.	$('#identifier').on('show.bs.collapse', function () { // do something })
shown.bs.collapse	Это событие запускается, когда элемент сглаживания становится видимым для пользователя (будет ждать завершения CSS-переходов).	$('#identifier').on('shown.bs.collapse', function () { // do something })
hide.bs.collapse	Вызывается, когда вызван метод экземпляра hide.	$('#identifier').on('hide.bs.collapse', function () { // do something })
hidden.bs.collapse	Это событие запускается, когда элемент сглаживания скрыт от пользователя (будет ждать завершения переходов CSS).	$('#identifier').on('hidden.bs.collapse', function () { // do something })

Следующий пример демонстрирует использование событий -

<div class = "panel-group" id = "accordion2">
   <div class = "panel panel-info">
  
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
     
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>
 
<script type = "text/javascript">
   $(function () {
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>

Tags: уроки html, сайтостроение, Bootstrap 3

Компьютерапия