Capítulo de bienestar de la serie de componentes Bootstrap Varios componentes útiles (recomendado 2)

En el artículo anterior, introduje varios componentes útiles en la serie de componentes Bootstrap (recomendado). A continuación, este artículo presenta varios componentes útiles en la serie de componentes Bootstrap (recomendado 2). ¡Los amigos interesados ​​aprenderán juntos!

7. Manifiesto de componente de entrada múltiple de valor

Con respecto a la entrada de múltiples valores de cuadros de texto, siempre ha sido un requisito común. Hoy, el blogger recomienda un componente útil de entrada de valor múltiple para todos. ¡No me agradezcas, por favor llámame "Bufanda roja"!

1. Muestra de efecto

Cuadro de entrada de valor múltiple local

Cuadro de entrada de valor múltiple remoto

2. Descripción del código fuente

Gracias a la comunidad de código abierto y a esas personas lindas a las que les gusta compartir. Dirección de código abierto.

3. Ejemplos de código

(1) Entrada local de valores múltiples

Primero, debe hacer referencia a los siguientes archivos

 <link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/jQuery-manifest-Master/src/jquery.manifest.css" rel = "stylesheet"/> <script src = "~/content/content/jQuery-1.9.1.1.js" src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jQuery-manifest-Master/build/piezas/jquery.ui.widget.js"> </script> <script src = "~/content/jQuery-manifest-master/build/jQuery.manifest.js"

Los archivos JS y CSS de Bootstrap no son necesarios. Este artículo es por el bien del buen estilo, por lo que se hace referencia. El componente manifiesto no depende de Bootstrap, sino que depende de jQuery. Además, también debe consultar tres archivos: jQuery.Manifest.css, jQuery.ui.widget.js y jQuery.marcopolo.js.

Luego está la inicialización de HTML y JS

 <input type = 'text' autoComplete = "off" id = "txt_man"/> <script type = "text/javascript"> $ (function () {$ ('#txt_man'). manifest ();}); </script>

A través de los simples pasos como anteriormente, se puede producir el efecto anterior. ¿No es muy simple? Echemos un vistazo a algunos de sus usos

 // Propiedades comunes: obtenga la colección de todos los elementos en el cuadro de texto Valos var valores = $ ('#txt_man'). Manifest ('valores'); // Método común 1: Elimine el último elemento $ ('#txt_man'). Manifest ('remover', ': Last'); // Common Method 2: Agregue un nuevo elemento en el cuadro de texto del elemento. El formato del segundo parámetro se determina mediante el formato de datos JSON $ ('#txt_man'). Manifest ('add', {id: "1", nombre: "ABC"}); // Método común 3: Obtenga la lista de datos buscados remotamente $ ('#txt_man'). Manifest ('List'); // $ ('#txt_man'). on ('manifeStAdd', function (event, data, $ item, inicial) {// alerta ("El elemento recién agregado es:"+data);}); // Common Event 2: Eliminar el evento $ ('#txt_man'). On ('manifestremove', función (evento, data, $ item) {});///evento común 3: 3: Event 3: Event 3: Event Event. $ ('#txt_man'). on ('ManifestSelect', function (Event, Data, $ item) {});

(2) entrada de valor múltiple remoto

La forma de entrada de búsqueda remota requiere que proporcionemos una dirección de URL, obtengamos los datos y luego regresemos al navegador. Para simplificar, este artículo utiliza directamente la URL en el sitio web del código fuente para mostrar el efecto.

Primero, debe hacer referencia al archivo JS

 <link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/jQuery-manifest-Master/src/jquery.manifest.css" rel = "stylesheet"/> <script src = "~/content/content/jQuery-1.9.1.1.js" src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jQuery-manifest-master/build/piezas/jquery.ui.widget.js"> </script> <script src = "~/content/jQuery-Manifest-Master/Build/Parts/jQuery.Marcopolo.js"> </script> <script src = "~/content/jQuery-manifest-master/build/jQuery.manifest.js"> </script> </script>

En comparación con lo anterior, hay una referencia adicional al archivo jQuery.Marcopolo.js.

