Die JS-Komponente Bootstrap implementiert den Dropdown-Menüeffektcode_Javascript-Fähigkeiten-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:03:39

Original

1595 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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');

Nach dem Login kopieren

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 方法时立即触发！');
});

Nach dem Login kopieren

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>

Nach dem Login kopieren

Rendering:

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