Последние новости:

Поиск по сайту:

Иной сходит в могилу ста лет, а умер едва родившись (Ж.-Ж. Руссо).

Bootstrap — Плагин Dropdown

3 мин для чтения
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
07.11.2017
Bootstrap - Плагин Dropdown

С помощью использования плагина DropDown можно добавить выпадающее меню для любых компонентов, таких как навигационная панель, вкладки, таблетка и кнопки.

Если вы хотите включить эту функциональность плагина в отдельности, то вам нужно подключить dropdown.js. В противном случае, как уже упоминалось в главе Bootstrap — Обзор плагинов, вы можете подключить c gjvjom. bootstrap.js или минимизированный bootstrap.min.js.

Применение

Вы можете включить плагин ниспадающего меню следующем образом:

  • С помощью атрибутов data — Добавление data-toggle = «dropdown» на ссылку или кнопку для переключения выпадающего меню, как показано ниже:
<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 = «#»:
<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, используйте следующий метод:
$('.dropdown-toggle').dropdown()

Пример

В навигационной панели

Следующий пример демонстрирует использование выпадающего меню в пределах навигационной панели:

<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>

Во вкладках

Следующий пример демонстрирует использование выпадающего меню во вкладках:

<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>

Опции

Нет опций

Методы

Выпадающий переключатель имеет простой метод, чтобы показать или скрыть выпадающий список.

$().dropdown('toggle')

Пример

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

<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>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Если статья понравилась, то поделитесь ей в социальных сетях:

Читайте также

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Статьи партнеров:

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить

Спасибо! Ваша заявка принята

close

Спасибо! Ваша заявка принята

close