Luego está la inicialización de HTML y JS

 <Form Action = "https://api.foursquare.com/v2/venues/search?callback=?" método = "get"> <iv> <viv> <input type = 'text' id = "txt_man2"/> <img src = "~/content/jQuery-manifest-Master/buckone.gif"/> </div> </div> </form> <script type = "text/javascript"> $ (function () {$ ('#txt_man2'). (datos, $ item, $ mpitem) {return data.name;}, formatValue: function (data, $ value, $ item, $ mpitem) {return data.id;}, marcopolo: {data: {client_id: 'NO2MTQVBQANW3Q3SG23OFVMegYOWIZDT4E1QHRPZO0BFCN4X', Client_Secret: 'LG2WRKKS1SXZ2FMKDG01LDW1KDTEKKTULMXMM0XEVWRN0LLHB', IM '20150601'}, formatData: function (data) {return data.Response.venues;}, formatitem: function (data, $ item) {return data.name;}, minchars: 3, param: 'consulta'}, requerido: verdadero});}); </script>

En cuanto a la importancia de cada parámetro, debe ser fácil de entender si lo necesita. El blogger monitoreó brevemente el valor de retorno de este método de búsqueda remota

Si un amigo del parque tiene la intención de usar este método remoto por sí mismo, puede consultar este formato de datos para implementarlo.

8. Caja de texto Búsqueda Componente Bootstrap-TypeRehead

De hecho, muchos componentes tienen esta función con respecto a la función de la búsqueda del cuadro de texto. Por ejemplo, hay un componente autocompletado en la interfaz de usuario jQuery que el blogger usó para lograr la finalización automática. Los componentes de búsqueda automáticos de los cuadros de texto Bootstrap están surgiendo en línea. La razón por la que elegí este componente hoy es porque creo que es similar al estilo de Bootstrap, y los componentes son más pequeños, simples y prácticos.

1. Muestra de efecto

Búsqueda estática local (la fuente de datos es local)

Búsqueda remota (la fuente de datos se recupera de forma remota a través de la solicitud AJAX)

2. Descripción del código fuente

Descripción del código fuente

3. Ejemplos de código

El primer archivo al que debe referenciarse: principalmente contiene un archivo CSS y un archivo JS. Necesita apoyo de jQuery y bootstrap.

 <link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/twitter-bootstrap-typeeahead-Master/twitter-bootstrap-typeeahead-master/demo/css/prettify.css" Rel = "Stylesheet"/> <scripty <script <scripty <script " src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/bootstrap/js/bootstrap.js"> </script> <script src = "~/twitter-bootstrap-typehead-Master/twitter-bootstrap-typehead-master/js/bootstrap-typeahead

Entonces la inicialización del componente

 <input type = 'text' id = "txt_man" />

