StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
07.10.2016
22:54
5383
пока нет
Информеры. Основы bootstrap 3 для начинающих. Урок №20
Всем привет!
В сегодняшнем уроке вы научитесь создавать всплывающие информеры.
При нажатии на ссылку или кнопку, читателю откроются небольшие накладки содержания с дополнительной информацией, Всплывать эти подсказки могут с левой, правой, нижней или верхней стороны, одним словом, там, где вы укажите.
Эффект похож на предыдущий из урока №19 - Всплывающие подсказки. Только там нужно было навести курсор мышки и подсказка выскакивала, а здесь нужно нажать на кнопку.
В общем, что говорить, лучше я покажу работу информера вживую, и тогда вы все поймете.
Кликните мышкой по всем кнопкам:
Ну как вам? Правда, прикольно?
Сейчас и на вашей веб-странице такое же будет!
Если у вас нет подключения к файлу «jquery-1.11.3.min.js», тогда вставьте между тегами <head></head> вот такой код:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
Добавьте еще перед тегом </head> вот этот код JavaScript:
<script>
$(function(){
$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
});
</script>
Теперь осталось только вставить кнопку или ссылку с вызовом сплывающего информера.
Вставьте следующий код между <body></body>:
<button type="button" class="btn btn-default" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Информер слева </button> <button type="button" class="btn btn-default" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Информер вверху </button> <button type="button" class="btn btn-default" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Информер внизу </button> <button type="button" class="btn btn-default" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Информер справа </button>
Настройки:
rel="popover" - обязательный атрибут для вызова окна информера.
data-placement="right" – указывает, с какой стороны показать информер. Вместо «right» могут быть вот такие параметры:
- Left – с левой стороны
- Right - с правой стороны
- Top – сверху
- Bottom - снизу
data-content=" Здесь будет текст" - в этот атрибут пишем информацию.
data-original-title="Здесь заголовок информера".
Вот пример:
<a href="#" class="btn btn-success" rel="popover" data-content="Не ожидайте слишком многого и не думайте о конечном результате." data-original-title="Совет дня:">Информация для тебя</a>
Результат:
Жду вас на следующих уроках. Подписывайтесь на обновления блога.