Detectar Click fuera de un Elemento con jQuery

El otro día de encontraba con un compañero de trabajo que estaba batallando para manipular un evento en un dropdown menú que habia hecho,
y el problema era que quería que una vez que le daba click en el menú y se expadía al hacer click fuera de este elemento este se volviera
a colapsar. Hay muchos lugares que presentaban un solución aparente pero aqui muestro un código que puede funcionar para muchos casos.



El código es muy simple pero la magía que hace jQuery es genial. Si se le da click en un html cualquiera se va a esconder el menú, así que para evitar esto
en nuestro elemento detenemos esta acción con stopPropagation(). Aquí lo que estamos haciendo en realidad es que estamos manipulando eventos.

El primer evento que sucede es el click de nuestro selector 'html', entonces si le damos click en '#dropList' el primer evento en responder es el de mayor jeraquía que es 'html', entonces se corre el metodo de esconder el menú.

En el segundo evento si le damos click en '#dropList' se va a esconder aunque este no se encuentre visible y para indicarle que este elemento es el que queremos usar, detenemos la ejecución de eventos padre con stopPropagation() y ejecutamos el de nuestro elemento '#dropList'.

No hay mucha ciencia pero si se desea mas informacrion de stopPropagation() pueden consultarla aquí. :D

Crear un Dialogo simple con jQuery UI

Como pueden leer en la parte de arriba, les voy a mostrar como hacer un dialog simple de jquery. El dialogo consta de un título, un simple mensaje y el boton de aceptar.

Conforme los usuarios vayan opinando ire mostrando opciones para poder manipular el dialogo, pero las mas comunes y que voy a usar aqui es que el dialogo se muestre en forma Modal. ¿Qué significa esto? que al mostrar un dialog en la forma Modal este ocupara toda la pantalla del navegado hasta que el usuario lo cierre. Aquí el ejemplo.

Mostrar Dialogo

y el código que nos produce este resultado es el siguiente:



El código de arriba es lo que hace la magia con jQuery, y estamos diciendo que sea modal, con un tamaño de 250x250 pixeles y que tenga un posición de 150x150 pixeles con respecto a nuestro explorador, ya que el dialogo aparece en posición absoluta.

Pero falta de mencionar algo. ¿En donde esta esa información que aparece en el dialogo? La respuesta es muy simple. Es un codigo html que ponemos dentro de una "div" el cual contiene el ID al cual vamos a hacer la referencia con jQuery, el Título de nuestro dialogo y finalmente el contenido que deseemos con un lindo boton. El html es escondido por jQuery UI y se mostrará cuando uno se lo indique. El codigo html es el siguiente:



Si tienen alguna duda respecto al código no duden en ponerla, recuerden que pueden encontra mas informacion del Dialogo en aquí

Este es un simple dialogo hecho con jQuery, yeah !!

No olvides dejar tus comentarios :D

Comprobar que jQuery funcione !!

La manera mas simple de saber si nuestro jQuery esta funcionando en nuestro sitio es con el poderoso alert :p, y digo poderoso por que me ha servido muchas veces para debuggear.

Una vez que tenemos agregado el api probamos de la siguiente manera en nuestro head

Web 2.0 y jQuery

Tal vez mucho se han de estar preguntando que es la Web 2.0 y el jQuery. Habra otros que ya lo sepan e incluso ya lo manejan, pero para aquellos que empiezan a interesarse en estos rumbos me gustaría platicar un poco de ello y con el tiempo y dando consejos y ayudas sobre la programación web.

Para empezar ¿Qué es el Web 2.0?

Según wikipedia y tiene razon...El término Web 2.0 (2004–actualidad) está comúnmente asociado con aplicaciones web que facilitan el compartir información, la interoperabilidad, el diseño centrado en el usuario y la colaboración en la World Wide Web. Ejemplos de la Web 2.0 son las comunidades web, los servicios web, las aplicaciones Web, los servicios de red social, los servicios de alojamiento de videos, las wikis, blogs, mashups y folcsonomías.

¿Y jQuery?

Segun la página de jQuery...jQuery es una librería rápida y concisa de JavaScript que simplifica la creación del documento HTML, manejo de eventos, animación e interacciones Ajax para el desarrollo de web rápido. jQuery esta diseñado para cambiar la manera en que escribes JavaScript.

Y ahora que he puesto unas pequeñisimas palabras estare posteando sobre esto, si tienen peticiones en especial son bienvenidas, no hago tarea, pero me interesan los retos.