Maison > Article > interface Web > Bootstrap doit apprendre le menu déroulant tous les jours_compétences javascript

Bootstrap doit apprendre le menu déroulant tous les jours_compétences javascript

WBOYoriginal: 2016-05-16 15:30:031130parcourir

1. Menu déroulant (utilisation de base)

Amis, veuillez noter que le composant menu déroulant du framework Bootstrap est un composant indépendant Selon les différentes versions, son fichier correspondant :

☑ Version LESS : Le fichier de code source correspondant est dropdowns.less

☑ Version Sass : Le fichier de code source correspondant est _dropdowns.sass

☑ Version Bootstrap compilée : Afficher les lignes 3004 à 3130 du fichier bootstrap.css

Lorsque vous utilisez le menu déroulant du framework Bootstrap, vous devez appeler le fichier bootstrap.js fourni par le framework Bootstrap. Bien entendu, si vous utilisez la version non compilée, vous pouvez trouver un fichier nommé « dropdown.js » dans le dossier js. Vous pouvez également appeler ce fichier js. Cependant, dans notre tutoriel, nous appelons uniformément le fichier compressé « bootstrap.min.js » :

Copier le code Le code est le suivant :

73f1c90668ef64b5710014cdd37142de2cacc6d41bbb37262a98f745aa00fbf0

Déclaration spéciale : Étant donné que les effets d'interaction des composants de Bootstrap reposent tous sur des plug-ins écrits par la bibliothèque jQuery, jquery.min doit être chargé avant d'utiliser bootstrap.min.js .js produira l’effet.

Regardons d'abord un exemple simple sur le site officiel :

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
 …
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>

Utilisation :

Lors de l'utilisation du composant de menu déroulant dans le framework Bootstrap, il est très important d'utiliser la structure correcte. Si la structure et le nom de la classe ne sont pas utilisés correctement, cela affectera directement si le composant peut être utilisé normalement. Jetons un coup d'oeil rapide :

1. Utilisez un conteneur nommé "dropdown" pour envelopper l'intégralité de l'élément de menu déroulant. Dans l'exemple :

2. Utilisez un bouton bb9345e55eb71822850ff156dfde57c8 comme menu parent et définissez le nom de la classe "dropdown-toggle" et l'attribut personnalisé "data-toggle", et la valeur doit être cohérente avec le nom de la classe du conteneur le plus externe, cet exemple pour :

data-toggle="dropdown"

3. L'élément de menu déroulant utilise une liste ul et définit un nom de classe "dropdown-menu".

a03e72f68170606d7442fa279cbc8f14

Exemple

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 选择你喜欢的水果
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
 </ul>
</div> 
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

2. Menu déroulant (analyse du principe)

Le composant de menu déroulant dans le framework Bootstrap, ses éléments de menu déroulant sont masqués par défaut, comme indiqué ci-dessous :

Étant donné que le style par défaut du "menu déroulant" est défini sur "display:none", veuillez consulter le code source détaillé des lignes 3010 à 3029 du fichier bootstrap.css :

.dropdown-menu {
 position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/
 top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
 left: 0;
 z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/

 display: none;/*默认隐藏下拉菜单项*/

 float: left;
 min-width: 160px;
 padding: 5px 0;
 margin: 2px 0 0;
 font-size: 14px;
 list-style: none;
 background-color: #fff;
 background-clip: padding-box;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, .15);
 border-radius: 4px;
 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

Lorsque l'utilisateur clique sur l'élément de menu parent, le menu déroulant sera affiché. Lorsque l'utilisateur clique à nouveau, le menu déroulant continuera à être masqué.

Analyse des principes :

Analysons maintenant le principe d'implémentation. C'est très simple. Grâce à la technologie js, ajoutez ou supprimez le nom de la classe "open" au conteneur parent "div.dropdown" pour contrôler l'affichage ou le masquage du menu déroulant. C'est-à-dire que par défaut, « div.dropdown » n'a pas le nom de classe « open ». Lorsque l'utilisateur clique pour la première fois, « div.dropdown » ajoutera le nom de classe « open » lorsque l'utilisateur clique ; encore une fois, "div.dropdown" "Le nom de classe "open" dans le conteneur sera à nouveau supprimé. Nous pouvons visualiser l'ensemble du processus via le firebug du navigateur :

Par défaut :

Premier clic de l'utilisateur :

L'utilisateur clique à nouveau :

Dans les lignes 3076 à 3078 du fichier bootstrap.css, on retrouve facilement :

.open > .dropdown-menu {
 display: block;
}

三、下拉菜单（下拉分隔线）

在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的25edfb22a4f469ecb59f1190150159c6，并且给这个25edfb22a4f469ecb59f1190150159c6添加类名“divider”来实现添加下拉分隔线的功能。对应的样式代码：

/源码bootstrap.css文件第3034行～第3039行/

.dropdown-menu .divider {
 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;
}

示例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉分隔线</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
 <div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 食物
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li>
  <li role="presentation" class ="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">米饭</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">馒头</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">面条</a></li>
 </ul>
</div> 
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

效果如下：

四、下拉菜单（菜单标题）

上一小节讲解通过添加“divider”可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）。如下：

复制代码代码如下:

b3ff206d9cf8201ea241cbfdc6db3677第一部分菜单头部bed06894275b65c1ab86501b08a632eb

对应的样式如下：

/查看bootstrap.css文件第3090行～第3096行/

.dropdown-header {
 display: block;
 padding: 3px 20px;
 font-size: 12px;
 line-height: 1.42857143;
 color: #999;
}

示例

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 食物
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation" class="dropdown-header">蔬菜</li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation" class="dropdown-header">主食</li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">米饭</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">馒头</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">面条</a></li>
 </ul>
</div>

运行效果如下：

五、下拉菜单（对齐方式）

实现右对齐方法：

Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，如下所示：

复制代码代码如下:

23931cd206438d0accbd5a2a262f600a

上面代码中的“pull-right”类可以用“dropdown-menu-right”代替，两个类的作用是一样的，可从下面的源代码中看出。

实现原理：

对应的样式如下：

/源码请查看bootstrap.css文件第3030行～第3033行和3082行～第3085行/

.dropdown-menu.pull-right {
 right: 0;
 left: auto;
}
.dropdown-menu-right {
 right: 0;
 left: auto;
}

同时一定要为.dropdown添加float:leftcss样式。

.dropdown{
 float: left;
}

运行效果如下所示：

下拉菜单与父容器左边对齐:

与此同时，还有一个类名刚好与“dropdown-menu-right”相反的类名“dropdown-menu-left”，其效果就是让下拉菜单与父容器左边对齐，其实就是默认效果。

/请查看bootstrap.css文件第3086行～第3089行/

.dropdown-menu-left {
 right: auto;
 left: 0;
}

六、下拉菜单（菜单项状态）

下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）：

/查看bootstrap.css文件第3049行～第3054行/

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
 color: #262626;
 text-decoration: none;
 background-color: #f5f5f5;
}

下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名：

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 下拉菜单
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
 ….
 <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
 </ul>
</div>

运行效果如下：

对应的样式代码也非常简单：

/请查看bootstrap.css文件第3055行～第3075行/

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
 color: #fff;
 text-decoration: none;
 background-color: #428bca;
 outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
 color: #999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

以上就是本文的全部内容，希望对大家的学习有所帮助。

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：Implémenter la fonction d'enregistrement du calendrier basée sur jquery_jqueryArticle suivant：Implémenter la fonction d'enregistrement du calendrier basée sur jquery_jquery

Articles Liés

Voir plus