Colección de librerías javaScript y jQuery para formularios, tipografía, imágenes, herramientas de desarrollo y mucho más.

Hoy os voy a presentar una colección de librerías para javaScript y jQuery que nos facilitaran mucho la vida a la hora de programar nuestras webs. La colección sería para formularios web, tipografía, productividad, imágenes, texto, tablas, listas y herramientas de desarrollo muy útiles.

Pero vayamos por partes y poco a poco porque hay mucha info.

Segunda parte: tipografía
Tercera Parte: Productividad, mapas, gráficos e imágenes
Cuarta parte: Texto, tablas, listas y herramientas útiles
Tutorial sobre prism

Formularios web y validación de datos

Select2jQuery Plugin

Este plugin es para mejorar y reemplazar las cajas que utilizamos con la etiqueta HTML <select>. Con el podrás incluir campos de búsqueda, conjunto de datos y scrolling infinito de resultados. Al escribir una búsqueda las entradas que no coincidan desaparecen y las opciones pueden ser elegidas tanto con 'enter' como con un click del ratón. El plugin funciona con los campos estándar del atributo 'input' como también con las selecciones mútltiples y optgroup. También soporta selected, disabled y  el atributo de HTML5 placeholder.

jQueryCoreUISelect

Esta sería otra solución multi-plataforma para mejorar la etiqueta select con jQuery y CSS. Requiere jQuery 1.6 o superior y nos proporciona una personalización completa, soporta optingroup, cálculos automáticos, soporte para teclado, llamada de funciones y es compatible con los dispositivos móviles.

SelectBoxIt

Otra opción para modificar a tu antojo las cajas que se crean cuando usamos la etiqueta <select> en el código HTML, de todos los plugins sobre <select> este sería el más completo sin lugar a dudas. Tiene integración con Twitter Bootstrap y mucho más.

iCheck

jQuery plugin para modificar y dar estilo a los "checkboxes" e "input radio". El mejor de todos los que aquí se expone.

Sisyphus

Este script funciona de manera semejante a como Gmail guarda los borradores de los mails. Almacena los datos del formulario en el 'Local Storage' HTML5 del navegador  y los restaura cuando se recarga la página o se re-abre en una nueva pestaña. Los datos son borrados del 'Local Storage' cuando el usuario confirma o cancela el formulario.

jQuery Credit Card Validator

Con esta librería podrás adjuntar a los campos <input> para que cada vez que cambien los números del campo la función de validación sea llamada. Cuando introduzcas el número de una tarjeta y esta es reconocida verás que el tipo de tarjeta es seleccionado y si el número de la tarjeta de crédito es valido aparecerá una marca de validación verde. El plugin acepta todas estas tarjetas: American Express, Diners Club, Discover Card, JCB, Laser, Maestro, MasterCard, Visa y Visa Electron.

Otros recursos similares :

Recurso 1
Recurso 2

TextExt

Esta librería te permitirá transformar texto HTML en los campos de las etiquetas <input> sin tener que recurrir a código innecesario. El plugin inserta tanto mejoras estéticas en el código como la posibilidad de agregar entradas como por ejemplo Etiquetas, Ajax, Focus y otros.

Avgrund: Plugin para los "Modal Boxes"

Con este plugin jQuery podrás integrar los "pop-ups" y "modal boxes" con la página de una manera muy elegante. Usa las transformaciones y transiciones de CSS para mejorar el resultado. Funciona con todos los navegadores modernos y para IE 6-9 tiene un comportamiento normal de pop-up. Funciona a partir de jQuery 1.4 y tan solo pesa 2Kb.

Ideal Forms Framework

Plugin jQuery para crear y validar formularios en HTML5 usando el método Responsive. Provee soporte para el teclado, customizar todo tipo de inputs, validación en cada campo, localización y para los placeholder de HTML5. Valido para usar en IE8+, Chrome, Firefox, Opera, iOS5+, Android 4.0+.

MailCheck

Con MailCheck podrás ayudar al usuario si escribe mal el dominio del mail para que le aparezca una mención tipo "te refieres a Gmail?" De por si ya contiene ciertos dominios de mails pero podrás incluir los tuyos propios.

Validate.js

Librería  muy ligera para validar formularios. Podrás validar los campos de tus formularios usando alrededor de una docena de reglas y determinar mensajes propios. Esta librería no tiene ninguna dependencia y puedes definir tus propias validaciones.

jQuery File Upload

Con este widget podrás hacer múltiple selección de archivos, soporta el "Drag&drop" (suelta y arrastra), barras de progreso y vista previa de imágenes. Soporta múltiples dominios, fragmentar y reanudar la subida de archivos como el cambio de tamaño en imágenes. Funciona con cualquier plataforma del lado servidor (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) que soporte la subida de archivos en formularios HTML.

