J'ai été très occupé par le travail récemment et je révise un système. Le contexte du projet a été développé par MVC1.0, mais la partie frontale a été modifiée plusieurs versions, et les concepteurs précédents sont très puissants, et ils sont à la fois conçus et développement frontal. Il est déjà très à la mode et de pointe, et utilise la boîte à outils Bootstrap toujours populaire, et il y en a beaucoup qui la définissent comme un cadre CSS frontal. Pour être honnête, je ne savais qu'auparavant qu'il était produit par Twitter et l'interface était meilleure. Mais il n'a pas été utilisé dans les projets réels. Mes nouveaux collègues de l'entreprise l'ont déjà fait et prévoyaient de l'utiliser dans le projet de site Web officiel de la société. Parce que je ne sais pas, le leader n'y est pas intéressé, donc c'est inutile. Elle a déclaré que coopérer avec moins de travail sur des projets peut améliorer l'efficacité du développement et rendre le système plus beau et plus beau, mais il prend également en charge la conception adaptative.
L'exigence du projet est de remplacer la balise HTML native SELECT par l'effet de boîte déroulant illustré dans la figure ci-dessous. Je vois généralement ce genre de demande. Si je veux changer les balises HTML natives, je n'aime pas ça. Bien que je sache également que les mêmes fonctions que SELECT peuvent être réalisées via les balises d'interface utilisateur et Li et le code JavaScript, je n'ai jamais essayé de les écrire auparavant. S'il y a un problème avec la compatibilité du bug et du navigateur, je communiquerai avec PM. Dois-je ne pas modifier ce choix? J'utiliserai le SELECT natif. PM a déclaré que c'était pour réduire les interférences des utilisateurs et permettre aux utilisateurs de ne pas accorder trop d'attention à cette option. Je pense que c'est la même chose. Tout d'abord, il ne semble pas aussi exagéré que le Select. Deuxièmement, la flèche déroulante est un peu petite, donc l'utilisateur ne cliquera pas trop délibérément. En fait, cliquer sur ce texte ouvrira également la liste déroulante ci-dessous.
Image (HTML Native Select Tag) Image (rendu final)
(HTML Native Select Tag)
La fonction d'origine de Select est de cliquer sur la flèche déroulante à droite pour ouvrir la liste déroulante et donner à l'utilisateur une sélection. Lorsque l'utilisateur sélectionne une option, la valeur dans la zone de texte doit être modifiée dans le contenu de l'option correspondante et la valeur de la valeur de l'option peut être obtenue. Une autre fonction très importante est que cette option a une propriété sélectionnée. Si une option a sélectionné = "sélectionné", la boîte déroulante sélectionnera l'option actuelle par défaut.
Bootstrap fournit une liste déroulante à bouton pour créer de beaux menus, et ce n'est pas une fonction à choisir. Lorsque j'ai cherché et vu, je pensais que Bootstrap pouvait fournir un composant sélectionné similaire au style déroulant des bouton. Mais je suis délirant. Sans ce composant, le composant doit être implémenté. En fait, j'ai eu de l'expérience dans la rédaction de balises sélectionnées avec UL et Li, il n'est donc pas très difficile d'écrire ceci.
<div style = "margin-top: 30px;"> <a style = "font-size: 14px;" type = "Button" id = "DropdownMenu1" data-toggle = "dropdown"> text 1 <span> </span> </a> <ul role = "menu" aria-labelledBy = "dropdownmenu1"> <li role = "présentation" value => <a role = "Menuitem" tabinDEX = "1" href = "#"> text 1 </a> role = "menutem" tabindex = "2" href = "#"> text 2 </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "3" href = "#"> Texte 3 </a> </li> </ul> </div>
Il s'agit du code de base de la liste déroulante des bouton. Parce qu'il appliquera le style CSS lui-même, nous devons changer le style dans bootstrap.min.css plus tard, nous devons donc mettre des styles sur cette page.
<! Doctype html> <html> <éadf> <tight> Bootstrap 101 Template </ title> <meta name = "Viewport" contenu = "width = device-width, initial-scale = 1.0" charset = "utf-8"> <! - bootstrap -> <lien href = "css / bootstrap.css" rel = "style"> <style " type = "text / css">. btn-group.open .dropdown-toggle {-webkit-box-shadow: non; box-shadow: aucun;} </ style> <! - [si lt ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script> <! [ENDIF] -> </ head> <pody> <p> Original Select Tag </p> <lelect> <option value = "1"> Text 1 "Option> <option Value =" 2 "" 3 </opoption> </ select> <div id = "dropdown1" "style =" margin-top: 30px; "> <v> <a style =" font-size: 14px; "type =" bouton "id =" dropdownmenu1 "data-toggle =" dropdown "> <! - Après la sélection de l'option, la valeur sélectionnée doit être affichée ici, similaire à la zone de texte dans la sélection d'origine -> <panneuse> 1 </span> <span> </span> </a> <ul role = "menu" aria-labelledBy = "DropdownMenu1"> <li role = "présentation" value = "1"> <a role = "MenuUtem" tabindex = "1" href = "javascript: void (0); "> Text 1 </a> </li> <li role =" présentation " role = "MenuItem" tabindex = "2" href = "JavaScript: void (0);"> text 2 </a> </li> <li role = "présentation" value = "3"> <a role = "menuitem" tabindex = "3" href = "javascript: void (0);"> text 3 </a> </li> </ul> Les plugins JavaScript de bootstrap) -> <script src = "js / jQuery-1.10.2.js"> </ script> <! - Incluent tous les plugins compilés (ci-dessous), ou incluent des fichiers individuels selon les besoins -> <script src = "js / javascript"> fonction CustomDropDown (ele) {this.dropdown = ele; this.placeholder = this.dropdown.find (". placeholder"); this.options = this.dropdown.find ("ul.dropdown-menu> li"); this.val = ''; this.index = -1; // default est -1; this.initevents ();} CustomDropDown.prototype = {initeVants: function () {var obj = this; // Cette méthode ne peut pas être écrite car l'événement de clic est capturé par Bootstrap lui-même. de la liste déroulante obj.options.on ("cliquez", function () {var opt = $ (this); obj.text = opt.find ("a"). text (); obj.val = opt.attr ("value"); obj.index = opt.index (); obj.placehat this.text;}, getValue: function () {return this.val;}, getIndex: function () {return this.index;}} $ (document) .ready (function () {var myDropdown = new CustomDropdown ($ ("# dropdown1"));}); </script> </ody> </html>Un arrière-plan apparaîtra pendant le processus de clic. La visualisation des éléments via Chrome est l'effet de l'écriture de box-shodow. Mais après l'avoir corrigé, il est toujours apparu. Continuons à chercher demain.
Ajoutez une superposition de 1 ligne de style, bootstrap.css à l'intérieur du style lui-même.
<style type = "text / css">. btn-group.open .dropdown-toggle {-webkit-box-shadow: non; box-shadow: non;} </ style>Remarque: Pendant le processus d'instanciation, nous passons dans un objet d'un sélecteur jQuery, donc si une page a de nombreuses départs personnalisés, la catégorie sera utilisée. Ensuite, vous devez modifier le code pendant le processus d'instanciation!
Adresse de démonstration de démonstration: http://liminjun.sinaapp.com/demo/customselect/index.html
Bootstrap cdn http://www.bootstrapcdn.com/ Bien que Baidu ait également, la version est un peu ancienne et ne sera pas mise à jour.
Bootstrap Site Web officiel http://getbootstrap.com/components/#btn-dropdowns