Share
Cuando se trata de JavaScript en BS3, no ha cambiado mucho; la gran mayoría de los cambios que hemos visto hasta ahora han girado en torno a las secciones de componentes y CSS. Hay una razón para esto.
La mayoría de las funciones de JavaScript de BS2 (y, para el caso, de BS3) vienen en forma de atributos de datos. En la mayoría de los casos, ya hemos visto cómo usarlos en las distintas secciones de componentes, lo que realmente deja muy poco, eso es específico solo para JavaScript.
Por lo tanto, en este tutorial, repasaré brevemente la mayoría de lo que está disponible, y donde no hay otra descripción en otra parte de la serie, muestro un breve ejemplo de cómo usar la API disponible.
Las instalaciones de JS disponibles en BS2 y BS3 son muy extensibles, e incluso una serie completa de tutoriales probablemente no podrían cubrir todo lo que es posible. Por lo tanto, le recomiendo encarecidamente que vaya al sitio web de Bootstrap y lea la sección sobre JavaScript.
Lo primero que alguien menciona cuando el tema de JavaScript aparece en Bootstrap es el cuadro de diálogo modal, y es una pequeña sorpresa..
Las cajas modales de BS3 son una de las implementaciones más fáciles (y una de las más ricas) que se ven en cualquiera de los marcos de HTML5 del navegador moderno.
Usarlos es fácil, pero desafortunadamente, requiere bastante margen de ganancia..
El siguiente código te da un ejemplo muy básico:
Ejemplo modal producido por muestra.Para mostrar un modal, primero debe tener un objetivo de activación. En el ejemplo anterior, este es el botón marcado. En esta muestra, la más externa. Tu disparador no tiene que ser un botón; puede ser cualquier cosa que pueda aceptar (o está configurado para aceptar) un clic del ratón, siempre que se proporcionen los atributos de conmutación y datos de destino.. Una vez que entramos en el modal mismo, verás que la estructura consiste en una serie de anidados bastante profundos. También notará que, nuevamente, hay un tema común de marcar las cosas para que sean amigables con los lectores de pantalla, y nuevamente, no puedo enfatizar esto lo suficiente: debe hacer todo lo posible para asegurarse de que su marca sea tan amigable para herramientas de accesibilidad como sea posible. Un modal comienza con un exterior. El siguiente Una vez que haya definido el shell de contenido modal, puede colocar en tres Puede ver en el código del ejemplo anterior que incluimos una cruz de cierre, como lo hicimos para los cuadros de alerta. La única diferencia entre esta cruz de cierre y la que vimos anteriormente es que la Aparte del icono de cierre, el resto del contenido interno del modal es simplemente el marcado BS3 normal y CSS. Cualquier cosa que pueda usar en otro lugar se puede usar dentro de un modal, y si es demasiado alto para la pantalla, obtendrá un contenedor interno que cambia automáticamente a un elemento desplazable. También hay dos tamaños de ancho opcionales; estos se agregan al interior También puede inicializar el modal utilizando la API de JavaScript de una manera estándar de jQuery; Si desea alterar el comportamiento de la opción predeterminada, usar el constructor JQ es la única forma de hacerlo.. Las opciones que se pueden cambiar son las siguientes: También hay una serie de eventos que se generan para ciertas acciones, pero están más allá del alcance de este tutorial.. Si recuerda, volviendo a la sección sobre navegación básica, mencioné que el componente de la pestaña se puede conectar con un marcado adicional para manejar el intercambio de paneles de contenido por usted.. Para marcar un conjunto de pestañas que cambian automáticamente usando JavaScript, primero debe crear un Una vez que haya creado el conjunto de navegación, deberá crear un El siguiente código muestra un ejemplo de esto: Al refinar, vivimos ... Hoy, la ciencia nos dice que el ... Tú y yo somos formas de vida de la sopa cuántica ... El control de pestañas no tiene un constructor que tome las opciones como lo hace modal, pero sí tiene una llamada a la API para que puedas decir qué pestaña mostrar mediante programación. Para hacer esto, solo necesita usar jQuery para seleccionar el selector apropiado, y luego llamar A todos les encantan las pequeñas y emergentes etiquetas de información sobre herramientas que se pueden usar como ayuda y muchas otras tareas simples y descriptivas.. Usar una información sobre herramientas en BS3 es increíblemente fácil. Simplemente asigne un atributo de datos de El siguiente código creará un botón simple con una información sobre herramientas adjunta en su parte superior: Hay una pequeña advertencia que se aplica a la información sobre herramientas, pero no se aplica a ningún otro elemento: es necesario que usted mismo inicialice la información sobre herramientas. Puede pasar varias opciones al mismo tiempo (al igual que con los modales), pero DEBE inicializarlas o sus descripciones no aparecerán.. Para inicializar el botón que se muestra en el ejemplo anterior, coloque la siguiente línea de JavaScript en algún lugar de su página para que se ejecute una vez que el DOM esté listo y se cree el botón: Depende totalmente de usted cómo selecciona cada uno de sus botones. Podría, por ejemplo, seleccionarlos todos a través de su tipo de elemento, pero debe llamar Si todo funciona como se espera, deberías ver algo como esto: Cerca de la humilde información sobre herramientas aparece la ventana emergente y, al igual que la información sobre herramientas, se debe inicializar manualmente con una llamada a Una información sobre herramientas normalmente solo tiene una línea de texto simple y simple, mientras que una ventana emergente es más grande y puede contener múltiples elementos HTML, desde párrafos hasta botones e imágenes.. La segunda diferencia es que se debe hacer clic en el elemento antes de que se muestre una ventana emergente, mientras que la información sobre herramientas es automática al desplazarse.. Usted crea una ventana emergente de manera muy similar a la información sobre herramientas, excepto que el contenido de la ventana emergente se define dentro de un atributo de datos llamado Al igual que con la información sobre herramientas, en algún lugar de la puesta en marcha de su documento, también debe asegurarse de inicializar el componente utilizando algo como: También como con la información sobre herramientas, puede pasar un objeto que contiene opciones aquí. Hay muchos disponibles, así que, una vez más, los invito a leer los documentos de BS3 para aprenderlos todos.. Si todo funcionó, deberías poder renderizar tu página y ver esto: Una de las cosas eliminadas en BS3, lamentablemente, fue el componente de acordeón prefabricado. En su lugar, sin embargo, hay algo mejor: el panel plegable.. Al usar estos paneles, es igual de fácil crear un acordeón estándar, pero ahora también se pueden usar por separado, componentes independientes, lo que le permite hacer cosas como crear áreas de información de plegado, barras de herramientas y mucho más. Sin embargo, una cosa a tener en cuenta: si está haciendo una compilación personalizada, también debe asegurarse de incluir el complemento JavaScript de ayuda de transición. Los documentos de BS3 tienen más información que necesitará si está realizando una compilación personalizada.. Para crear un acordeón a partir de paneles plegables, simplemente tiene que crear un exterior Una vez que haya colocado los paneles, solo necesita agregar un El atributo toggle debe tener un valor de El siguiente código muestra cómo lograr esto: Como se mencionó, los paneles no necesitan ser agrupados; se pueden usar de manera singular con un solo elemento como el desencadenante para que ocurra el plegado. Por ejemplo, si desea contraer un panel usando un botón simple, solo asegúrese de que su botón tenga un atributo de datos de Para redondear este tutorial, el último complemento de JavaScript que voy a presentar es el carrusel de nuevo diseño. BS2 tenía un carrusel, pero al igual que el acordeón, ahora se ha eliminado y se ha simplificado enormemente para facilitar su uso.. Por lo general, el complemento del carrusel se usa en la parte superior de la página para proporcionar una pancarta giratoria de imágenes, y en BS2, esto era lo único para el que podía usarse el carrusel. Sin embargo, en BS3, se rotará cualquier contenido que pueda colocarse dentro de los paneles del carrusel, incluidas imágenes, texto, svg y mucho más.. El siguiente código muestra un ejemplo básico de cómo construir un carrusel: El espacio-tiempo es una constante. Voluntad requiere exploración Stardust requiere exploración. Tú y yo somos narradores del cosmos. El espacio-tiempo es una constante. Voluntad requiere exploración Hay algunos más objetos de JavaScript de bajo perfil, pero la mayoría de ellos no se pueden usar directamente desde el código de usuario normal, y generalmente solo se usan en circunstancias especiales. Los documentos de BS3 cubren todo lo que me he perdido, y si va a profundizar en las funciones de JavaScript disponibles, una lectura larga y una comprensión de cómo todo está enganchado es definitivamente un requisito.. Una nota final: los complementos BS3 de JavaScript no son más que complementos regulares de jQuery (BS utiliza jQuery bajo el capó). Esto significa que debería ser muy fácil tomar su plugin jQuery favorito de sitios como unheap.com y adaptarlos para que funcionen con BS3 con bastante facilidad. No olvide que todavía hay una gran cantidad de complementos disponibles, especialmente para ser utilizados con el marco, la mayoría de los cuales están a solo una búsqueda de Google.. Este tutorial representa un capítulo de Bootstrap 3 sucintamente, un libro electrónico gratuito del equipo en Syncfusion.Mostrar diálogo modal. Para que una acción desencadenante funcione, debe tener un atributo de conmutación y datos de destino asignados, y la conmutación debe tener el valor "modal"para mostrar que se dirige a un diálogo modal. El objetivo debe tener el selector de ID de la más externa ID = "myModal" en él, lo que significa que el atributo de datos para objetivo debería tener #myModal como su valor.modal aplicado a ella Opcionalmente, también puede agregar descolorarse, lo que le dará al modal una transición suave y agradable cuando se muestre y se oculte. Este exterior Orden Z y cualquier otra cosa relacionada con las personalizaciones modales globales que desee realizar..dialogo modal añadido a ello. Ese contenido modal asignado a ello Esta dentro de este tercero encabezado modal, cuerpo modal, y modal-footer. Estas tres secciones internas NO deben estar anidadas, sino que deben agregarse al marcado como hermanos entre sí, y se utilizan para definir el contenido de las tres secciones principales del diálogo.despedir atributo de datos tiene un valor de modal y no alerta. Cualquier elemento cliqueable ubicado dentro del marcado modal interno que tiene este atributo de datos, con este valor, cerrará el cuadro de diálogo cuando se haga clic en él..dialogo modal modal-lg y modal-sm. La clase de tamaño grande expande el ancho del modal a la mitad del ancho de la pantalla (ideal para tablas y listas), mientras que el tamaño pequeño reduce el ancho predeterminado a aproximadamente la mitad de su tamaño original (ideal para preguntas como sí / no).$ ('# myModal'). modal (telón de fondo: verdadero / falso, teclado: verdadero / falso, mostrar: verdadero / falso, remoto: 'ruta a url que devuelve contenido');
fondo: Booleano verdadero o falso para incluir o no el fondo sombreado en la página cuando se muestra el modal; si el valor estático se especifica, luego se muestra el fondo pero NO cierra el modal cuando se hace clic en él, como lo hace si cierto es usado.teclado: Booleano verdadero o falso; Permite o no permite que la tecla de escape cierre el modal..espectáculo: Booleano verdadero o falso, muestra automáticamente o no muestra el diálogo tan pronto como se inicializa.remoto: Cadena que contiene una url para obtener el contenido interno del cuerpo del diálogo; si se proporciona esto, entonces el cuadro de diálogo le pedirá a la url que proporcione una porción de HTML para usar en el cuerpo del modal.Pestañas
elementos incrustados dentro de cada uno de sus elementos, con el href de cada ancla apuntando a la carné de identidad de cada asociado lengüeta.contenido de la pestaña lo. Dentro de este panel de pestañas y un carné de identidad atributo que coincide con la pestaña asociada en el conjunto de navegación. Opcionalmente, también puede agregar fundirse para desaparecer las pestañas cuando cambian, y activo para marcar cuál de las pestañas se muestra actualmente.
Nos auto-actualizamos, creemos, renacemos
Existimos como superestructuras de cuatro dimensiones.
El objetivo de los campos morfogenéticos es plantar ...
Conjunto de pestañas producido por ejemplo de códigopestaña ('mostrar') en eso. Cuando se haga esto, sus pestañas automáticamente harán que la pestaña referenciada sea la seleccionada. Al igual que con los modales (y otros), hay eventos disponibles para decirle cuándo cambian las cosas; Los detalles y los parámetros de cada llamada se pueden encontrar en los documentos de BS3..Tooltips y Popovers
palanca con el valor información sobre herramientas a cualquier elemento HTML estándar para el que desee que se muestre la información sobre herramientas. Para definir el texto de la información sobre herramientas, agregue un atributo de título que contenga el texto deseado y, opcionalmente, agregue un atributo de datos llamado colocación que contiene el valor izquierda, parte superior, fondo, o Correcto según sea necesario, según la dirección en la que desee que se muestre la información sobre herramientas.
$ ('# mybutton'). tooltip ();información sobre herramientas () en cada elemento que tiene una información sobre herramientas adjunta.
Botón con información sobre herramientas que lo acompañapopover (). La diferencia principal entre una ventana emergente y una información sobre herramientas es que las ventanas emergentes pueden contener más contenidos que una información sobre herramientas.contenido, y el título Este atributo se utiliza para dar a la ventana emergente un área de mini título (similar a la forma en que se usa el área de encabezado en un componente del panel). El siguiente código muestra cómo definir una ventana emergente simple:$ ('# mybutton'). popover ();
Botón BS3 con un popover adjuntoPaneles plegables
grupo de paneles y dale un carné de identidad. Entonces, dentro de eso, necesitas una serie de div siendo un único panel autónomo.título del panel dentro de una encabezado del panel. Este encabezado debe contener un Etiqueta con dos atributos de datos asignados: uno llamado conmutador de datos, y uno llamado padre de datos.colapso, y el atributo padre debe contener el carné de identidad de lo externo href con el carné de identidad del cuerpo del panel de destino que debe ser el objeto del comportamiento de colapso. Cada uno de los paneles objetivo debe tener las clases. colapso del panel y colapso asignado a ellos. La consciencia es la riqueza de la verdad, y de nosotros.
El planeta está irradiando superestructuras de cuatro dimensiones.
La realidad siempre ha estado irradiando mensajeros cuyas almas son abiertas por el polvo estelar.
Reemplazo de acordeón producido por muestra.palanca con el valor colapso, y un atributo de datos llamado objetivo con el selector para el panel de destino como su valor.Carrusel
Tú y yo somos seres del planeta.
Nada es imposible
Tú y yo somos seres del planeta.
Carrusel producido por ejemplo de código
Accentsconagua