English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной учебник Bootstrap

Плагины Bootstrap

Плагин для складывания (Collapse) Bootstrap

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

Если вы хотите использовать функции плагина отдельно, вам нужно включить collapse.jsВ то же время, вам также нужно включить в вашу версию Bootstrap Transition (переход) плагинили, как Обзор плагинов Bootstrap Как указано в главе bootstrap.js или сжатую версию bootstrap.min.js.

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

  • Создайте складывающуюся группу или складывающийся блок (accordion)например:

    Онлайн пример

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Складывающийся блок</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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">
					Нажмите на меня, чтобы развернуть, еще раз нажмите, чтобы свернуть. Часть 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">
					Нажмите на меня, чтобы развернуть, еще раз нажмите, чтобы свернуть. Часть 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">
					Нажмите на меня, чтобы развернуть, еще раз нажмите, чтобы свернуть. Часть 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>
</body>
</html>
    Проверьте, посмотрите ‹/›

    Результаты показаны ниже:

  • data-toggle="collapse" Добавьте ссылку на компонент, который вы хотите разворачивать или сворачивать.

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

  • data-parent Атрибут добавляет идентификатор accordion к ссылке на компонент, который будет разворачиваться или складываться.

  • Создайте простую складывающуюся компонент (collapsible) без маркера accordionнапример:

    Онлайн пример

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap пример - простая складывающаяся компонент</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="collapse"　
		data-target="#demo">
	Простая складывающаяся компонент
</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>
</body>
</html>
    Проверьте, посмотрите ‹/›

    Результаты показаны ниже:

    Как вы видите в примере, мы создали складывающийся компонент. В отличие от складывающихся панелей (accordion), мы не добавляли атрибуты data-parent.

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

В таблице ниже приведены классы, используемые плагином Collapse для обработки сложных伸缩:

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

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

  • С помощью атрибута данных：Добавьте к элементу data-toggle="collapse" и data-targetи автоматически назначает управление складывающимся элементом.data-target Атрибут принимает CSS-селектор и применяет к нему эффект складывания. Убедитесь, что к элементу добавлен класс .collapse. Если вы хотите, чтобы он был открытым по умолчанию, добавьте дополнительный класс .in.

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

  • С помощью JavaScript：Метод collapse можно активировать с помощью JavaScript, как показано ниже:

    $('.collapse').collapse()

Параметры

Некоторые параметры передаются через атрибуты данных или JavaScript. В таблице ниже приведены эти параметры:

Название параметраТип/Значение по умолчаниюНазвание свойства данныхОписание
родительselector
Значение по умолчанию: false		data-parentЕсли предоставлен селектор, все сворачиваемые элементы в родительском элементе будут закрыты при отображении сворачиваемого элемента. Это аналогично поведению традиционных аккордеонов (accordion) - это зависит от класса accordion-group.
toggleboolean
Значение по умолчанию: true		data-toggleПереключить вызов сворачиваемого элемента.

Методы

Ниже приведены некоторые полезные методы плагина Collapse (Collapse):

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

Онлайн пример

Ниже приведены примеры использования методов:

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - методCollapse (Collapse) плагина</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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">
					Нажмите на меня, чтобы развернуть, и еще раз, чтобы свернуть. Часть 1 -- метод hide
				</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">
					Нажмите на меня, чтобы развернуть, и еще раз, чтобы свернуть. Часть 2 -- метод show
				</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">
					Нажмите на меня, чтобы развернуть, и еще раз, чтобы свернуть. Часть 3 -- метод toggle
				</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">
					Нажмите, чтобы развернуть, еще раз нажмите, чтобы сложить. Часть 4 -- метод options
				</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>　　
</body>
</html>
Проверьте, посмотрите ‹/›

Результаты показаны ниже:

Событие

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

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

Онлайн пример

Ниже приведен пример использования событий:

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap пример - плагин Collapse с событиями</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
	<div class="panel panel-info">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseexample">
					Нажмите, чтобы развернуть, еще раз нажмите, чтобы свернуть. -- событ shown
				</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('Эй, когда вы развернете, появится это предупреждение');});
	});
</script>　
</body>
</html>
Проверьте, посмотрите ‹/›

Результаты показаны ниже:

Плагин слайдера BootstrapПлагин кнопок Bootstrap