Bootstrap – Плагин Dropdown
(1 оценок, среднее: 5,00 из 5)
Загрузка...
Если вы хотите включить эту функциональность плагина в отдельности, то вам нужно подключить dropdown.js. В противном случае, как уже упоминалось в главе Bootstrap – Обзор плагинов, вы можете подключить c gjvjom. bootstrap.js или минимизированный bootstrap.min.js.
Применение
Вы можете включить плагин ниспадающего меню следующем образом:
- С помощью атрибутов data – Добавление data-toggle = “dropdown” на ссылку или кнопку для переключения выпадающего меню, как показано ниже:
1 2 3 4 5 6 7 8 | <div class = "dropdown"> <a data-toggle = "dropdown" href = "#">Dropdown trigger</a> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel"> ... </ul> </div> |
- Если вам нужно сохранить ссылки целыми (это полезно, если браузер не позволяет запускать JavaScript), используйте атрибут data-target вместо href = “#”:
1 2 3 4 5 6 7 8 9 10 11 | <div class = "dropdown"> <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/my_page.html"> Dropdown <span class = "caret"></span> </a> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel"> ... </ul> </div> |
- С помощью JavaScript – Для вызова выпадающего переключателя с помощью JavaScript, используйте следующий метод:
1 | $('.dropdown-toggle').dropdown() |
Пример
В навигационной панели
Следующий пример демонстрирует использование выпадающего меню в пределах навигационной панели:
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 | <nav class = "navbar navbar-default" role = "navigation"> <div class = "navbar-header"> <a class = "navbar-brand" href = "#">AndreyEx</a> </div> <div> <ul class = "nav navbar-nav"> <li class = "active"><a href = "#">iOS</a></li> <li><a href = "#">SVN</a></li> <li class = "dropdown"> <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> Java <b class="caret"></b> </a> <ul class = "dropdown-menu"> <li><a href = "#">jmeter</a></li> <li><a href = "#">EJB</a></li> <li><a href = "#">Jasper Report</a></li> <li class = "divider"></li> <li><a href = "#">Разделенная ссылка</a></li> <li class = "divider"></li> <li><a href = "#">Еще одна разделенная ссылка</a></li> </ul> </li> </ul> </div> </nav> |
Во вкладках
Следующий пример демонстрирует использование выпадающего меню во вкладках:
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 | <p>Вкладки с примером выпадающего списка</p> <ul class = "nav nav-tabs"> <li class = "active"><a href = "#">Главная</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li class = "dropdown"> <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Java <span class = "caret"></span> </a> <ul class = "dropdown-menu"> <li><a href = "#">Swing</a></li> <li><a href = "#">jMeter</a></li> <li><a href = "#">EJB</a></li> <li class = "divider"></li> <li><a href = "#">Разделенная ссылка</a></li> </ul> </li> <li><a href = "#">PHP</a></li> </ul> |
Опции
Нет опций
Методы
Выпадающий переключатель имеет простой метод, чтобы показать или скрыть выпадающий список.
1 | $().dropdown('toggle') |
Пример
Следующий пример демонстрирует использование плагина выпадающего списка.
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 | <nav class = "navbar navbar-default" role = "navigation"> <div class = "navbar-header"> <a class = "navbar-brand" href = "#">AndreyEx</a> </div> <div id = "myexample"> <ul class = "nav navbar-nav"> <li class = "active"><a href = "#">iOS</a></li> <li><a href = "#">SVN</a></li> <li class = "dropdown"> <a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a> <ul class = "dropdown-menu"> <li><a id = "action-1" href = "#">jmeter</a></li> <li><a href = "#">EJB</a></li> <li><a href = "#">Jasper Report</a></li> <li class = "divider"></li> <li><a href = "#">Разделенная ссылка</a></li> <li class = "divider"></li> <li><a href = "#">Еще одна разделенная ссылка</a></li> </ul> </li> </ul> </div> </nav> <script> $(function(){ $(".dropdown-toggle").dropdown('toggle'); }); </script> |
