Cet article introduit l'utilisation de la liste déroulante du module Bootstrap pour votre référence. Le contenu spécifique est le suivant
1. Analyse du code source:
Dropdown.SCSS: module de boîte déroulante
Javascripts / bootstrap / dropdown.js: implémenter la réponse de la boîte déroulante
2. Fonctions et principes:
Tabs de traction vers le bas, la fonction de l'affichage des éléments sélectionnés ne peut pas être réalisé par défaut.
principe:
1. Utilisez la classe déroulante comme point d'ancrage, puis laissez la liste des enfants Dropdown-Menu la positionner absolument. Vous devez également ajouter un point de clic comme le réglage Data-Toggle = "Dropdown" pour faire l'association.
2. Besoin de prise en charge du plug-in JS
3. Analyse du code source:
1. Caret: implémenter le triangle vers le bas, en utilisant les frontières pour implémenter
1.1. La couleur de la bordure est la couleur de la police par défaut
1.2. Mise en œuvre de triangles: la bordure doit avoir une largeur, puis les côtés adjacents doivent avoir une largeur, mais la couleur est transparente; Enfin, l'élément doit être un élément de bloc dans la ligne pour faire sa hauteur et sa largeur 0.
1.3. Le code est le suivant
La copie de code est la suivante: <span style = "border-left: 4px solide; border-top: 4px solide transparent; border-bottom: 4px solide transparent; hauteur: 0px; width: 0px; line-height: normal; affichage: en ligne de bloc;"> </span>
2. L'événement d'écoute de clic est lié au document, et le type d'écoute est data-toggle = "dropdown".
3. La fonction de plugin écrite par le plugin JS et le constructeur de classe sont utilisées pour appeler le plugin à l'aide de la méthode JS;
4. Le mode Data- * appelle le plug-in, qui est utilisé pour injecter des événements dans le document, le code est le suivant:
$ (document) .on ('click.bs.dropdown.data-api', clearmenus) .on ('click.bs.dropdown.data-api', '.dropdown form', function (e) {e.stoppropagation ()}). on ('click.bs.dropdown.data-ap', toggle,. Dropdown.prototype.toggle) .on ('keydown.bs.dropdown.data-api', toggle, dropdown.prototype.keydown) .on ('keydown.bs.dropdown.data-api', '. Dropdown-menu', dropdown.prototype.keydown)Le code appelle directement la méthode définie par liste déroulante. La merveilleuse conception ici réside dans le cadre du plug-in, l'appel du mode Data- * et l'appel du mode plug-in JS, tandis que ces deux modes d'appel utilisent le même code.
5. Si vous l'appelez avec le plug-in JS, vous devez appeler vous-même les méthodes de base. Seul l'événement à bascule sera lié lors de la création d'une instance.
var dropdown = fonction (élément) {$ (élément) .on ('click.bs.dropdown', this.toggle)}6. ClearMenu: seul l'élément de Data-Toggle = "Dropdown" est effacé
7. Dropdown-BackDrop: Utilisé pour déplacer le traitement des événements sans clic
8. Keydown: Lorsque le bouton déroulant obtient le foyer, appuyez sur la touche pour vous développer et appuyez sur la touche supérieure pour rétrécir.
9. Data-Target et Herf = "# id": Pour réaliser un clic, développez la liste déroulante spécifiée. La valeur par défaut consiste à étendre les nœuds de frère derrière le bouton:
<ul> <li> <a> Index </a> </li> <li> <a> zhenglu </a> </li> <li> <a data-toggle = "dropdown" href = "# name"> outils utilisateur </a> </li> </ul> <div id = "name"> <ul> <li> <a> à propos de nous </a> </li> </ul>
10. Implémentez le sous-menu contextuel et utilisez le bas: 100% (positionnement du sous-menu pop-up inférieur) pour l'implémenter
11. Exemples d'application
<div id = "dropdown"> <a id = "dropdown-btn" data-target = "# dropdown"> numéro </a> <ul> <li> <a> 3343 </a> </li> <li> <a> 555 </a> </li> </ul> </div>
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.