Grumble.js

Este plugin nos ofrece la posibilidad de crear tooltips sin estar limitado por puntos cardinales. Con grumble puedes poner las tooltips alrededor de cualquier elemento a cualquier distancia y en cualquier angulo usando CSS. Funciona incluso con Ie6, otra librería increíble para hacer tooltips con muchos diseños e implementaciones sería Tipped, posee una extensa API.

Phery

Librería que linkea PHP, jQuery y AJAX de manera ligera, te permite manipular el DOM con PHP mientras que puedes seguir trabajando con eventos JavaScript, JSON y HTML. Funciona con Firefox 3.6+, IE 8+, Chrome 12+, Safari 5+, Opera 10+.

D3js

D3js es una librería de JavaScript con la que podrás manipular todo tipo de documentos basados en datos. D3 te ayudará a darle vida a tus datos usando HTML, SVG y CSS. Esta librería usa los estándares web y te da plena capacidad en todos los navegadores modernos sin la necesidad de usar frameworks de terceros. Combina el poder de la visualización de componentes y te acerca a manipulación de datos a través del DOM.

Como usarlo? Aquí te dejo el tutorial de github.

LeanModal

Esta sería otra opción para las ventanas modales, sus fortalezas serían la perfecta ocultación con el contenido de la página, tan solo pesa 1Kb (minified), flexibilización con la anchura y altura, más de una instancia por página y es ideal para logins, darse de alta...

Moist

Esta librería realmente me ha sorprendido por su potencia, consistiría en la posibilidad de crear de una manera muy sencilla y ligera la especificación de HTML como objetos JavaScript sin obtener un marcado HTML confuso. Con Moist no tienes que manipular el DOM directamente. AWESOME!!!

Ejemplo de su uso: Moist.html({div:[]});

Sería los mismo que: <div></div>

Esto: Moist.html({div:[{h1:["Moist!"]}], id: "main", _class: "container"});

Produce: <div id="main" class="container"><h1>Moist!</h1></div>

Message Library

Librería para crear tus propias y personalizadas alertas, notificaciones y confirmaciones. No tiene dependencias externas tan solo pesa 4Kb y es muy sencillo de usar.

Bootboxjs

Pequeña librería de JavaScript que te permite crear cajas de dialogo al estilo Twitter de Bootstrap sin tener que preocuparte por la necesidad de crear, manipular o remover nada sobre elementos del DOM o manejadores de eventos de JavaScript.

Otras librerías que usan Twitter Bootstrap como referencia para poder mejorar tus webs realizadas con Bootstrap serían:

1- Dangrossman, con este script podrás seleccionar rangos de datos en una gráfica utilizando los drop-downs de bootstrap. Este script utiliza el plugin jQuery datejs para analizar cadenas de datos y definir rangos personalizados y con el CSS de Bootstrap Twitter.

2- Bootsnipp, podrás diseñar elementos y snippets de código para Bootstrap, tanto en HTML, CSS como JavaScript.

ddSlick

Potente y ligera librería jQuery con la que podrás crear magníficos drop-downs incluyendo imágenes, descripciones cortas y como no el típico texto. También incluye la posibilidad de llamar a funciones cuando seleccionas un elemento. Puedes integrar esta librería con CSS3 Drop-Downs.

Noty

Con el plugin jQuery Noty hace que crear los mensajes de alertas, error, peligro información y conformación sea de lo más fácil. La notificación se puede posicionar an cualquier parte de la página y puedes personalizar tanto el texto, animación velocidad como los botones.

jQuery.complexify

Complexify te ayudará a que los usuarios comprueben de manera visual si la contraseña que están introduciendo coincide con la anterior y a más a más te dirá si estás usando una contraseña fuerte, media o débil.

Numberfy

Numberfy te permitirá crear etiquetas <textarea> con un índice numérico para cada línea, incluso si presionas enter la línea se parte en dos y la numeración continua. El script no funciona en IE debido al bug con la propiedad text-wrap.

FormAccordion

Plugin jQuery para hacer aparecer/desaparecer los campos de un formulario en función de las respuestas del usuario.

SuperLabels

Librería jQuery con la que podrás darle a tus formularios un estilo dinámico para les etiquetas <label>. Cuando el el cursor del usuario se centre en el campo verás como el texto por defecto se mueve para poder insertar texto.


Bueno, hasta aquí serían todas las librerías a cerca de formularios y manejo de datos. Como que está siendo muy extenso voy a ir dividiendo la entrada por secciones. La siguiente será sobre tipografía, tanto librerías como plugins.

Stay tunned!!!

Segunda parte: tipografía
Tercera Parte: Productividad, mapas, gráficos e imágenes
Cuarta parte: Texto, tablas, listas y herramientas útiles

comments powered by Disqus