Учебники

Bootstrap — Свернуть Плагин

Октябрь 25, 2018

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

Если вы хотите включить функциональность этого плагина по отдельности, вам понадобится файл collapse.js . Это также требует, чтобы Transition Plugin был включен в вашу версию Bootstrap. Иначе, как упоминалось в главе « Обзор плагинов Bootstrap» , вы можете включить bootstrap.js или минимизированный bootstrap.min.js .

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

  • Для создания сборно-разборных групп или аккордеона . Это можно создать как в примере ниже:

Для создания сборно-разборных групп или аккордеона . Это можно создать как в примере ниже: 

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" 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 = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" 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 = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree" 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-target добавляется к родительскому компоненту, значение которого равно id дочернего компонента.

  • Атрибут data-parent добавлен для создания эффекта аккордеона.

data-toggle = «collapse» добавляется к ссылке, по которой вы щелкаете, чтобы развернуть или свернуть компонент.

href или атрибут data-target добавляется к родительскому компоненту, значение которого равно 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.in Показывает содержание.
.collapsing Добавляется при начале перехода и удаляется при его завершении.

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

  • Через атрибуты данных — добавьте data-toggle = «collapse» и цель данных к элементу, чтобы автоматически назначить контроль над складным элементом. Атрибут data-target примет селектор CSS, к которому будет применен коллапс. Обязательно добавьте класс .collapse к складному элементу. Если вы хотите открыть его по умолчанию, включите дополнительный класс .in .

    Чтобы добавить управление группами в виде аккордеона в складной элемент управления, добавьте атрибут data data-parent = «#selector» .

  • С помощью JavaScript — метод свертывания может быть активирован с помощью JavaScript, как показано ниже —

Через атрибуты данных — добавьте data-toggle = «collapse» и цель данных к элементу, чтобы автоматически назначить контроль над складным элементом. Атрибут data-target примет селектор CSS, к которому будет применен коллапс. Обязательно добавьте класс .collapse к складному элементу. Если вы хотите открыть его по умолчанию, включите дополнительный класс .in .

Чтобы добавить управление группами в виде аккордеона в складной элемент управления, добавьте атрибут data data-parent = «#selector» .

С помощью JavaScript — метод свертывания может быть активирован с помощью JavaScript, как показано ниже — 

$('.collapse').collapse()

Опции

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

Название варианта Тип / Значение по умолчанию Имя атрибута данных Описание
родитель Селектор По умолчанию — false Данные родитель Если селектор имеет значение false, то все складные элементы под указанным родителем будут закрыты (аналогично традиционному поведению аккордеона — это зависит от класса группы аккордеонов).
тумблер логическое значение по умолчанию — true данных тумблер Переключает складной элемент при вызове.

методы

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

метод Описание пример

Опции — .collapse (опции)

Активирует ваш контент как складной элемент. Принимает необязательные параметры объекта. 
$('#identifier').collapse({
   toggle: false
})

Toggle — .collapse (‘переключатель’)

Переключает складной элемент на показанный или скрытый. 
$('#identifier').collapse('toggle')

Show — .collapse (‘показать’)

Показывает складной элемент. 
$('#identifier').collapse('show')

Скрыть — .collapse («скрыть»)

Скрывает разборный элемент. 
$('#identifier').collapse('hide')

Опции — .collapse (опции)

Toggle — .collapse (‘переключатель’)

Show — .collapse (‘показать’)

Скрыть — .collapse («скрыть»)

пример

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

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" 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 = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      
      <div id = "collapseTwo" 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 = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      
      <div id = "collapseThree" 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 = "#accordion" 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 () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>

События

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

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

пример

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

54
Share: