Bootstrap - Плагин для раскрывающегося списка

: Категория: Bootstrap 3; Опубликовано: 23 сентября 2018; Просмотров: 1571

С помощью Dropdown-плагина вы можете добавлять выпадающие меню для любых компонентов, таких как navbars, вкладки, pills и кнопки.

Содержание:

Применение
Внутри Navbar
Внутри вкладок
Методы

Применение

Вы можете переключать скрытый контент выпадающего плагина -

Через атрибуты данных - добавьте 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 = "/page.html">
      Dropdown
      <span class = "caret"></span>
   </a>
  
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
           
</div>

С помощью JavaScript - Чтобы вызвать выпадающий тумблер с помощью JavaScript, используйте следующий метод -
```
$('.dropdown-toggle').dropdown()
```

Внутри Navbar

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

<nav class = "navbar navbar-default" role = "navigation">
 
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</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 = "#">Separated link</a></li>
              
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
           
         </li>
      </ul>
   </div>
  
</nav>

Внутри вкладок

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

<p>Tabs With Dropdown Example</p>
 
<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</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 = "#">Separated link</a></li>
      </ul>
     
   </li>
           
   <li><a href = "#">PHP</a></li>
</ul>

Методы

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

$().dropdown('toggle')

Bootstrap - Плагин для раскрывающегося списка

Применение

Внутри Navbar

Внутри вкладок

Методы

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

Поделиться в соцсетях

Подписаться на канал

ТОП-10 статей

Свежие записи