Bootstrap Dropdown Plugin

Bootstrap DropdownDas vorherige Kapitel behandelte Dropdown-Menüs, ging jedoch nicht auf den Interaktionsteil ein. Dieses Kapitel erläutert die Interaktion von Dropdown-Menüs im Detail. Mit dem Dropdown-Plugin können Sie Dropdown-Menüs zu beliebigen Komponenten hinzufügen (wie Navigationsleisten, Registerkarten, Pill-Navigationen, Schaltflächen usw.).

Wenn Sie die Funktionalität dieses Plugins separat einbinden möchten, müssen Siedropdown.js.einbinden, wie im KapitelBootstrap Plugin Overviewbootstrap.jsoder die komprimierte Version vonbootstrap.min.js。

Nutzung

Sie können den versteckten Inhalt des Dropdown-Plugins umschalten:

  • Über Datenattribute: Fügen Sie einem Link oder einer Schaltflächedata-toggle="dropdown"hinzu, um das Dropdown-Menü umzuschalten, wie unten gezeigt:
    <div class="dropdown">
  <a data-toggle="dropdown" href="../index.html">下拉菜单（Dropdown）触发器</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

    Wenn Sie den Link intakt halten müssen (nützlich, wenn JavaScript im Browser nicht aktiviert ist), verwenden Sie stattdessen das Attributdata-targetattribute insteadhref="../index.html"：

    <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>
  • Über JavaScript: Um den Dropdown-Umschalter über JavaScript aufzurufen, verwenden Sie die folgende Methode:
    $('.dropdown-toggle').dropdown()

Beispiel

Innerhalb einer Navigationsleiste

Das folgende Beispiel demonstriert die Verwendung von Dropdown-Menüs innerhalb einer Navigationsleiste:

Beispiel

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Example</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="#">Another separated link</a></li> </ul> </li> </ul> </div> </div> </nav>

Ausprobieren »

Das Ergebnis wird unten angezeigt:

Innerhalb von Registerkarten (Tabs)

Das folgende Beispiel demonstriert die Verwendung von Dropdown-Menüs innerhalb von Registerkarten:

Beispiel

<p>Tabs mit Dropdown-Menüs</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>

Ausprobieren »

Das Ergebnis wird unten angezeigt:

带有下拉菜单的标签页

Optionen

Es gibt keine Optionen.

Methoden

Der Dropdown-Umschalter verfügt über eine einfache Methode zum Ein- oder Ausblenden des Dropdown-Menüs.

$().dropdown('toggle')

Beispiel

Das folgende Beispiel demonstriert die Verwendung der Methoden des Dropdown-Plugins:

Beispiel

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Example</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" data-toggle="dropdown">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="#">Separated link</a> </li> <li class="divider"></li> <li> <a href="#">Another separated link</a> </li> </ul> </li> </ul> </div> </div> </nav> </div> <script> $(function() { $(".dropdown-toggle").dropdown('toggle'); }); </script>

Ausprobieren »

Das Ergebnis wird unten angezeigt:

固定到顶部
Weitere Erweiterungen