Prefacio: He compartido muchos componentes comunes de Bootstrap antes, incluidos los formularios, la verificación de formularios, la carga de archivos, verificar cuadros desplegables, cuadros emergentes, etc. Durante este período, el blogger ha recopilado algunos componentes útiles (algunos de los cuales se han utilizado en el proyecto). Después de dos días, ha resuelto algunos de ellos. Basado en el principio de "Las cosas buenas deben compartirse con otros", hoy daremos algunos beneficios para compartir las cosas recopiladas por el blogger como referencia de los jardineros necesitados. La mayoría de los componentes son componentes de código abierto, y algunos de ellos son los efectos encontrados y reescritos por bloggers en Internet. Puede que no sean satisfactorios. Si está interesado, eche un vistazo.
1. Componente de tiempo
Hay muchos componentes de tiempo en estilo Bootstrap. Puede buscar la palabra clave "DatePicker" en GitHub y puede encontrar muchos componentes de tiempo. El blogger ha usado dos de ellos antes y descubrió que habrá algunos problemas de tamaño grande o pequeño. Después de un poco de detección, encontramos un componente de tiempo que tiene buenos resultados y puede usarse para varios escenarios. Echemos un vistazo a su estilo a continuación.
1. Muestra de efecto
Efecto inicial
Personalización de formatos de cultivo y fecha en el componente: solo se muestran las fechas
Mostrar fecha y hora (la experiencia del teléfono móvil y los dispositivos de tableta puede ser mejor)
2. Descripción del código fuente
Chuchu observó el efecto del componente y dio la dirección del código fuente
3. Ejemplos de código
Primero, haga referencia al archivo requerido
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-datetiMepicker-master/build/css/bootstrap-datetiMepicker.csss" rel = "Stylesheet"/> <script src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/bootstrap/js/bootstrap.js"> </script> <script src = "// cdnjs.cloudflare.com/AJAX/libs/moment.js/2.9.0/moment-bitales src = "~/content/bootstrap-dateTiMepicker-Master/build/js/bootstrap-dateTiMepicker.min.js"> </script>
Se requieren jQuery y Bootstrap. Además, también debe consultar el archivo Moment -vh-Locales.js. Por supuesto, también puede descargar este archivo JS en su área local sin usar este método CDN. Puede descargar completamente este archivo JS a su área local y luego agregar una referencia local.
(1) Efecto inicial
<Lelse> date: </label> <div class = 'input-group date' id = 'DateteMepicker1'> <input type = 'text'/> <span> <span> </span> </span> </div> <script type = "text/javaScript"> $ (function () {$ ('#detaTimepicker1'). DeteteEpicker ();}); </script>Esto dará el efecto como se muestra en la imagen de arriba.
(2) Formato de cultura y fecha china
La parte HTML permanece sin cambios. Simplemente agregue parámetros al inicializar JS.
<script type = "text/javaScript"> $ (function () {$ ('#dateTiMepicker1'). DatTimePicker ({Format: 'yyyy-mm-dd', // Formateo de fecha, solo la fecha local: 'zh-cn' // cultura china});}); </script>(3) Tiempo de visualización
<Lelse> Time: </label> <div class = 'input-group date' id = 'datTimePicker2'> <input type = 'text'/> <span> <span> </span> </span> </div> <script type = "text/javaScript"> $ (function () {$ ('#detaTiMepicker2'). Hh: mm: ss ', localidad:' zh-cn '}); </script>(4) Fecha máxima y fecha mínima
$ ('#DateTiMepicker1'). DatTimePicker ({Format: 'yyyy-(5) Habilite el botón Eliminar
ShowClear: verdadero
(6) Vista del atributo de modo. Establezca el navegador para seleccionar el modo para copiar el código de la siguiente manera: ViewMode: 'años'
(7) otros
Para funciones más poderosas, consulte la API, para que no las enumere todas aquí. Hay una gran cantidad de atributos, eventos y métodos para satisfacer sus diversas necesidades especiales.
2. Componentes de dispositivo autoinduciendo
Con respecto a Bootstrap Autoincrementer, es posible que no sea necesario en cada proyecto. Hay algunos escenarios especiales, como: un determinado cuadro de texto requiere números de datos, y el tamaño de la matriz debe ajustarse. Después de hablar durante mucho tiempo, algunos jardineros pueden no saber cómo se ve, así que haga clic en la imagen.
1. Muestra de efecto
De hecho, el efecto es muy simple, pero puede establecer automáticamente el valor máximo, el valor mínimo y el valor autoactado, y puede realizar automáticamente la verificación digital. Lo más conveniente es que debe inicializarse usando JavaScript, y solo debe inicializarse en HTML.
2. Descripción del código fuente
Código fuente y dirección de documento
3. Ejemplos de código
El primer archivo a referenciar es el siguiente:
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesat href="~/Content/jquery.spinner-master/dist/css/bootstrap-spinner.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src = "~/content/jQuery.spinner-Master/dist/js/jQuery.spinner.js"> </script>
El archivo font-aweaome.min.css también es un archivo de referencia de CDN, y también puede consultarlo a su local.
(1) Inicialización
<div data-trigger = "spinner"> <input type = "text" value = "1" data-rule = "cantidad"> <span> <a href = "javascript :;" data-spin = "up"> <i> </i> </a> <a href = "javascript :;" spin data = "down"> <i> </i> </a> </span> </div>
Solo una sección HTML simple, puede ver el efecto como se muestra en la imagen de arriba. ¿Es fácil?
(2) Tipo de autosuficiencia
Al ver el código fuente del componente, puede ver que hay múltiples tipos de autoincremento definidos para nosotros:
Puede definir el atributo de regla de datos a estos tipos, como:
Las reglas que pueden controlar el componente de autoinforme se llevan a cabo de acuerdo con las reglas mensuales.
(3) Establezca el valor máximo, el valor mínimo, el valor autograbado
Además de los tipos específicos anteriores, los componentes también admiten valor máximo, mínimo y autoactado personalizado.
<div data-trigger = "spinner"> <input type = "text" value = "1" data-min = "-10" data-max = "10" data-step = "2" data-rule = "cantidad"> <span> <a href = "javaScript :;" data-spin = "up"> <i> </i> </a> <a href = "javascript :;" spin data = "down"> <i> </i> </a> </span> </div>
data-min = "-10": valor mínimo data-max = "10": valor máximo data-step = "2": valor autoevaluado
Esto es fácil de entender, y no lo explicaré demasiado. Efecto:
(4) Captura de eventos
El componente proporciona dos eventos cambiados y cambiados, que corresponden al cambio numérico y la devolución de llamada del evento después del cambio.
$ ('#id'). spinner ('cambiado', function (e, newval, OldVal) {}); $ ('[data-thrigger = "spinner"]'). spinner ('cambiando', función (e, newval, oldVal) {});3. Efecto de carga
Hace unos días, un miembro del grupo preguntó qué componentes usar para el efecto de carga de Bootstrap. De hecho, buscar en Baidu también puede encontrar muchos resultados. Aquí, el blogger compartirá algunos widgets cargados según su experiencia de uso, con la esperanza de que todos puedan usarlos. Se divide principalmente en práctico y fresco. El modelo práctico tiene un efecto promedio, pero se puede usar para varios navegadores; El modelo Cool está escrito utilizando los últimos CSS3 y HTML5, y el efecto es muy genial, pero básicamente la versión inferior de IE (por debajo de 10) no es compatible.
1. Práctico
1. Componente de carga perfecta
Este componente es un JS encontrado por el blogger en Internet, pero después de descargarlo, encontré algunos problemas grandes y pequeños. Entonces, el blogger lo reescribió y lo llamó el componente de carga de bootstrap. Su principio es aparecer una capa de cobertura cuando se inicia el componente, y luego, cuando el componente está cerrado, se elimina la capa de superposición DOM, y el efecto de carga usa una imagen GIF.
Contenido del archivo perfectload.js:
/************************************************CLEM-In: Efecto de carga de página amigable*Autor: Sqinyang ([email protected])*Tiempo: 2015/04/20*Explicación: Con la popularidad de HTML5, el efecto de la página se está volviendo más y más deslumbrante, y al mismo tiempo, también requiere cargar una gran cantidad de materiales y materiales. La velocidad de Internet es extremadamente feroz, especialmente para sitios web que cuelgan en servidores extranjeros. Una vez que abra un montón de materiales, puede cargar lentamente las ubicaciones y las ubicaciones son inconsistentes. Therefore, this method is written to facilitate everyone to use **********************************************************/jQuery.bootstrapLoading = { start: function (options) { var defaults = { opacity: 1, //loading page transparency backgroundColor: "#ffff", //loading page background color borderColor: "#bbb", //prompt border Color BorderWidth: 1, // Aval Border Border BorderStyle: "Solid", // Stremt Border Border Style LoadingTips: "Cargando, por favor espere ...", // TIPSColor de texto de inmediato: "#666", // Avicultura de color retraso Tiempo: 1000, // Después de que se complete la carga de la página, la página de carga, la página de carga está gradualmente fuera de la velocidad Zindex: 999, // Carga de la página de carga de la página. igual a 0, no hay necesidad de suspender} var options = $ .extend (valores predeterminados, opciones); // Obtener ancho de página y altura var _pageHeight = document.documentelement.clientHeight, _pageWidth = document.documentelement.clientwidth; // Loadinghtml Contenido personalizado que se muestra antes de que la página no esté cargada var _loadinghtml = '<div id = "LoadingPage" style = "Posición: fijo; izquierda: 0; arriba: 0; _Position: Absolute; ancho: 100%; altura:' + _pageHeight + 'PX; fondo:' + optionsgroundgroundcolor + '; options:' + opciones: ' +' + opacidad '; filtro: alfa (opacidad =' + options.opacity * 100 + '); z-odex:' + options.zindex + '; "> <div id =" LoadingTips "Style =" Position: Absolute: Cursor1: Wait: Width: Auto; Border:' + Opciones.BorderDerColor + '; 'PX: 80px; '; font-size: 20px; ">' + options.loadingtips + '</div> </div>'; // representar el efecto de carga $ ("cuerpo"). Append (_loadinghtml); // Obtenga el ancho y la altura del cuadro de solicitud de carga var _loadingtipsh = document.getElementById ("LoadingTips"). ClientHeight, _LoadingTipsw = document.getElementById ("LoadingTips"). ClientWidth; // Calcule la distancia y mantenga el cuadro de solicitud de carga hacia arriba, hacia abajo, izquierda y derecha, var _loadingTop = _PageHeight> _LoadingTipsh? (_PageHeight - _LoadingTipsh) / 2: 0, _loadingleft = _PageWidth> _LoadingTipsw? (_PageWidth - _LoadingTipsw) / 2: 0; $ ("#LoadingTips"). CSS ({"izquierda": _loadingleft + "px", "top": _loadingtop + "px"}); // Escuche el documento de estado de carga de la página. // Ejecutar function pageloaded () {if (document.readyState == "Complete") {var LoadingMask = $ ('#LoadingPage'); setTimeOut (function () {loadingmask.animate ({"opacidad": 0}, options.delaytime, function () {$ (this) .Hide ();});}, options.sleep); }}}, end: function () {$ ("#loadingpage"). remove (); }}
Este JS está básicamente en línea, pero sobre esta base, el blogger agregó un método final.
Veamos cómo se utilizan los componentes. Aquí está el código de prueba:
<html> <fead> <meta name = "viewport" content = "width = dispositivo-width"/> <title> cargando </title> <link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <script src = "~/content/jQuery-1.9.1.js"> <</<script> <script> src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-carga/perfectload.js"> </script> <script type = "text/javaScript"> $ (function () {$ ("#btn_submit"). on ("click", function () $ .BootstraPloading.Start ({LoadingTips: "Los datos se están procesando, espere ..."}); </script> </head> <body> <div style = "Padding: 0px"> <div style = "Height: 450px;"> <div> Condiciones de consulta </div> <div> <form de formulario = "formeSearch"> <div> <div> <poton type = "button" id = "btn_submit"> <span aria-hidden = "verdadero" </sang> Testing de carga </botón " </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>Instrucciones para su uso: el componente no requiere ningún código HTML, solo necesita llamar al método de inicio del componente al ejecutar la carga. El método Start () inicia la capa emergente y puede establecer todos los parámetros en la variable predeterminada. Cuando se termine la carga, se llamará al método final del componente y la capa emergente se eliminará automáticamente. Veamos el efecto:
Si no está satisfecho con el efecto, puede establecer los parámetros en los valores predeterminados usted mismo. Las anotaciones se escriben en detalle, por lo que no las enumeraré una por una aquí.
2. Crysanthemum de carga del componente Spin.js
El uso de imágenes para mostrar los efectos de carga tiene sus desventajas inherentes, por lo que muchos componentes de carga ahora usan CSS+JS para lograr efectos de animación. Spin.js es uno de estos ejemplos. Spin.js es un componente de código abierto con una dirección de código abierto.
Después de descargar el código fuente, la inicialización encuentra que el componente no tiene una máscara, por lo que solo puede ser así:
Después de buscar sus parámetros durante mucho tiempo, no pude encontrarlos, o no los encontré donde había una "organización". No hay forma de que el blogger solo pueda agregar el efecto de la máscara él mismo. Por lo tanto, se creó un nuevo archivo de estilo CSS y se llamó temporalmente spin.css, con solo un estilo:
.fade {posición: fijo; arriba: 0; Derecha: 0; Abajo: 0; Izquierda: 0; Index Z: 9999; Opacidad: 1; color de fondo: gris;}Entonces Spin.js se reescribió en dos lugares, y el contenido de reescritura es el siguiente:
/** * Copyright (c) 2011-2014 Felix GNASS * Licenciado bajo la licencia MIT * http://spin.js.org/ * * Ejemplo: Var opts = {líneas: 12, // El número de líneas para extraer la longitud: 7, // La longitud de cada línea de la línea: 5, // el grano de línea Radius: 10, // El radio de la radia de Inner. Las esquinas de la espina: 1, // redondez (0..1) Color: ' #000', // #rgb o #rrggbb opacidad: 1/4, // opacidad de las líneas Rotar: 0,/Dirección de desplazamiento de rotación: 1, // 1: en sentido horario, -1: Velocidad de contrademan setTimeOut () zindex: 2e9, // use un alto índice Z alto de clase predeterminado: 'spinner', // class CSS para asignar al elemento superior: '50%', // Center verticalmente verticalmente a la izquierda: '50%', // Center Horizontally Shadow: False, // para Render a una sombra Hwaccel: False, // si usar hardware (podría ser Buggy) shadow). }; var Target = document.getElementById ('foo'); var spinner = new Spinner (Opts) .spin (Target); */; (function (root, factory) {if (typeof module == 'object' && module.exports) module.exports = factory (); // commonjs else if (typeOf define == 'function' && define.amd) define (factory); // amd module más root.spinner = factory (); // browser} (this, this, () ° ° ° ° » prefijos = ['WebKit', 'Moz', 'MS', 'O']; Dado que se crea un div. <N; 100), i, líneas] .Join ('-'); prefijo + '-' || ''; '%{Opacidad:' + Alpha + '}' + '100% = prop.charat (0) .ToUpperCase ()+prop.slice (1); CSS (El, Prop) {para (var n en prop) === Undefined) Obj [n] = def [n]; line width: 5, // The line thickness radius: 10, // The radius of the inner circle scale: 1.0, // Scales overall size of the spinner corners: 1, // Roundness (0..1) color: '#000', // #rgb or #rrggbb opacity: 1/4, // Opacity of the lines rotate: 0, // Rotation offset direction: 1, // 1: clockwise, -1: Velocidad en sentido antihorario: 1, // rondas por segundo sendero: 100, // AfterGlow Porcentaje de FPS: 20, // marcos por segundo cuando se usa setTimeOut () zindex: 2e9, // use un alto index Z de alto nivel de className: 'spinner', // css clase para asignar al elemento: '50%', // Center de la izquierda: '50%', 50%', // // // Clas Renderiza una posición de shadow hwaccel: false, // si se debe usar la posición de aceleración de hardware: 'Absolute' // Element Posicioning}; Merge (spinner.prototype, { / ** * agrega la spinner al elemento de destino dado. Si esta instancia ya está * girando, se elimina automáticamente de su objetivo anterior b Calling * stop () internamente. * / spin: function (target) {this.stop (); var = this; var o = self.opts; var el = self.el = createel (null, {classsal: o.claStame; CSS (El, {posición: O.Position, Ancho: 0, Zindex: O.Zindex, Left: O.Left, Top: O.Top}); Self.opts); ASTEP = F / O.LINES; setTimeOT (anim, ~~ (1000/fps)); El.ParentNode.ClassName = El.ParentNode.ClassName.Replace (Reg, ''); (O.Lines - 1) * (1 - O.Direction) / 2; transformación: 'ROTATE (' + ~~ (360/O.Lines * i + O.Rotate) + 'deg) traduce (' + o.scale * o.radius + 'px' + ', 0)', borderradius: (o.corners * o.scale * o.width >> 1) + 'px'}); css(createEl(), { position: 'absolute', top: 1 + ~(o.scale * o.width / 2) + 'px', transform: o.hwaccel ? 'translate3d(0,0,0)' : '', opacity: o.opacity, animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + '' + 1 / o.speed + 's lineal infinito'}); RGBA (0,0,0, .1) ')); initvml () { / * función de utilidad para crear una etiqueta VML * / function vml (tag, attr) {return CreateEl ('<' + tag + 'xmlns = "urn: schemas-microsoft.com: vml">', attr) 'Comportamiento: url (#predeterminado#vml)'); {ancho: s, altura: s}); / o.lines * i + 'deg', izquierda: ~~ dx}), ins (css (vml ('roundrect', {arcSize: o.corners}), {width: r, altura: o.scale * o.width, izquierda: o.scale * o.radius, top: -o.scale * o.width >> 1, filtro: filtrar: filtro}), vml ('relleno', {color: getColor (o.color, i), opacity: o.opacity}), vml ('stroke', {opacidad: 0}) // trazo transparente para arreglar el sangrado de color al cambio de opacidad))); 'progid: dximagetransform.microsoft.blur (pixelRadius = 2, improvisado = 1, shadowopacity = .3)'); o = o.shadow && o.lines || El = CreateEl ('estilo', {Tipo: 'Text/CSS'}); 'transformar') & y sondea.adj) initvml ();spin.js
Dos cambios:
(1) Al inicializar, si se muestra, agregue un estilo de desvanecimiento a la etiqueta correspondiente.
(2) Elimine el estilo de desvanecimiento cada vez.
Después de hacer la modificación, la interfaz de prueba ya está disponible.
<html> <fead> <meta name = "viewport" content = "width = dispositivo-width"/> <title> carging2 </title> <link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/spin.js-master/css/css/spin.css" spin.css "spin.cshets" spin.cshets "spin.cshet" spin. " /> <script src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> <//script> <script src = "~/spin.js-master/js/spin.js"> </script> <script type = "text/javascript"> $ () $ ("#btn_submit"). on ("hacer clic", function () {// var opts = {// líneas: 9, // número de pétalos // longitud: 1 ,/ longitud petal // ancho: 10,/ancho de petal // radius: 15, // radio de petal del centro // esquinas: 1, // sencillo de petal (0-1) // Rotate Ángulo // Dirección: 1, // Dirección de rotación del pétalas 1: en sentido horario, -1: en sentido contrario // color: '#000', // color petal // velocidad: 1, // velocidad de rotación petal // rastro: 60, // shadow cuando petal gira (porcentaje) // shadow: false, // si el petal muestra la sombra de la sombra // hwaccel: falso // spinner si hardware accesible y alto speado y alto speed rotación y alta spreed está contabilizado ClassName: 'Spinner', // Spinner CSS Style Name // Zindex: 2E9, // Spinner's Z-Axis (predeterminado es 2000000000) // arriba: 'Auto', // Spinner Top Posicion Unit PX relativo al contenedor matriz // izquierda: 'Auto' // Spinner Posicionamiento de la izquierda PX /// = nuevo spinner ({}). Spin (Target); Distancia desde la sombra del centro: verdadero, opacidad: 1/8}; </script> </head> <body> <div style = "Padding: 0px"> <div style = "Height: 450px;"> <div> Condiciones de consulta </div> <div> <form de formulario = "formeSearch"> <div> <div> <poton type = "button" id = "btn_submit"> <span aria-hidden = "verdadero" </sang> Testing de carga </botón " </div> </div> </div> </div> </div> </div> <div id = "foo"> </div> </body> </html> test_spin.cshtmlInstrucciones para su uso: si su página no usa jQuery, consulte el archivo spin.js, este archivo no requiere soporte jQuery; Si desea usar jQuery, consulte el archivo jquery.spin.js. El código anterior no está usando jQuery. El componente necesita definir un DIV vacío y luego inicializarlo en este div. Los resultados obtenidos son los siguientes:
Por supuesto, si no está satisfecho con este efecto, también puede establecer la transparencia de la capa de máscara y el estilo de toda la máscara. También hay varios parámetros para la rotación que se pueden personalizar durante la inicialización, y hay comentarios detallados en el código anterior.
2. Estilo genial
1. JQuery.shcircleloader.js componente
No hace falta decir que este componente también es simple de usar, pero no es compatible con versiones por debajo de IE10. Veamos el efecto primero:
En cuanto al uso de código específico, el blogger no tiene la intención de profundizar en él, por lo que puede buscar en Baidu o Github.
2. Componente fakeloader.js
Más opciones, mejor efecto de aplanamiento, mejor experiencia con teléfonos móviles y dispositivos de tableta. Solo mira las fotos y lo sabrás. Dirección de código abierto.
4. Complemento de diagrama de flujo
Tuve que hacer un flujo de trabajo hace algún tiempo y necesitaba mostrar a dónde iba el proceso actual. Encontré un complemento de proceso ystep. La ventaja de este componente es que es simple de usar y liviano.
1. Muestra de efecto
Veamos el efecto primero
Versión azul reducida
2. Descripción del código fuente
Dirección de código abierto.
3. Ejemplos de código
Primero, haga referencia al archivo requerido
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/ystep-Master/css/ystep.css" rel = "stylesheet"/> <script src = "~/content/jQuery-1.9.1.js"> <</"script> src = "~/content/bootstrap/js/bootstrap.js"> </script>
Este componente requiere soporte de dos componentes: jQuery y bootstrap.
Luego defina un div vacío
<div id = "div_ystep1"> </div>
Finalmente, inicialice el componente cuando se haga clic en el botón
<script type = "text/javascript"> $ (function () {$ ("#btn_submit"). Click (function () {$ ("#div_ystep1"). Loadstep ({// ystep size // valor opcional: pequeño, grande, grande: "pequeño", // ystep color esquemat [{// Título del nombre del paso: "Inicio", // Contenido de paso (cuando el mouse se mueve al nodo de este paso, se le indicará) Contenido: "Proceso Inicio"}, {Título: "Aprobación", Contenido: "Cada roles Iniciar aprobación"}, {Título: "Implementación", Contenido: "Requisitos Inicio de inicio"}, {Título: "End", Contenido: "Fin de proceso" $ ("#div_ystep1"). setstep (3); </script>Si se trata de un paso dinámico, puede ser necesario construir el atributo de pasos dinámicamente. Luego use setstep () para establecer qué paso ha alcanzado.
Métodos comunes:
// omita al siguiente paso $ (". Ystep1"). Nextstep (); // omita al paso anterior $ (". Ystep1"). Prevstep (); // omita el paso especificado $ (". Ystep1"). Setstep (2); // Obtenga el paso actual $ (". Ystep1"). Getstep ();;5. Confirmación de arranque de componente de indicador de botón
El componente de solicitud del botón es un poco similar a la función de confirmación en JS, pero esta confirmación es un efecto emergente de información sobre herramientas, que le da a los usuarios un juicio de determinación y cancelación, y la interfaz es más amigable. Antes de introducir este componente, primero puede echar un vistazo al efecto del cuadro de inmediato en Bootstrap:
El componente de confirmación de bootstrap se implementa en función del efecto de este cuadro de inmediato. Hay muchos componentes de confirmación de bootstrap en GitHub, pero son básicamente los mismos. .
1. Muestra de efecto
El efecto más original
Título personalizado, texto de botón
2. Descripción del código fuente
Dirección de código abierto
3. Ejemplos de código
(1) Archivos de cotización:
<Link href = "~/content/bootstrap/css/bootstrap.css" rel = "Stylesheet"/> <script src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script>
Los estilos requieren soporte de bootstrap.css. JavaScript requiere soporte de jQuery y bootstrap.js.
(2) la etiqueta de clic correspondiente (puede ser cualquier etiqueta)
<botón tipo = "botón" id = "btn_submit1"> <span aria-hidden = "true"> </span> delete </boton>
(3) Inicialización JS
<script type = "text/javascript"> $ (function () {$ ('#btn_submit1'). confirmación ({animación: true, colocación: "fondo", título: "¿Está seguro de que desea eliminar?", btnoklabel: 'ok', btncanCellabel: 'cancel', ONConfirm: function () {// alert (""), "),"), ",", ",", ","), "),", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ","), OnCancel: function () {// Alert ("Haga clic en Cancelar"); </script>(4) más atributos, eventos, métodos
Además de las propiedades inicializadas mencionadas anteriormente, hay algunas propiedades comúnmente utilizadas. Por ejemplo:
btnokclass: determine el estilo del botón; btncancelclass: cancele el estilo del botón; Singleton: si solo se permite un cuadro de determinación; Popout: si ocultar el cuadro de determinación cuando el usuario hace clic en otro lugar;
Por ejemplo, puede establecer btnokclass en btnokclass: 'btn btn-sm btn-primary',
6. Clasificación de imagen y componentes de filtrado Muxitup
Este es un componente de agrupación y filtrado con un efecto muy genial y una dirección de código abierto. El blogger vio una demostración en Internet y pensó que era realmente efectivo. Sin más preámbulos, la imagen de arriba.
¿Qué tal, el efecto está bien? Este componente no se usa en el proyecto por el momento, pero creo que existe la posibilidad de necesitarlo en el futuro, por lo que lo recolecté. El código de implementación se copia en línea. No lo he estudiado en profundidad. Si está interesado, puede echar un vistazo. El código HTML+JS se implementa de la siguiente manera:
<html> <fead> <meta name = "viewport" content = "width = dispositivo-width"/> <title> mixitup </title> <link href = "~/content/image/css/normalize.css" rel = "stylesheet"/> <link href = "~/content/image/css/layout.css" rel = "styles"/"styles"/<scriptor " src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/mixitup-master/jquery.easing.min.js"></script> <script src="~/Content/mixitup-master/build/jquery.mixitup.min.js"></script> <script type="text/javascript"> $(function () { var filterList = { init: function () { debugger; // MixItUp plugin $('#portfoliolist').mixitup({ targetSelector: '.portfolio', filterSelector: '.filter', effects: ['fade'], easing: 'snap', // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { // Simple parallelax effect $('#portfoliolist .portfolio').hover( function () { $(this).find('.label').stop().animate({ bottom: 0 }, 200, 'easeOutQuad'); $(this).find('img').stop().animate({ top: -30 }, 500, 'easeOutQuad'); }, function () { $(this).find('.label').stop().animate({ bottom: -40 }, 200, 'easeInQuad'); $(this).find('img').stop().animate({ top: 0 }, 300, 'easeOutQuad'); } ); } }; // Run the show! filterList.init(); }); </script></head><body> <div> <ul id="filters"> <li><span data-filter="app card icon logo web">All categories</span></li> <li><span data-filter="app">Mobile application</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="icon">icon</span></li> <li><span data-filter="logo">Logo</span></li> <li><span data-filter="web">Web page</span></li> </ul> <div id="portfoliolilist"> <div data-cat="logo"> <div> <img src="~/Content/image/Logo/5.jpg" /> <div> <div> <a>Bird Document</a> <span>Logo</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/app/1.jpg" /> <div> <div> <a>Visual Infography</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/4.jpg" /> <div> <a>Sonor's Design</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/1.jpg" /> <div> <div> <a>Typography Company</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/3.jpg" /> <div> <a>Weatherette</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/4.jpg" /> <div> <div> <a>BMF</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/5.jpg" /> <div> <a>Techlion</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/1.jpg" /> <div> <div> <a>KittyPic</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/2.jpg" /> <div> <a>Graph Plotting</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/card/2.jpg" /> <div> <a>QR Quick Response</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/6.jpg" /> <div> <div> <a>Mobi Sock</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <a>Village Community Church</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/4.jpg" /> <div> <div> <a>Domino's Pizza</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/3.jpg" /> <div> <a>Backend Admin</a> <span>Web design</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/1.jpg" /> <div> <div> <a>Instagram</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/2.jpg" /> <div> <a>Student Guide</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/2.jpg" /> <div> <div> <a>Scoccer</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/icon/5.jpg" /> <div> <a>3D Map</a> <span>Icon</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/web/1.jpg" /> <div> <div> <a>Note</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/3.jpg" /> <div> <a>Native Designers</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/logo/4.jpg" /> <div> <a>Bookworm</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <div> <a>Sandwich</a> <span>Icon</span> </div> <div></div> </div> </div> </div> </div> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <a>Reality</a> <span>Business card</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/2.jpg" /> <div> <div> <a>Specialisterne</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div><!-- container --></body></html>muxitup7. Resumen
以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的园友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，不妨推荐下。再次感谢园友们的支持，不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。
The above is the relevant knowledge of the Bootstrap component series welfare chapter (recommended) that the editor introduced to you. Espero que te sea útil. If you have any questions, please leave me a message and the editor will reply you in time. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!