Fuente de datos localmente

 <script type = "text/javaScript"> $ (function () {$ ("#txt_man"). typeahead ({fuente: [{key: 1, valor: 'toronto'}, {key: 2, valor: 'Montreal'}, {key: 3, valor: 'Nueva York'}, {key: 4, valor: 'buffalo'}, {key: 5, value ' }, {clave: 6, valor: 'columbus'}, {clave: 7, valor: 'dallas'}, {clave: 8, valor: 'vancouver' {clave: 9, valor: 'seattle'}, {key: 10, valor: 'Los Ángeles'}], visual

La fuente de datos se obtiene a través de la solicitud AJAX

 <script type="text/javascript">$(function () {$("#txt_man").typeahead({ajax: {url: '/Home2/TypeaheadData',timeout: 300,method: 'post',triggerLength: 1,loadingClass: null,displayField: null,preDispatch: null,preProcess: null},display: "valor", val: "clave"});}); </script>

Método de prueba correspondiente al fondo

 public jsonResult typeaHeadData () {var lStres = new List <S Object> (); for (var i = 0; i <20; i ++) lstres.add (new {key = i, value = guía.newguid (). toString (). Substring (0, 4)}); return jSon (lstRes, jsonRequestbehavior.AloLOWIRIOR);};};}

Propiedades comunes:

• Pantalla: se muestra el nombre de campo

• Val: el valor real

• Elementos: el número de resultados de búsqueda que se muestran de forma predeterminada. El valor predeterminado es 8

• Fuente: fuente de datos local, formateada como una matriz.

• Ajax: el objeto solicitado por AJAX puede ser directamente una URL de cadena o un objeto de objeto. Si es un objeto de objeto, no hablaré de URL. La propiedad TriggerLength indica que la entrada de varios caracteres desencadena la búsqueda.

Eventos de uso común:

• Elemento seleccionado: activado cuando se selecciona el valor de búsqueda.

 <script type="text/javascript">$(function () {$("#txt_man").typeahead({ajax: {url: '/Home2/TypeaheadData',timeout: 300,method: 'post',triggerLength: 1,loadingClass: null,displayField: null,preDispatch: null,preProcess: null},display: "value",val: "Key", itemSelected: function (item, val, text) {}});});

El elemento de parámetro representa el objeto seleccionado, el parámetro Val representa el valor real del elemento seleccionado y el texto representa el valor mostrado del elemento seleccionado.

9. Componente de paso de arranque

Con respecto al componente de paso Bootstrap, el artículo anterior introdujo un widget Ystep. Puede desempeñar un papel cierto al ver el progreso de la tarea, pero para algunas empresas complejas, es un poco impotente lidiar con el negocio correspondiente de acuerdo con los pasos actuales. Hoy, el blogger introducirá un componente de paso que tiene un muy buen efecto. Con este componente, los programadores ya no tienen que preocuparse por el diseño de pasos complejos.

1. Muestra de efecto

Vislumbra el estilo

Siga los pasos para "paso anterior" y "siguiente paso"

Más pasos

2. Descripción del código fuente

Este componente fue encontrado por el blogger en línea. Vi que muchos estilos y usos son de Bootstrap. Lo único a lo que debo referirme es un archivo JS y un CSS. La fuente del código fuente aún no se ha encontrado. Si alguien conoce la fuente del código fuente, puede decirle al blogger. Además, para respetar los resultados laborales del autor, ¡el blogger debe respetar la originalidad!

3. Ejemplos de código

Archivos a los que deben ser referenciados

 <link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-step/css/bs-is-fun.css" rel = "stylesheet"/> <script src = "~/content/jQuery-1.9.1.js"> <script " src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-step/js/pchinch.js"> </script>

BS-IS-FUN.CSS y Brush.js deben ser referenciados, y los componentes necesitan el soporte de jQuery y Bootstrap.

Luego está la inicialización del componente.

(1) flecha

 <ul> <li> <a> paso1 </a> </li> <li> <a> paso2 </a> </li> <li> <a> paso3 </a> </li> </ul>

Si se trata de un paso estático, solo necesita el código HTML anterior para ver el efecto del paso de flecha en la imagen de arriba. El estilo activo aquí representa el estilo que ha pasado el paso.

(2) cuadrado

 <ul> <li> <a> paso1 </a> </li> <li> <a> paso2 </a> </li> <li> <a> paso3 </a> </li> </ul>

(3) Forma circular

 <ul> <li> <a> paso1 </a> </li> <li> <a> paso2 </a> </li> <li> <a> paso3 </a> </li> </ul>

(4) Barra de progreso

 <ul> <li> <a> step1 <span> </span> </a> </li> <li> <a> step2 <span> </span> </a> </li> <li> <a> pase3 <span > </span> </a> </li> <li> <a> step4 <span> </span> </a> </li> <li> <a> step5 <span> </span> </a> </li> </ul>

(5) Paso anterior, siguiente paso

El "paso anterior" y el "siguiente paso" en la imagen de arriba se definen por usted mismo en el componente modal de arranque, o son el código publicado para su referencia.

 <div id = "myModalNext"> <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-label = "cerrar"> <span aria-hidden = "true"> × </span> </botón> <h4> Configuración de opción </h4> <ul> <li> <a> paso 1 </span> </a> </li> <li> 2 <span> </span> </a> </li> <li> <a> paso 3 <span> </span> </a> </li> <li> <a> paso 4 <span> </span> </a> </li> </li> </li> </li> </div> <div> <divs data data-ride = "Carousel" data-interval = "false" data-wh-wwrap = "" role = "ListBox"> <Viv> <p> Paso 1 </p> <iv> Configure el rol </div> <div> <input type = "text"/> </div> <div> <button type = "botón"> guardar </botón> </div> <div> <p> Paso 2 </p> <div> configure el usuario </iv> <div> <divs> type = "text"/> <div> <div> <div> <button> <div> type = "Button"> Guardar </botón> </div> <div> <p> paso 3 </p> </div> <div> <p> paso 4 </p> </div> <div> <p> paso 5 </p> </div> <div> <p> Paso 6 </p> </div> </div> </div> <div> <button type = "Button" Anterior </botón> <botón <botón <botón <Botón <botón <Botón> type = "Button"> Next </boton> </div> </div> </div>

Por supuesto, también debe registrar un evento de clic para dos botones

  $ ("#myModalNext .modal-footer botón"). Cada (function () {$ (this) .Click (function () {if ($ (this) .hasclass ("mn-next")) {$ ("#myModalNext .Carousel"). li.active "). next (). addClass (" activo ");} else {$ ("#myModalNext .carousel "). Carousel ('previo); if ($ ("#myModalNext .step li "). Longitud> 1) {$ ($ ($ ($ ($ (" "#myModalNext .step li.active") [$ ("" "#xt .xt .xt. li.active "). Longitud - 1]). RemoveClass (" activo ")}}})})

La lógica puede estar incompleta y se requieren pruebas si se usan formalmente.

10. Botón de carga componente Ladda-Bootstrap

Con respecto a la carga de botones, el blogger ha querido encontrar un componente adecuado para optimizar. Si no se procesa, definitivamente existe la posibilidad de operaciones repetidas. Echemos un vistazo a algo tan pequeño hoy.

1. Muestra de efecto

Primer encuentro

Color personalizado, tamaño, barra de progreso

2. Descripción del código fuente

Dirección del código fuente

3. Ejemplos de código

Archivos a los que deben ser referenciados

 <link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda-themeless.min.csss" rel = "syleSheet"/> <script src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/bootstrap/js/bootstrap.js"> </script> <script src = "~/ladda-bootstrap-master/laddo-bootstrap-master/dist/spin.min.js"> </script> <script <script <script <script <script <script <script <scrip src = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"> </script>

Inicialización del componente: inicializar 4 botones

 <botón data-style = "expand-left"> <span> expandir-left </span> </boton> <button data-style = "expand-right-right"> <span> expand-right-right </span> </button> <button data-style = "zoomin"> <span> zoomin </span> </botte> <butotot data style = "zoom-zoom-outh. {$ ('Button'). Click (function (e) {e.preventDefault (); var l = ladda.create (this); l.start (); l.setProgress (0 - 1); $. post ("/home2/typeaheaddata", {}, function (datos, statu) {console.log (statu);}, "json"); l.stop ();}); return false;});});

Duda del código: no debería ser difícil de entender. El código involucrado en la inicialización del componente var l = ladda.create (esto); L.Start (); Aquí esto representa el objeto del botón que se hace clic actualmente (tenga en cuenta que este es un objeto DOM en lugar de un objeto jQuery), y luego llame a l.stop (); Después de completar la solicitud, cierre la carga.

(1) Todas las opciones de estilo de datos son las siguientes. Si está interesado, puede probarlo y ver cuáles son los efectos:

Data Style = "expandir izquierda"

Data-style = "expandir la derecha"

Data Style = "Expandir"

Data Style = "Expandir hacia abajo"

Data Style = "Zoom-In"

Data Style = "Zoom-Out"

Data Style = "Slide-Left"

Data Style = "Slide-Right"

Data Style = "deslizamiento"

Data Style = "Slide-Down"

Data Style = "Contrato"

(2) Si necesita ajustar el tamaño del botón, el componente tiene una propiedad de tamaño de datos incorporada. Todas las opciones de tamaño de datos son las siguientes:

data-size = "xs"

data-size = "S"

data-size = "L"

(3) Si necesita establecer el color del botón, use Data-Spinner-Color

Data-spinner-color = "#FF0000"

(4) Configuración de la barra de progreso del botón

 Ladda.bind ('button', {callback: function (instance) {var progress = 0; var interval = setInterval (function () {progress = math.min (progreso + math.random () * 0.1, 1); instancia.setProgress (progreso); if (progreso === 1) {instance.stop (); claro (interval);}, 200);});});});});});});});});});});}

