Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Создаем выпадающий список на bootstrap самостоятельно по пошаговой инструкции

Доброго времени суток, гики сайтостроения и мои любознательные подписчики. Пришло время подробно разобрать инструмент фреймворка 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>

На этой ноте я заканчиваю написание данной статьи. Надеюсь она вам понравилась. Подписывайтесь на обновления блога и обязательно рассказывайте о нем друзьям. Удачи! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 100 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: