He estado muy ocupado con el trabajo recientemente y estoy revisando un sistema. El fondo del proyecto fue desarrollado por MVC1.0, pero la parte front-end se ha modificado varias versiones, y los diseñadores anteriores son muy poderosos, y ambos están diseñando y el desarrollo frontal. Ya está muy de moda y de vanguardia, y utiliza el siempre popular kit de herramientas Bootstrap, y hay muchos que lo definen como un marco CSS front-end web. Para ser honesto, solo sabía antes que fue producido por Twitter y que la interfaz era mejor. Pero no se usó en proyectos reales. Mis nuevos colegas de la compañía hicieron esto antes y planearon usarlo en el proyecto de sitio web oficial de la compañía. Como no sé, el líder no está interesado en esto, por lo que es inútil. Ella dijo que cooperar con menos para trabajar en proyectos puede mejorar la eficiencia del desarrollo, y puede hacer que el sistema sea más hermoso y hermoso, pero también admite mejor el diseño adaptativo.
El requisito del proyecto es reemplazar la etiqueta Seleccionar nativa HTML con el efecto de cuadro desplegable que se muestra en la figura a continuación. Normalmente veo este tipo de demanda. Si quiero cambiar las etiquetas HTML nativas, no me gusta. Aunque también sé que las mismas funciones como select se pueden lograr a través de las etiquetas UI y Li y el código JavaScript, nunca he intentado escribirlas antes. Si hay algún problema con la compatibilidad del error y el navegador, me comunicaré con PM. ¿No debería cambiar esta selección? Usaré la selección nativa. PM dijo que es reducir la interferencia del usuario y permitir que los usuarios no presten demasiada atención a esta opción. Creo que esto es lo mismo. En primer lugar, no se ve tan exagerado como el selecto. En segundo lugar, la flecha desplegable es un poco pequeña, por lo que el usuario no hará clic demasiado deliberadamente. De hecho, hacer clic en ese texto también abrirá la lista desplegable a continuación.
Imagen (etiqueta de selección nativa de HTML) Imagen (representación final)
(Etiqueta de selección nativa HTML)
La función original de Select es hacer clic en la flecha desplegable a la derecha para abrir la lista desplegable y darle al usuario una selección. Cuando el usuario selecciona una opción, el valor en el cuadro de texto debe cambiarse al contenido de la opción correspondiente, y se puede obtener el valor de valor de la opción. Otra función muy importante es que la opción tiene una propiedad seleccionada. Si una opción ha seleccionado = "seleccionado", el cuadro desplegable seleccionará la opción actual de forma predeterminada.
Bootstrap proporciona un menú desplegable para hacer menús hermosos, y no es una función para elegir. Cuando lo busqué y lo vi, pensé que Bootstrap podría proporcionar un componente seleccionado similar al estilo desplegable de botones. Pero soy delirante. Sin este componente, el componente debe ser implementado. De hecho, he tenido experiencia escribiendo etiquetas seleccionadas con UL y Li, por lo que no es muy difícil escribir esto.
<div style = "margin-top: 30px;"> <a style = "font-size: 14px;" type = "Button" id = "DropDownMenu1" Data-Toggle = "Discutino"> Texto 1 <span> </span> </a> <ul role = "menú" Aria-LabelledBy = "Dropdownmenu1"> <li role = "presentación" valor => <a role = "menuitem" tabindex = "1" href = "#"> text 1 </a> </a> </li> </li> " role = "menuitem" tabindex = "2" href = "#"> Texto 2 </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "3" href = "#"> texto 3 </a> </li> </ul> </div>
Este es el código básico del menú desplegable del botón. Debido a que aplicará el estilo CSS en sí, necesitamos cambiar el estilo en bootstrap.min.css más tarde, por lo que necesitamos poner algunos estilos en esta página.
<! Doctype html> <html> <fead> <title> Bootstrap 101 plantilla </title> <meta name = "viewport" content = "width = dispositivo-width, inicial-escale = 1.0" charset = "utf-8"> <!-bootstrap-> <link href = "css/bootstrap.css" Rel = "styeT" type = "text/css">. btn-grupo.open .dropdown-toggle {-webkit-box-shadow: none; box-shadow: none;} </style> <!-[if 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><body><p>Original select tag</p><select><option value="1">Text 1</option><option value="2">Text 2</option><option value="3">Text 3 </option> </select> <div id = "desplegable1" "style =" margin-top: 30px; "> <div> <a style =" font-size: 14px; "type =" button "id =" desplegable de datos "Toggle de datos =" desplegable "> < 1 </span> <span> </span> </a> <ul = "menú" aria-labelledby = "desplegablemenu1"> <li role = "presentación" valor = "1"> <a role = "menuitem" tabindex = "1" href = "javascript: void (0);"> text 1 </a> </li> <li = "presente" vale " role = "menuitem" tabindex = "2" href = "javascript: void (0);"> texto 2 </a> </li> <li role = "presentación" valor = "3"> <a rol = "Menuitem" tabindex = "3" href = "javascript: void (0);"> text 3 </a> </li> </ul> <ul> <bri Los complementos JavaScript de Bootstrap)-> <script src = "js/jQuery-1.10.2.js"> </script> <!-Incluya todos los complementos compilados (abajo), o incluya archivos individuales según sea necesario-> <script src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript" CustomDrDropDown (ELE) {this.dropdown = ele; this.placeholder = this.dropdown.find (". PlaceHolder"); this.options = this.dropdown.find ("ul.dropdown-menu> li"); this.val = ''; this.index = -1; // El incumplimiento es -1; this.initEvents ();} CustomDropDown.Prototype = {inItevents: function () {var obj = this; // Este método no se puede escribir porque el evento de clics se captura por bootstrap mismo en sí mismo. la lista desplegable obj.options.on ("hacer clic", function () {var opt = $ (this); obj.text = opt.find ("a"). text (); obj.val = ópt.attr ("valor"); obj.index = opt.index (); obj.placeholder.text (obj.text);});},}, get () (): Functer (); this.Text;}, getValue: function () {return this.val;}, getIndex: function () {return this.index;}} $ (documento) .ready (function () {var mydropdown = new CustomDropDown ($ ("#Dropdown1");}); </script> </foding> </html>Aparecerá un fondo durante el proceso de clic. Ver los elementos a través de Chrome es el efecto de escribir el shodow de caja. Pero después de corregirlo, todavía apareció. Continuemos buscando mañana.
Agregue 1 línea de superposición de estilo, bootstrap.css dentro del estilo en sí.
<style type = "text/css">. btn-grupo.open .dropdown-toggle {-webkit-box-shadow: none; box-shadow: none;} </style>Nota: Durante el proceso de instancia, pasamos un objeto de un selector de jQuery, por lo que si una página tiene muchos desplegables personalizados, se utilizará la categoría. ¡Entonces debe modificar el código durante el proceso de instancia!
Dirección de demostración de demostración: http://liminjun.sinaapp.com/demo/customselect/index.html
Bootstrap CDN http://www.bootstrapcdn.com/ Aunque Baidu también lo tiene, la versión es un poco antigua y no se actualizará.
Sitio web oficial de Bootstrap http://getbootstrap.com/components/#btn-dropdowns