El progreso de ejecución actual se establece principalmente a través de la instancia de la oración. En el proyecto oficial, necesitamos calcular la situación de ejecución de solicitud actual para devolver dinámicamente el progreso.

11. Switch Component Bootstrap-Switch

En la página de inicio del sitio web de Bootstrap chino, puede encontrar dicho componente

1. Muestra de efecto

Efecto inicial

Varios atributos y eventos

2. Descripción del código fuente

Bootstrap-Switch Dirección del código fuente: https://github.com/nostalgiaz/bootstrap-switch

Documentación y demostración de Bootstrap-Switch: http://www.bootstrap-switch.org/examples.html

3. Ejemplos de código

Archivos a los que deben ser referenciados

 <link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-switch-Master/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css" Rel = "Stylesheet"/> <scry <> <scry src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/bootstrap/js/bootstrap.js"> </script> <script src = "~/bootstrap-switch-master/bootstrap switch-master/dist/js/bootstrap-switch.js"> <script "

Los componentes dependen de jQuery y bootstrap

Luego está la inicialización de HTML y JS

 <input type = "checkbox" checked /> $ (function () {$ ('input [type = checkbox]'). bootstrapSwitch ({size: "grande"});})

El atributo de tamaño no es necesario. Si usa el estilo predeterminado, los parámetros no se pueden pasar.

