Le composant JS Bootstrap implémente les compétences code_javascript de l'effet de menu déroulant-js tutoriel-php.cn

Le composant JS Bootstrap implémente les compétences code_javascript de l'effet de menu déroulant

WBOY

Libérer： 2016-05-16 15:03:39

original

1599 Les gens l'ont consulté

Menu déroulant Bootstrap Ce chapitre explique le menu déroulant, mais n'implique pas la partie interaction. Ce chapitre expliquera l'interaction du menu déroulant en détail. À l'aide du plugin Dropdown, vous pouvez ajouter un menu déroulant à n'importe quel composant (tel qu'une barre de navigation, une page à onglet, un menu de navigation de capsule, un bouton, etc.).

Si vous souhaitez référencer les fonctionnalités de ce plugin séparément, vous devez alors référencer dropdown.js. Alternativement, comme mentionné dans le chapitre de présentation du plugin Bootstrap, vous pouvez référencer bootstrap.js ou une version minifiée de bootstrap.min.js.

1.Utilisation
Vous pouvez activer ou désactiver le contenu masqué du plugin Dropdown :

1. Via l'attribut data : ajoutez data-toggle="dropdown" au lien ou au bouton pour basculer le menu déroulant, comme indiqué ci-dessous :

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

Copier après la connexion

Si vous devez conserver le lien intact (utile lorsque le navigateur n'active pas JavaScript), utilisez l'attribut data-target au lieu de 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>

Copier après la connexion

2. Via JavaScript : Pour appeler le menu déroulant via JavaScript, veuillez utiliser la méthode suivante :
$('.dropdown-toggle').dropdown()

2. Exemple simple de menu déroulant
En utilisation normale, le code est le même que la méthode du composant :

//声明式用法

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

Copier après la connexion

Noyau clé de l'utilisation déclarative :
1. Utilisez class="dropdown" pour envelopper les conteneurs périphériques
2. Liaison d'événement de bouton de clic interne data-toggle="dropdown"
3. Utilisez class="dropdown-menu" pour les éléments de menu.

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

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

$('#btn').dropdown();
$('#btn').dropdown('toggle');

Copier après la connexion

Le menu déroulant prend en charge 4 types d'événements, correspondant à avant le pop-up, après le pop-up, avant la fermeture et après la fermeture.

//事件，其他雷同

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

Copier après la connexion

3. Utilisation du menu déroulant dans la page à onglet

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

Copier après la connexion

Rendu :

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.