suchen

Heim  >  Artikel  >  Web-Frontend  >  Die JS-Komponente Bootstrap implementiert den Dropdown-Menüeffektcode_Javascript-Fähigkeiten

Die JS-Komponente Bootstrap implementiert den Dropdown-Menüeffektcode_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:03:391580Durchsuche

Bootstrap-Dropdown-Menü Dieses Kapitel erklärt das Dropdown-Menü, bezieht sich jedoch nicht auf den Interaktionsteil. In diesem Kapitel wird die Interaktion des Dropdown-Menüs im Detail erläutert. Mit dem Dropdown-Plugin können Sie ein Dropdown-Menü zu jeder Komponente hinzufügen (z. B. Navigationsleiste, Registerkartenseite, Kapselnavigationsmenü, Schaltfläche usw.).

Wenn Sie die Funktionalität dieses Plugins separat referenzieren möchten, müssen Sie auf dropdown.js verweisen. Alternativ können Sie, wie im Kapitel „Übersicht über das Bootstrap-Plugin“ erwähnt, auf bootstrap.js oder eine minimierte Version von bootstrap.min.js verweisen.

1. Verwendung
Sie können den ausgeblendeten Inhalt des Dropdown-Plugins umschalten:

1. Über das Datenattribut: Fügen Sie data-toggle="dropdown" zum Link oder zur Schaltfläche hinzu, um das Dropdown-Menü umzuschalten, wie unten gezeigt: 

<div class="dropdown">
 <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
 </ul>
</div>

Wenn Sie den Link intakt halten müssen (nützlich, wenn der Browser kein JavaScript unterstützt), verwenden Sie das data-target-Attribut anstelle von 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>

2. Über JavaScript: Um die Dropdown-Menüumschaltung über JavaScript aufzurufen, verwenden Sie bitte die folgende Methode:
$('.dropdown-toggle').dropdown()

2. Einfaches Beispiel eines Dropdown-Menüs
Bei normaler Verwendung ist der Code derselbe wie die Komponentenmethode: 

//声明式用法

<div class="dropdown">
  <button class="btn btn-primary" 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>
     <li><a href="#">关于</a></li>
  </ul>
</div>

Wichtiger Kern der deklarativen Verwendung:
1. Verwenden Sie class="dropdown", um periphere Container einzuschließen 2. Interne Click-Button-Ereignisbindung data-toggle="dropdown"
3. Verwenden Sie class="dropdown-menu" für Menüelemente. 

//如果按钮在容器外部，可以通过 data-target 进行绑定。

<button class="btn btn-primary" id="btn" data-toggle="dropdown"
data-target="#dropdown">
在 JavaScript 调用中，没有属性，方法并不好用，下面介绍四个基本事件。
//下拉菜单方法，但仍然需要 data-*

$('#btn').dropdown();
$('#btn').dropdown('toggle');
Das Dropdown-Menü unterstützt 4 Arten von Ereignissen: vor dem Pop-up, nach dem Pop-up, vor dem Schließen und nach dem Schließen. 

//事件，其他雷同

$('#dropdown').on('show.bs.dropdown', function() {
  alert('在调用 show 方法时立即触发！');
});

3. Verwendung des Dropdown-Menüs auf der Registerkartenseite

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例 - 带有下拉菜单的标签页</title>
  <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script src="/scripts/jquery.min.js"></script>
  <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<p>带有下拉菜单的标签页</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="#">分离的链接</a></li>
   </ul>
  </li>
  <li><a href="#">PHP</a></li>
</ul>
 
</body>
</html>
Rendering:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Plug-in-Javascript-Fähigkeiten von Bootstrap Scroll Monitoring (Scrollspy).Nächster Artikel：Detaillierte Erläuterung der Plug-in-Javascript-Fähigkeiten von Bootstrap Scroll Monitoring (Scrollspy).

In Verbindung stehende Artikel

Mehr sehen