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

Основной курс Bootstrap

Плагины Bootstrap

Плагин Popover Bootstrap

Pop-over, как и Tooltip, предоставляет расширенный вид. Чтобы активировать pop-over, пользователю нужно просто навести курсор на элемент. Содержимое pop-over можно полностью заполнить с помощью Bootstrap Data API. Этот метод зависит от tooltips.

Если вы хотите использовать функции плагина отдельно, вам нужно引用 popover.jsон зависит от плагин Tooltips. Или, как Обзор плагинов Bootstrap как упоминалось в главе bootstrap.js или сжатую версию bootstrap.min.js.

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

Плагин Popover создает содержимое и маркеры в зависимости от требований, по умолчанию он ставит pop-over позади их триггерного элемента. Вы можете добавить pop-over двумя способами:

  • через атрибут dataЧтобы добавить pop-over, просто добавьте data-toggle="popover" Текст pop-over будет равен title анкера. По умолчанию, плагин устанавливает pop-over в верхней части.

    <a href="#" data-toggle="popover" title="Example popover">
　　　　Пожалуйста, наведите курсор на меня
</a>

  • Активация через JavaScript:Активация выпадного окна (popover) через JavaScript:

    $('#identifier').popover(options)

Плагин выпадного окна (Popover) не является чистым CSS-плагином, как обсуждались ранее выпадные меню и другие плагины. Чтобы использовать этот плагин, вам необходимо активировать его с помощью jQuery (читать JavaScript). Используйте следующий скрипт для активации всех выпадных окон (popover) на странице:

$(function　()　{　$("[data-toggle='popover']").popover();　});

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

Ниже приведен пример использования плагина выпадного окна (Popover) через атрибуты data.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　пример　-　выпадное　окно(Popover)プラグイン</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="container"　style="padding:　100px　50px　10px;"　>
	<button　type="button"　class="btn　btn-default"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="left"　
			data-content="левый　Popover　содержит　некоторую　информацию">
		Слева находится Popover
	</button>
	<button　type="button"　class="btn　btn-primary"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="top"　
			data-content="верхний　Popover　содержит　некоторую　информацию">
		верхний　Popover
	</button>
	<button　type="button"　class="btn　btn-success"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="bottom"　
			data-content="нижний　Popover　содержит　некоторую　информацию">
		Попап снизу
	</button>
	<button　type="button"　class="btn　btn-warning"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="right"　
			data-content="Некое содержимое Popover справа">
		Попап справа
	</button>
