Si estas utilizando jQuery en tu aplicación web, o intentas incrustar un Google Maps en tu Website este plugin para jQuery nos cae de maravilla, ya que con una pocas instrucciones podemos personalizarlo a nuestro antojo. Google Maps jQuery Plugin es un plugin para jQuery, pesa menos de 10kb y esta liberado bajo licencia GPL, esta testeado en los navegadores más populares como Firefox 2+, IE6+ y Safari 3+.

 

TopUp es un plugin JavaScript para realizar Lightbox, esta desarrollado con jQuery y la librería jQuery UI los cuales nos brindan la posibilidad de tenerlos en nuestra Web. Actualmente TopUp soporta distintos tipos de lightbox, aparte de realizar la función para imágenes, podemos poner Flash, Videos Youtube, Windows Media, RealPlayer, Quicktime, iframes ...

Los formularios siempre son indispensables en cualquier website, ya sean formularios para mandar un simple mail, hasta formularios muy completos de registro. El objetivo de este post es tratar de convertir los simples formularios html en formularios más útiles y fáciles de llenar para el usuario, convirtiéndolo en una alternativa para familiarizar el formulario al cualquier usuario ...

JSBin es una aplicación Web que nos permite editar, depurar y testear nuestro código JavaScript y CSS mediante un editor de código en línea, este particular Servicio Web también nos permite incluir los Frameworks más utilizados en JavaScript como: Prototype JS, Mootools, jQuery, Dojo, entre otros ...

jQuery Browser Plugin es un complemento para jQuery que nos facilita funciones para ver información sobre el navegador del usuario y el Sistema Operativo ...

 

Los Tabs CSS son una forma popular de navegación que permiten mostrar distintas areas de contenido al usuario mediante la selección de una pestaña. Este tutorial de Soh Tanaka nos mostrara como crear tabs sencillos con CSS y jQuery, para comenzar tenemos que tener la ultima version de jQuery(1.3.2).

Uploadify es un plugin para jQuery el cual utiliza flash para realizar la selección multiple de archivos.

Su implementación es muy sencilla y aquí. explico como se realiza:

Primero descargamos el plugin aquí. Despues de haberlo descomprimido en una carpeta del servidor local pasaremos a crear un archivo upload.html en el cual agregaremos las librerías javascript y css necesarias dentro del head ...

topLink es un plugin creado por David Walsh utilizando jQuery.

Cuando tenemos una pagina muy extensa nos vemos en la necesidad de bajar con el scroll, este plugin nos facilita un link cuando lo necesitemos, aparecera y desaparecera segun la posicion en que nos encontremos.

Para tener esta opcion en nuestra web solo tenemos que realizar estos simples pasos:

Crear el CSS para el boton

Esto lo pondremos dentro del head de nuestra pagina.

#top-link { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; }

Ahora debemos incluir la libreria jQuery 1.2.6 y el plugin ScrollTo dentro del head

<script type="text/javascript" src="jquery-1.2.6.js" ></script> <script type="text/javascript" src="jquery.scrollTo.js" ></script>

Seguido colocaremos el plugin topLink dentro del ...

shiftcheckbox permite a los usuarios para seleccionar el rango de casillas de verificación, haga click en una casilla y, a continuación, SHIFT + click en la última casilla de verificación deseada. Todas las casillas entre la primera y la última se seleccionaran.

Para este ejemplo tendremos que descargar el plugin e incluirlo en el head de nuestra pagina.

<script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery.shiftcheckbox.js"></script>

Luego incluimos el código que relizara todo el proceso mediante el class del checkbox.

$(document).ready ( function () { $.shiftcheckbox.init('shiftchk'); });

Ahora tendremos que poner el class 'shiftchk' a las casillas de verificación.

<input name="chk1" value="1" class="input shiftchk" type="checkbox">1 Item<br> <input name="chk1" value="1" class="input shiftchk" type="checkbox">2 Item<br> <input name="chk1" value="1" class="input shiftchk" type="checkbox">3 Item<br> <input name="chk1" value="1" class="input shiftchk" ...

Link nudging realiza un efecto de animación muy bueno para enlaces, cuando el mouse esta sobre el enlace, lo lanza a la derecha y cuando se quita el mouse regresa a su posición original.

Este ejemplo se realizara con dos librerías muy usadas, Mootools y jQuery.

Ejemplo con jQuery 1.2.6

Primero tienes que descargar esta versión de jQuery y colocarla en el head de tu pagina web, luego colocar este script también en el head.

$(document).ready(function() { $('a.nodo').hover(function() { $(this).animate({ paddingLeft: '20px' },400); }, function() { $(this).animate({ paddingLeft: 0 }, 400); }); });

Ejemplo con MooTools 1.2

Para este caso descargar Mootools 1.2 y colocarlo dentro del head de nuestra pagina web, el siguiente ...