martes, 7 de enero de 2014

[BootStrap] MiniTutorial Parte 4

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

Bootstrap se puede incluir en tu pagina de 2 maneras, ya sea compilado o raw (crudo). En bootstrap 2.2.2 el archivo sin comprimir es de 59KB y la version comprimida es de 32KB. Todos los complementos de bootstrap son accesibles usando el API de datos incluida.Con esto, usted no necesita incluir una sola linea de codigo javascript para invocar cualquiera de las funciones del complemento.Tipicamente, javascript se encuentra en un archivo separado o en la parte inferior de la pagina antes del cierre </body>. Usted puede utilizar el atributo src para enlazar a otro archivo, o puede escribir el contenido dentro de las etiquetas de apertura y cierre.




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:

Si necesitas desactivar un solo complemento, puedes hacerlo mediante programacion utilizando name-space  (espacio de nombres) del complemento junto con el name-space de la data-api (api de datos).



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

El popover es un hermano del tooltip, que ofrece una vision amplia completa con un titulo. Para activar el popover, el usuario solo tiene que pasar el cursor sobre el elemento. El contenido del popover puede rellenarse por completo con el uso de la API de datos de Bootstrap. Este metodo requiere un Tooltip.

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="#">&times;</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">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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 en la entrada