</div>
<script>
$(function () {　
	$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>
Проверьте, посмотрите ‹/›

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

Параметры

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

Имя параметраТип/Значение по умолчаниюИмя атрибута данныхОписание
animationboolean
Значение по умолчанию: true		data-animationПрименение эффекта анимации осветления к всплывающему окну.
htmlboolean
Значение по умолчанию: false		data-htmlВставка HTML в всплывающее окно. Если установлено в false, метод jQuery text будет использоваться для вставки содержимого в DOM. Если вы беспокоитесь о атаках XSS, используйте text.
placementstring|function
Значение по умолчанию: top		data-placementУказание способа позиционирования всплывающего окна (то есть top|bottom|left|right|auto).
Когда указано auto При этом динамически регулируется всплывающее окно. Например, если placement является "auto left", всплывающее окно будет как можно ближе отображаться слева, а в случае, когда это невозможно, оно будет отображаться справа.
selectorstring
Значение по умолчанию: false		data-selectorЕсли предоставлен селектор, объект всплывающего окна будет делегирован к указанной цели.
titlestring | function
Значение по умолчанию: ''		data-titleЕсли не указано title Если свойство, то значение title является значением по умолчанию для title.
triggerstring
Значение по умолчанию: 'hover focus'		data-triggerОпределение способа триггерации всплывающего окна: click| hover | focus | manualВы можете передать несколько триггеров, разделенных пробелом.
delaynumber | object
Значение по умолчанию: 0		data-delayЗадержка отображения и скрытия всплывающего окна в миллисекундах - не применяется к типу trigгерации manual. Если предоставлен номер, задержка будет применяться к отображению и скрытию. Если предоставлен объект, структура следующая:
delay:
{　show:　500,　hide:　100　}
containerstring | false
Значение по умолчанию: false		data-containerДобавить выпадное окно к указанному элементу.
Пример: container: 'body'

Методы

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

МетодыОписаниеПример
Опции: .popover(options)Добавить обработчик выпадного окна к集合у элементов.
$().popover(options)
Toggle: .popover('toggle')Переключить отображение/скрытие выпадного окна элемента.
$('#element').popover('toggle')
Show: .popover('show')Показать выпадное окно элемента.
$('#element').popover('show')
Hide: .popover('hide')Скрыть выпадное окно элемента.
$('#element').popover('hide')
Destroy: .popover('destroy')Скрыть и уничтожить выпадное окно элемента.
$('#element').popover('destroy')

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　пример　-　выпадное　окно(Popover)　методы　плагина</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="container"　style="padding:　100px　50px　10px;"　>
	<button　type="button"　class="btn　btn-default　popover-show"　
			title="Заголовок Popover" data-container="body"　
			data-toggle="popover"　data-placement="left"　
			data-content="Слева находится Popover с некоторым содержимым - метод show">
		Слева находится Popover
	</button>
	<button　type="button"　class="btn　btn-primary　popover-hide"　
			title="Заголовок Popover" data-container="body"　
			data-toggle="popover"　data-placement="top"　
			data-content="верхний　Popover　содержит　некоторое　содержимое　——　метод　hide"
		верхний　Popover
	</button>
	<button　type="button"　class="btn　btn-success　popover-destroy"　
			title="Заголовок Popover" data-container="body"　
			data-toggle="popover"　data-placement="bottom"　
			data-content="Некоторые содержимое Попап снизу — метод destroy">
		Попап снизу
	</button>
	<button type="button" class="btn btn-warning popover-toggle"　
			title="Заголовок Popover" data-container="body"　
			data-toggle="popover" data-placement="right"　
			data-content="Некоторые содержимое Попап справа — метод toggle">
		Попап справа
	</button><br><br><br><br><br><br>
	<p class="popover-options">
		<a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"　　
		　　　data-container="body" data-toggle="popover" data-content="
																	　<h4>Некоторые содержимое Popover — метод options</h4>
			Popover
		</a>
	</p>
	<script>
		$(function () { $('.popover-show').popover('show');});
		$(function () { $('.popover-hide').popover('hide');});
		$(function () { $('.popover-destroy').popover('destroy');});
		$(function () { $('.popover-toggle').popover('toggle');});
		$(function () { $(".popover-options a").popover({html: true});});
	</script>
</div>
</body>
</html>
Проверьте, посмотрите ‹/›

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

Событие

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

СобытиеОписаниеПример
show.bs.popoverЭтот.event вызывается сразу после вызова метода show.
$('#mypopover').on('show.bs.popover', function () {
　　// Выполнить некоторые действия...
}
shown.bs.popoverЭтот.event вызывается, когда всплывающее окно становится видимым для пользователя (ждет завершения CSS-транзита).
$('#mypopover').on('shown.bs.popover', function () {
　　// Выполнить некоторые действия...
}
hide.bs.popoverЭтот事件 срабатывает сразу после вызова метода hide.
$('#mypopover').on('hide.bs.popover', function () {
　　// Выполнить некоторые действия...
}
hidden.bs.popoverЭтот事件 срабатывает при скрытии подсказки пользователем (ждет завершения CSS транзита).
$('#mypopover').on('hidden.bs.popover', function () {
　　// Выполнить некоторые действия...
}

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Модуль Popover (Popover) с событиями</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 clas="container" style="padding: 100px 50px 10px;" >
	<button type="button" class="btn btn-primary popover-show"　
			title="Заголовок Popover" data-container="body"　
			data-toggle="popover"　
			data-content="Слева находится Popover с некоторым содержимым - метод show">
		Слева находится Popover
	</button>
</div>
<script>
	$(function () { $('.popover-show').popover('show');});
	$((function() { $('.popover-show').on('shown.bs.popover', function() {}})}
		alert("Предупреждающее сообщение при отображении");
	})});
</script>
</body>
</html>
Проверьте, посмотрите ‹/›

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

Внимание BootstrapПлагин подсказок Bootstrap