recherche

Maison >interface Web >js tutoriel >Le composant JS Bootstrap implémente les compétences code_javascript de l'effet de menu déroulant

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

WBOY
WBOYoriginal
2016-05-16 15:03:391586parcourir

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>

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>

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>

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

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


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>

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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des compétences du plug-in_javascript de surveillance du défilement Bootstrap (Scrollspy)Article suivant：Explication détaillée des compétences du plug-in_javascript de surveillance du défilement Bootstrap (Scrollspy)

Articles Liés

Voir plus