Propiedades de uso común

• Tamaño: tamaño del interruptor. Los valores opcionales son 'mini', 'pequeños', 'normales', 'grandes'

• Oncolor: el color del botón ON en el interruptor. Los valores opcionales incluyen 'primario', 'info', 'éxito', 'advertencia', 'peligro', 'predeterminado'

• OffColor: el color del interruptor en el color del botón de apagado. Valores opcionales 'primarios', 'info', 'éxito', 'advertencia', 'peligro', 'predeterminado'

• OnText: el texto del botón ON en el conmutador, el valor predeterminado está "encendido".

• Oftext: el texto del interruptor está "apagado" de forma predeterminada.

• OnInit: eventos que inicializan el componente.

• OnSwitchChange: eventos cuando cambia el conmutador.

Se pueden utilizar eventos y métodos comunes para ver los documentos directamente, y el funcionario proporciona una descripción muy detallada.

12. Calificación de componente de bootstrap-estrella

Todos deben conocer las calificaciones en las calificaciones el 10 y 10 de Taobao. Accidentalmente encontré un componente de calificación de estilo bootstrap. Lo encontré interesante. Puede ser útil para los sistemas de comercio electrónico, comunidad y foro en el futuro, por lo que lo compartiré.

1. Muestra de efecto

2. Descripción del código fuente

Descarga del código fuente

3. Ejemplos de código

Este componente requiere soporte para los estilos de jQuery y Bootstrap

 <link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-star-rating-master/bootstrap-star-star-master/css/star-rating.css" rel = "Stylesheet"/> <scrito src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap-star-master/bootstrap-star-rating-master/js/star-rating.js"> </script> <script <script src = "~/content/bootstrap-star-master/master/bootstrap-star-master/js/locales/zh.js"> </script>

Directamente a través del componente inicial HTML

 <input id = "input-2b" type = "number" min = "0" max = "5" step = "0.5" data-size = "xl" data-symbol = "" data-default-caption = "{calificación} corazones" Capciones de estrellas de datos = "{}"> <input id = "input-21a" valor = "0" type = "número" min = 0 max = 5 stepte data-size = "xl"> <input id = "input-21b" value = "4" type = "número" min = 0 max = 5 step = 0.2 data-size = "lg"> <input id = "input-21c" valor = "0" type = "número" min = 0 max = 8 step = 0.5 data-size = "xl" estrés de datos = "8"> <input id = "input-21d" value "2" type "type" type "" min = 0 max = 5 step = 0.5 data-size = "sm"> <input id = "input-21e" value = "0" type = "número" min = 0 max = 5 step = 0.5 data-size = "xs"> <input ID = "input-21f" valor = "0" type = "número" min = 0 max = 5 paso = 0.5 data-tision = "md" "<input id =" input 2Ba "type" tyum "Min" Min "Min" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" max = "5" step = "0.5" Data-Stars = 5Data-Symbol = "" data-default --caption = "{calificación} corazones" data-star-captions = "{}"> <input id = "input-22" valor = "0" type = "number" min = 0 max = 5 step = 0.5 data-rtl = 1 data-container-class-class-class-right '-right' data 'data' data »» data = 0> 0> »data =» data = 'textiChiciciM

El componente se inicializa a través de class = "Calificación". Aquí hay algunos parámetros que deberían ser fáciles de entender:

• Valor: representa la puntuación predeterminada cuando la inicialización del componente

• Min: puntaje mínimo

• Max: puntaje máximo

• Paso: la escala mínima agregada cada vez

• tamaño de datos: el tamaño de las estrellas

• Estrellas de datos: el número de estrellas

Puede obtener el puntaje actual usando $ ("#input-21a"). Val ().

Los anteriores son algunos componentes útiles de la serie de componentes Bootstrap que el editor le presentó (Recomendación 2). Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!