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

Последнее обновление 28 мая 2019 10:22:01 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Описание

В этом документе вы увидите, как создавать складные компоненты с помощью Twitter Bootstarp.

Что требуется

Вы должны включить jquery.js и bootstrap-collapse.js - эти два файла JavaScript. Оба находятся в папке docs / assets / js.

Вы можете создавать складные компоненты, не написав немного JavaScript или вызвав JavaScript.

пример

В первом примере показано, как создавать разборные компоненты без вызова JavaScript.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>collapsible example</title>
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <div class="container-fluid">
     <div class="accordion" id="accordion2">
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                  Click me to exapand. Click me again to collapse. Part I.
                </a>
              </div>
              <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
                <div class="accordion-inner">
                  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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                 Click me to exapand. Click me again to collapse. Part II.
                </a>
              </div>
              <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner">
                  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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                  Click me to exapand. Click me again to collapse. Part III.
                </a>
              </div>
              <div id="collapseThree" class="accordion-body collapse">
                <div class="accordion-inner">
                  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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
              </div>
            </div>
          </div>
    </div>
	<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
	<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

Посмотреть этот пример онлайн .

объяснение

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

Во-вторых, href или data-target добавляется к родительскому компоненту, значение которого является идентификатором дочернего компонента.

В-третьих, добавлен атрибут data-parent для создания эффекта аккордеона. Значение атрибута data-parent совпадает со значением атрибута id основного контейнера div, содержащего весь компонент аккордеона. Если вы хотите создать простой складной компонент, в отличие от аккордеона, вам не нужно добавлять этот атрибут.

пример

Второй пример показывает, как создавать простые складные компоненты.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>collapsible via JavaScript example</title>
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div>
<div id="demo" class="collapse">
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. Duis aute irure dolor in reprehe.
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

Посмотреть этот пример онлайн

Звонок через JavaScript

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

 $(".collapse").collapse()

Опции, Методы и События

Существует несколько опций, методов и событий, которые можно использовать с плагином Bootstrap Collapsible JavaScript. Вот подробности:

Опции

parent: Тип значения - Селектор. Значение по умолчанию неверно. Когда отображается родительский элемент. все складные элементы под родителем закрыты.

toggle: тип значения - логическое. Значение по умолчанию верно. При вызове все складные элементы переключаются.

методы

.collapse (параметры): активирует разборный контент. Он принимает необязательный объект option.

.collapse ('toggle'): складной элемент отображается или скрывается.

.collapse ('show'): показан складной элемент.

.collapse (скрыть): складной элемент скрыт.

События

show: при вызове метода show instance это событие вызывается.

показано: Когда свернутый элемент становится видимым, выполняется ожидание завершения перехода CSS, а затем запускается это событие.

hide: при вызове метода экземпляра hide это событие вызывается.

hidden: когда свернутый элемент скрыт от пользователя, выполняется ожидание завершения перехода CSS, а затем запускается это событие

Вы можете скачать все файлы HTML, CSS, JS и изображения, используемые в наших руководствах, здесь.

Предыдущий: плагин Twitter Bootstrap Button