Twitter Bootstrap Popover Tutoriall

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

script1adsense2code

script1adsense3code

Описание

Twitter Bootstrap Popover создается с помощью пользовательского плагина Jquery. Может использоваться для отображения некоторой информации (вторичной) любого элемента.

В этом документе вы увидите, как использовать Twitter Bootstrap Popover из коробки, а также как настроить его, используя несколько доступных опций.

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

Вы должны включить Jquery, Twitter Bootstrap CSS и два файла JavaScript - один для Twitter Bootstrap Tooltip и один для Twitter Bootstrap Popover.

JS-файл для всплывающей подсказки доступен в папке js вашей папки Bootstrap Twitter в виде bootstrap-popover.js, а JS-файл для всплывающего окна доступен в папке JS вашей папки Bootstrap Twitter в виде bootstrap-tooltip.js. Jquery доступен в docs> assets> js вашей папки Twitter Bootstrap как jquery.js; или вы можете указать этот https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js для загрузки Jquery.

Убедитесь, что вы загружаете bootstrap-tooltip.js перед bootstrap-popover.js.

Использование Twitter Bootstrap Popover на вашем сайте

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Popover Example</title> 
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<h2>Example of creating Modal with Twitter Bootstrap</h2>
<div class="well">
<a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function ()
{ $("#example").popover();
});
</script>
</body>
</html>

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

объяснение

Следующая таблица объясняет код выше. Это поможет вам понять, как использовать Twitter Bootstrap Popover.

Строка № в коде	Код	объяснение
13	ID = "Пример"	Идентификатор присваивается ассоциированной привязке. Значение идентификатора упоминается в JavaScript позже для реализации popover.
13	класс = "БТН БТН-опасность"	Создать кнопку. btn btn-danger - это классы, используемые в примере. Вы можете использовать любой другой класс, используемый в Twitter Bootstrap CSS, или свой собственный.
13	data-content = "Создать подсказку для моего сайта так просто!"	Значение data-content отображается в теле всплывающего окна.
13	data-original-title = "Twitter Bootstrap Popover"	Значение data-original-title отображается как заголовок всплывающего окна.
13	наведите курсор на поповер	Якорный текст.
16	<script src = "https://ajax.googleapis.com/ajax/libs/ jquery / 1.7.1 / jquery.min.js"> </ script>	Jquery включен.
17	<script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / js / bootstrap-tooltip.js"> </ script>	JS файл для Twitter Bootstrap Tooltip включен.
18	<script src = "/ twitter-bootstrap / twitter-bootstrap-v2 / js / bootstrap-popover.js"> </ script>	JS файл для Twitter BootstrapPopover включен.
20	$ (функция ()	Подготовить документ. Команда Jquery.
21	$ ( "# Пример") поповер ().	Доступ к примеру с идентификатором, и popover () реализован на этом.

Мы не создали поповер из коробки без какой-либо настройки, то есть мы не использовали никаких опций с popover ().

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

Итак, вы можете сделать вывод, что использование Twitter Bootstrap Popover:

$(function ()  
{ $("identifier").popover(options);  
});

Где идентификатор - это селектор Jquery для идентификации связанного элемента привязки. Вы столкнетесь с тем, что варианты в ближайшее время.

Опции

Существуют определенные параметры, которые могут использоваться с popover () для настройки внешнего вида Popover.

анимация

Тип значения анимации - логическое, значение по умолчанию - true, и оно может использоваться для всплывающей подсказки, чтобы вызвать эффект перехода css fade.

размещение

Тип значения размещения может быть строкой или функцией, значением по умолчанию является 'right', top, bottom и left - другие значения, которые можно использовать. Он используется для определения размещения всплывающего окна вокруг текста привязки. Вот пример использования варианта размещения.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Popover with placement option Example</title> 
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
<style>
a {
margin-left : 400px;
}
</style>
</head>
<body>
<div class="container">
<h2>Example of creating Popover with Twitter Bootstrap with placement option</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltip for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="example_left" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="example_top" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="example_bottom" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function ()
{ $("#example").popover();
  $("#example_left").popover({placement:'left'});
  $("#example_top").popover({placement:'top'});
  $("#example_bottom").popover({placement:'bottom'});
});
</script>
</body>
</html>

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

селектор

Тип значения селектора - строка, значение по умолчанию - false. Объекты всплывающей подсказки делегируются данной цели с помощью этого.

спусковой крючок

Тип значения триггера может быть строкой, значением по умолчанию является «hover», focus и manual - другие значения, которые могут использоваться. Он используется для определения того, как всплывающая подсказка инициируется. Вот пример, показывающий, как использовать параметр фокуса для запуска всплывающего окна.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Popover Example with trigger option</title> 
<meta name="description" content="Creating Popover with Twitter Bootstrap with trigger option">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<h2>Example of creating Popover with Twitter Bootstrap with trigger options</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function ()
{ $("#example").popover({trigger: 'focus'});
});
</script>
</body>
</html>

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

заглавие

Тип значения заголовка может быть строкой или функцией, значением по умолчанию является ''. Это становится значением заголовка, если атрибут заголовка отсутствует.

содержание

Тип значения содержимого может быть строкой или функцией, значением по умолчанию является ''. Это становится значением data-content, если атрибут data-content отсутствует. Вот пример использования параметров заголовка и содержимого данных. В этом примере также показано, как использовать несколько параметров вместе.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Popover Example with title and content option</title> 
<meta name="description" content="Creating Popover with Twitter Bootstrap with trigger option">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<h2>Example of creating Popover with Twitter Bootstrap with title and content options</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function ()
{ $("#example").popover({title: 'Twitter Bootstrap Popover', content: "It's so simple to create a tooltop for my website!"});
});
</script>
</body>
</html>

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

задержка

Тип значения содержимого может быть числом или объектом, значение по умолчанию равно 0. Это определяет задержку отображения и скрытия всплывающего окна в миллисекундах. Задержка применяется как к показу, так и к скрытию, если указан номер. Если объект указан, структура имеет задержку: {show: 500, hide: 100}, 500 и 100 в миллисекундах.

Изменение разметки по умолчанию и стиля поповера

Разметка по умолчанию окна Popover размещается в строке № 92 файла bootstrap-popover.js. Это выглядит как :

template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

Вы можете изменить это, чтобы разместить собственную разметку.

Стили по умолчанию для Popover размещены в строке от 3027 до 3118. Вы можете изменить это, чтобы добавить свои собственные стили

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

Предыдущий: Твиттер Учебник по загрузке Twitter
Далее: плагин Twitter Bootstrap Dropdown JavaScript