Bootstrap complementos Javascript
Los componentes tratados en el minitutorial parte 3 son solo el comienzo. Bootstrap viene incluido con 13 complementos de jquery que amplian las funciones y pueden agregar una mayor interaccion a tu sitio. Para comenzar a utilizar los complementos de javascript, usted no necesita ser un desarrollador de javascript avanzad. De hecho, mediante la API de datos de bootstrap, la mayoria de los complementos la mayoria de los complementos se pueden activar sin necesidad de escribir una sola linea de codigo.
Resumen
Como se menciono anteriormente, Bootstrap tiene un API de datos donde se pueden escribir atributos dentro del HTML de la pagina. Si tu necesitas apagar el API de datos, tu puedes desenlazar los atributos añadiendo la siguiente linea de javascript:
Api programatico
Los desarrolladores de bootstrap creen que usted deberia ser capaz de utilizar todos los complementos atraves de la API de javascript. Todas las apis son solo, metodos encadenables que devuelven una coleccion al actuar en consecuencia (evento).
Todos los metodos una opcion opcional en el objeto, una cadena llama a un metodo en particular, o a ninguno (inicia el complemento por defecto).
Transiciones
El complemento de transicion proporciona efectos de transicion simples. Algunos ejemplos incluyen:* Sliding o fading en modals (correderas o desaparaciones en modals)
* Fading out tabs (Desaparicion gradual en pestañas)
* Fading out alerts (Desaparicion gradual en alertas)
* Sliding carousel panes (Correderas paneles carrusel)
Modales
Un modal es una ventana secundaria que se acomoda frente a la ventana principal. Tipicamente, el proposito es mostrar contenido de una direccion separada que puede tener algun tipo de interaccion sin salir de la ventana padre. Las ventanas secundarias pueden proporcionar informacion, la interaccion o mas. Se puede usar como ventana de presentacion de imagenes (slideshow como en facebook :P) o como logins (acceso de administracion o usuarios), informacion de registro.Para crear una ventana modal estatica:
Para invocar la ventana modal, es necesario tener una especie de gatillo. Normalmente se usa un boton o un enlace. Si nos fijamos en el codigo de abajo, veras que en la etiqueta <a>, el href="MyModal" es el objetivo del modal (gatillo) que se desea cargar en la pagina. Este codigo le permite crear multiples modales en la pagina y luego tener diferentes factores desencadenantes para cada uno de ellos. Ahora, para ser claros, no carga multiples modales al mismo tiempo, pero usted puede crear varias paginas para cargar diferentes veces.
Hay tres clases que tenemos que tomar nota en un modal. La primera es .modal, lo que es simplemente identificar el contenido de una capa (<div>) como modal. La segunda es .hide, que indica al navegador para ocultar el contenido del <div> hasta que estemos listos para invocarlo. Y por ultimo la clase .fade cuando se activa el modal hara que los contenidos aparezcan y desaparezcan.
Uso
Utilizando el api de datos de javascript, solo hay que pasar unos atributos de datos para cambiar la presentacion. En primer lugar establecer los datos data-toggle="modal" en el enlace o boton que se desea utilizar para invocar el boton que se desea utilizar para invocar el modal y establezca el data-target="#foo" para el ID modal que desea utilizar. Para llamar a un modal con id="MyModal", utilizamos una sola linea javascript:$('#MyModal').modal(opciones)
Opciones
Opciones bien pueden pasar atraves de los atributos de datos o Javascript, para utilizar los atributos de datos agregamos la opcion data- con el nombre que le sigue (Por ejemplo: data-backdrop="").
Metodos
Los siguientes son algunos metodos utiles para usar con modales.Opciones
Activa tu contenido como un modal. Acepta una opcion opcional en el objeto..modal(opciones)
$('#MyModal').modal({
keyboard:false})
Toggle
Cambia manualmente un modal.
.modal('toggle')
$('#MyModal').modal('toggle')
Show
Abre manualmente un modal.
.modal('show')
$('#MyModal').modal('show')
Hide
Esconde manualmente un modal.
.modal('hide')
$('#MyModal').modal('hide')
Eventos
Bootstrap proporciona los eventos enumerados en la siguiente tabla si es necesario conectar a una funcion.
A modo de ejemplo, despues de que el modal se oculta, podriamos disparar una alerta:
$(#MyModal).on('hidden', function(){
//hacer algo
})
Menu Desplegable
Este capitulo lo cubrimos ampliamente en el la parte 3 por eso si quieres profundizar mas te recomiendo leer ese capitulo, en esta parte se ve la interaccion...Uso
Para utilizar un menu desplegable, agregamos data-toggle="dropdown" a un enlace o boton para activar el menu desplegable.
Si tu necesitas mantener los enlaces intactos (lo cual es util si un navegador no permite javascript) utilize data-target="#" junto al atributo href="#"
Uso de Dropdown atraves de Javascript
Para llamar a un menu desplegable desde javascript utilice lo siguiente:
$('.dropdown-toggle').dropdown()
Metodo
El dropdown toggle tiene un metodo sencillo para mostrar y ocultar la lista desplegable. No hay opciones:$().dropdown('toggle')
ScrollSpy
El complemento scrollspy le permite llegar a secciones de la pagina sobre la base de posicion de desplazamiento. En su ejecucion basica, mientras se desplaza, la clase .active a la barra de navegacion basada en la posicion de desplazamiento. Puede agregar el complemento scrollspy mediante atributos de datos, agregar data-spy="scroll" a los elementos que desea espiar/spy (por lo general el cuerpo) y data-target=".navbar" de la barra de navegacion que desea aplicar los cambios de la clase. Para que esto funcione, debe tener elementos en el cuerpo de la pagina que tienen ID coincidentes de los enlaces que estan espiando/spying.
Uso
Para scrollspy, usted tendra que añadir data-spy="scroll" a la etiqueta <body> junto con data-target=".navbar" que hace referencia al elemento que esta espiando.<body data-spy="scroll" data-target=".navbar"> </body>
En la barra de navegacion, usted tendrá anclas (anchors) que sirvan como indicadores para el elemento a espiar.
Uso a traves de Javascript
Si prefiere invocar scrollspy con Javascript en lugar de utilizar los atributos de los datos, puede hacerlo seleccionando el elemento a espiar, y luego invocar la funcion scrollspy():$('#navbar').scrollspy();
Metodo Scrollspy('refresh')
Al llamar scrollspy a traves del metodo javascript, es necesario llamar al metodo .refresh para actualizar el DOM. Esto es util si algun elemento del DOM ha cambiado.$('[data-spy="scroll"]').each(function(){
var $spy= $(this).scrollspy('refresh')
});
Opciones
Las opciones pueden ser pasadas a traves de los atributos de datos o Javascript. Para los atributos de datos, antenponga el nombre de la opcion de data- , como en data-offset=""
La opcion de desplazamiento (offset) es util cuando esta usando una barra de navegacion fija. Usted tendra que compensar el desplazamiento de unos 50 pixeles para que se lea en el momento correcto.
Toggleable Tabs
La navegacion por fichas se vio en el minitutorial numero 3. Mediante la combinacion de unos pocos atributos de datos, usted puede crear facilmente una interfaz con pestañas. Para ello, crearemos una interfaz de navegacion y envolveremos el contenido de las fichas dentro de un <div> con la clase .tab-content.
Uso
Para habilitar las pestañas, puede utilizar la API de datos de Bootstrap o el uso de Javascript directamente. Con el API de datos, es necesario agregar data-toggle en los anclajes (anchors). Los objetivos del anclaje (anchors) activara el elemento que tiene la clase .tab-pane y el ID relativo. Alternativamente data-target="" puede ser utilizado en lugar de href="#" para aplicar la misma accion. Aqui esta una manera de permitir la fichas (tabs).$('#myTab a').click(function (e){
e.preventDefault();
$(this).tab('show');
})
He aqui un ejemplo de las diferentes formas de activar las fichas (tabs):
$('#myTab a[href="#profile"]').tab('show');
$('#myTab a:first').tab('show');
$('#myTab a:last').tab('show');
$('#myTab li:eq(2) a').tab('show');
Eventos
Paneles de pestañas tienen dos eventos diferentes.
He aquí un ejemplo de código de un método que se muestra:
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // pestaña o ficha activada
e.relatedTarget // pestaña o ficha anterior
})
Si quieres mas informacion sobre el evento on puedes verlo en la pagina web de Jquery
Informacion sobre herramientas (ToolTips)
Tooltips son utiles cuando se necesitan para describir un enlace (o se utiliza junto a la etiqueta <abbr>) proporciona la definicion a una abreviatura. El plugin se baso originalmente en el plugin Jquery.tipsy escrito por Jason Frame. Tooltips ya se han actualizado para trabajar sin imagenes, animadas con una animacion CSS, y trabajando con el API de Bootstrap.
Uso
Para agregar un Tooltip, añadimos rel="tooltip" para una etiqueta de ancla. El titulo del ancla sera la informacion del tooltip. Los dos ejemplos siguientes se muestran como hacer esto en el API de Bootstrap y JavaScript respectivamente.<a href="#" rel="tooltip" id="example" data-placement="right" title="Esto es un ejemplo">Ejemplo</a><script type="text/javascript">$('#example').tooltip(opciones);</script>
Opciones
Al igual que todos los plugins, hay opciones que pueden agregarse atraves de la API de datos de Bootstrap o invocado desde Javascript. Todas las opciones deben tener como prefijo data- en ellos. Por lo tanto, la opcion del title se convertiria en data-title.
Metodos
Aqui estan algunos metodos utiles para los tooltips.Opciones
Se conecta un controlador a una descripción de elemento de colección:$().tooltip(options)
Show
Revela el en un elemento.$('#elemento').tooltip('show')
Hide
Oculta el tooltip de elemento:$('#elemento').tooltip('hide')
Toggle
Alterna sobre el tooltip.$('#elemento').tooltip('toggle')
Destroy
Oculta y destruye un elemento tooltip.Popover
Podemos usar el siguiente codigo para la colocacion de un popover:
<a href="#" class="btn" rel="popover" title="Usando Popover" data-content="Solo agrega el contenido para el atributo data-content.">Dame Click!</a>
Uso
Para activar el popover con javascript, utiliza la funcion .popover(), pasandole cualquier opcion que puedas necesitar.$('#ejemplo').popover(opciones)
Opciones
Todas las opciones se pueden pasar atraves de la API de datos de Bootstrap, o directamente con JavaScript.
Metodos
Aqui estan algunos metodos utiles para popovers.Opciones
Inicializa popover para una coleccion de elementos.$().popover(options)
Show
Revela un elemento popover.$('#elemento').popover('show')
Hide
Oculta un elemento popover.$('#elemento').popover('hide')
Toggle
Alterna un elemento popover.$('#elemento').popover('toggle')
Destroy
Oculta y destruye un elemento popover.$('#elemento').popover('destroy')
Alertas (Alerts)
Con el API de datos, es facil agregar la funcionalidad de mostrar mensajes de alerta.
Uso
Puede cerrar una alerta manualmente con el Javascript usando el metodo .alert() o usando los atributos de datos (data attributes) en conjuncion con un ancla (anchor) o un boton (button).Asi es como podra mostrar una alerta atraves de Javascript.
$(".alert").alert()
Asi es como podemos cerrarla usando el API de datos.
<a class="close" data-dismiss="alert" href="#">×</a>
Metodo Cerrar (Close Method)
Para activar todas las alertas que se cerraron, debemos usar el siguiente metodo. Para activar las alertas para animar fuera cuando esten cerradas. Hay que asegurarnos de que tengan la clase .fade y la clase .in$(".alert").alert('close')
Eventos
Hay dos eventos que pueden estar vinculados en la clase alerta de Bootstrap.
Como ejemplo, si usted quiere activar una funcion despues de que una alerta se ha cerrado, usted podria utilizar esta funcion:
$('#mi-alerta').bind('closed', function () {
// hacer algo…
})
Botones (Buttons)
Los botones fueron introducidos en el minitutorial numero 3. Con Bootstrap, usted no tiene que hacer nada para que funcionen como enlaces o botones en formularios. Con este complemento puedes ver algun tipo de interaccion, tales como loading states (estados de carga) o button groups (grupo de botones) con funcionalidad similar a toolbar (barra de herramientas).Loading State (Estado de carga)
Para agregar un Loading State a un boton solo tiene que añadir data-loading-text="Cargando..." como un atributo al boton.
Cuando se hace clic en el boton, la clase .disabled es agregada, dando la apariencia de que ya no se puede hacer clic.
Single Toggle
Al hacer clic en un boton con data-toggle="button" se añade una clase .active.
Check buttons
Los botones pueden funcionar como checkboxes (casillas de verificacion), lo cual le permite al usuario seleccionar muchas de las opciones en un grupo de botones. Para agregar esta funcion, agregue data-toggle="buttons-checkbox" para alternar el estilo del checkbox usamos .btn-group:
Radio buttons (Botones de radio)
La funcion de los radio buttons es similar a la de los check buttons. La principal diferencia es que un radio button no permite multiples selecciones solo un boton en el grupo puede ser seleccionado. Para agregar alternancia de estilo de radio en btn-group, agregamos data-toggle="buttons-radio":
Uso
El metodo .button puede ser aplicado a cualquier class o ID. Para habilitar todos los botones en .nav-tabs usando Javascript, agregamos el siguiente codigo:$('nav-tabs').button()
Metodos
Los siguientes metodos son utiles para utilizar con botones.Toggle
Toggle push state (alterna al estado como si boton estuviese aplastado). Da al boton la apariencia de que se ha activado.$().button('toggle')
Loading
Al cargar (loading), el boton esta desactivado y el texto cambia la opcion del atributo data-loading-text.<button type="button" class="btn" data-loading-text="cargando algo.." >...</button>
Reset
Reset button state (Reestablecer el estado del boton), Vuelve al contenido original del boton. Este metodo es util cuando es necesario regresar el boton a su estado primario.$().button('reset')
String
String en este metodo se refiere a cualquier cadena declarada por el usuario:$().button('string')
Para reestablecer el estado del boton y traer nuevos contenidos, utilice el metodo string.
<button type="button" class="btn" data-complete-text="finalizado!" >...</button>
<script>
$('.btn').button('complete')
</script>
Collapse (Colapso)
El complemento collapse hace que sea facil para el colapso de las divisiones de pagina. Tanto si lo utiliza para construir la navegacion acordeon o cajas de contenido, que permite una gran cantidad de opciones de contenido.
El siguiente codigo crea grupos de plegables (collapsible):
Tambien puede utilizar los atributos data para crear todo el contenido plegable (collapsible):
Uso
Usando Atributos Data
Como todos los complementos que usan la API de datos, puedes agregar todas las marcas (markup) necesarias sin necesidad de utilizar JavaScript. Agregar data-toggle="collapse" y data-target al elemento para asignar automaticamente el control de un elemento plegable (collapsible). El atributo data-target aceptara un selector CSS para aplicar el colapso. Asegurese de añadir la clase .collapse a el elemento plegable (collapsible). Si desea que este por defecto abierto, incluya la clase adicional .in.Para añadir la gestion de grupos de acordeon a un control plegable (collapsible), agregue el atributo de datos data-parent="#selector".
Usando JavaScript
El metodo collapse puede ser activado por javascript de la siguiente manera:$(".collapse").collapse()
Opciones
Las opciones siguientes se pueden pasar a traves de los atributos de datos (data attributes) o con Javascript.
Métodos
Los siguientes metodos son utiles para usar con elementos plegables (collapsible).Opciones
Activa tu contenido como un elemento plegable (collapsible). Acepta unas opciones al objeto..collapse(options)
Toggle
Activa un elemento plegable (collapsible) para mostrarse (shown) u ocultarse (hidden).$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Show
Muestra un elemento plegable (collapsible):.collapse('show')
Hide
Oculta un elemento plegable (collapsible):.collapse('hide')
Eventos
Hay 4 eventos que pueden ser usandos en el complemento collapse.
Despues de un <div> que ha sido colapsado, podria usar el siguiente codigo para ejecutar una funcion:
$('#myCollapsible').on('hidden', function () {
// hacer algo...
})
Carousel (Carrusel)
El carrusel bootstrap es una forma flexible, resposive para añadir un slider a tu sitio. Ademas de ser resposive el contenido es suficientemente flexible como para permitir imagenes, iframes, videos o casi cualquier contenido que es posible que desee.
El siguiente codigo crea un Carrusel en Bootstrap:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
<!-- Carousel navegacion -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Uso
Para implementar el carrusel, solo tiene que añadir el codigo con el formato anterior, no hay necesidad de atributos data (de datos), el desarrollo esta basado solo en simples clases (class-based). Usted puede llamar manualmente el carrusel con javascript usando el siguiente codigo:$('.carousel').carousel()
Opciones
Las opciones pueden ser pasadas atraves de los atributos data (de datos) o atraves de javascript.
Métodos
Los siguientes metodos son utiles para usar en el carrusel.Opciones
Inicializa el carrusel con una de las opciones del objeto e inicia un ciclo atraves de los items.$('.carousel').carousel({
interval: 2000
})
Cycle
Recorre los items del carrusel de izquierda a derecha..carousel('cycle')
Pause
Detiene el carrusel del ciclo atraves de los items..carousel('pause')
Number
Recorre el carrusel a un marco (frame) en particular (basandose desde 0, igual a una matriz).carousel('number')
Prev
Se regresa al item anterior..carousel('prev')
Next
Se va al siguiente item..carousel('next')
Eventos
El carrusel tiene dos eventos que pueden ser utiles.
Typeahead (Escribir un encabezado)
Typeahead le permite crear facilmente sugerencias o encabezados en los inputs de los formularios. Por ejemplo, usted podria precargar los estados de un campo o con un poco de javascript obtener resultados de busqueda utilizando algunas llamadas AJAX.
Uso
Usando la API de datos (data API) puede agregar fuentes (source) usando el atributo data-source.Los items pueden ser listados en cualquier matriz (array) usando JSON o una funcion.
<input
type="text"
class="span3"
data-provide="typeahead"
data-items="4"
data-source="[
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
...
]"
>
Podemos llamarlo directamente utilizando Javascript con el siguiente metodo:
$('.typeahead').typeahead()
Opciones
Muestra una lista de opciones.
Affix (Afijo)
El complemento affix permite con un <div> quedarse fijo en un lugar de la pagina. Un ejemplo comun son los iconos de redes sociales (facebook,twitter,google+). Ellos comienzan en un lugar, pero como en la pagina encuentra una marca determinada, el <div> se bloqueara en su lugar y se dejara desplazar con el resto de la pagina.Uso
Para aplicar el complemento affix a un div, puede utilizar cualquiera de los atributos de datos (data attributes) o puede utilizar Javascript directamente. Recuerde que debe colocar el elemento de forma que se pueda fijar a la pagina. La posicion se controla mediante el atributo data-spy utilizando affix, affix-top o affix-bottom. Usted puede usar entonces data-offset para calcular la posicion del desplazamiento.<div data-spy="affix" data-offset-top="200">
...
</div>
Opcion
Hasta aqui el minitutorial parte 4 de bootstrap nos vemos en la 5 parte, espero que les sea de utilidad :)
No hay comentarios:
Publicar un comentario