Доброго времени суток, гики сайтостроения и мои любознательные подписчики. Пришло время подробно разобрать инструмент фреймворка Bootstrap выпадающий список. Это часто используемый элемент с множеством дополнительных возможностей.
Поэтому в сегодняшней публикации я расскажу вам каким образом можно создать выпадающий список с картинками и без, уделю внимание каждому встроенному классу, методу и событию, объясню, как создаются подменю и конечно же все это дополню примерами программного кода. А теперь за дело!
Внимание, на сцене управляющие плагином Dropdown
Для создания любого выпадающего списка с помощью плагина Bootstrap 3, для начала необходимо знать основные встроенные классы. Их немного, так что запомнить основные вам не составит труда.
| Класс | Предназначение |
| .dropdown | Это основной элемент управления, который указывает, что в выбранном блоке будет создан выпадающий список. |
| .dropup | С его помощью создается раскрывающийся перечень пунктов меню не вниз, как по умолчанию, а вверх. |
| .dropdown-menu | Строит сам навигационный список. |
| .dropdown-menu-right | Выравнивает объект по правому краю. |
| .dropdown-header | Добавляет заголовок перед перечнем меню. |
| .divider | Разделяет пункты тонкой горизонтальной линией. |
| .disabled | Благодаря этому классу можно делать недоступными выбранные пункты из перечня. В этом случае при наведении курсора мышки на них последний поменяется на знак красного перечеркнутого круга. |
Однако это еще не все. Ваш механизм не будет работать без использования специального атрибута под названием data-toggle, которому обязательно стоит присвоить значение «dropdown».
Несколько слов о дополнительных элементах и плюшках
Помимо встроенных классов и атрибутов, можно воспользоваться событиями и методом. Данный перечень инструментов вызывается через JavaScript-библиотеку – jQuery.
Так, для раскрывающихся списков существует всего лишь один метод: .dropdown («toggle»), который действует также, как и рассмотренный выше атрибут. Однако последний не стоит исключать из кода, если вы используете этот метод, так как он, к сожалению, работает не во всех браузерах.
Что касается событий, то они стандартные, как и для других инструментов фреймворка:
- show.bs.dropdown – срабатывает перед раскрытием меню;
- shown.bs.dropdown – срабатывает сразу после раскрытия списка;
- hide.bs.dropdown – выполняется перед скрытием меню;
- hidden.bs.dropdown – выполняется уже после закрытия перечня пунктов.
Помимо всего перечисленного не забывайте, что в данном плагине можно использовать множество дополнительных инструментов. Таким образом, вы можете создавать выпадающие списки с картинками, чекбоксами, различными input-ами (например, с поиском или текстовыми полями для ввода данных) и т.д. И при этом вы можете забыть о таких тегах, как <select > и <option>.
Вот теперь с полученными знаниями вы можете создать интересные выпадающие списки. Обратите внимание, что любой пункт подсвечивается при наведении курсора.
В прикрепленном ниже примере я реализовал ступенчатую структуру раскрывающихся вложенных списков, где в видимой части вначале расположены две кнопки, а после нажатия на конкретную из них появляется выпадающий вниз или вверх список.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.button_st{
width: 155px;
}
.container {
margin-top: 11%;
margin-left:39%;
}
.submenu .dropdown-menu {
height: 65px;
left: 100%;
top:0;
}
.submenu {
position: relative;
}
</style>
</head>
<body>
<div class="container" >
<div class="dropup">
<button type="button" class="btn btn-success button_st" data-toggle="dropdown">Текущие курсы
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="disabled"><a href="#">Рукоделие</a></li>
<li><a href="#">Вождение</a></li>
<li class="submenu">
<a id="open" href="#">Маркетинг<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Основы</a></li>
<li><a href="#">Для продвинутых</a></li>
</ul>
</li>
</ul>
</div>
<div class="dropdown">
<button type="button" class="btn btn-info button_st" data-toggle="dropdown">Новые курсы
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Основы программирования</a></li>
<li><a href="#">Шитье</a></li>
<li><a href="#">Кулинария</a></li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown').on('shown.bs.dropdown', function(){
alert('Раскрыт перечень новых курсов, на которые вы еще можете записаться.');
});
$('.dropup').on('shown.bs.dropdown', function(){
alert('Раскрыт перечень текущих курсов, на которые набор уже закрыт.');
});
$('#open').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html> |
На этой ноте я заканчиваю написание данной статьи. Надеюсь она вам понравилась. Подписывайтесь на обновления блога и обязательно рассказывайте о нем друзьям. Удачи! Пока-пока!
С уважением, Роман Чуешов
