¿Cuál es la mejor biblioteca de estilos de elemento de formulario/plug-in (jQuery)?

Question

En el proyecto en el que estoy trabajando actualmente elementos de formulario (como <input>, <select>, <textarea>, etc.) debe tener un aspecto no estándar 'look-and-feel'.

¿Qué biblioteca o complemento (jQuery) puede recomendar para esto?

He buscado algunas de las bibliotecas disponibles, pero no he encontrado una biblioteca que se adapte a mis necesidades. Todos ellos tienen idea de elemento 'real' - 'falso' antes que ellos. El proyecto tiene muchos elementos de formulario creados sobre la marcha e inyectados en el DOM.

Los principales requisitos son:

• Creación de elemento de 'falso'/s sobre la marcha.
• Posibilidad de aplicar estilos para un nodo o selector de CSS (no para toda la página).
• Propagación de eventos no intrusivos entre elementos falsos y reales. (El elemento falso debe responder a los cambios en el elemento real y enviar eventos que ocurran en él al elemento real correspondiente como borroso, foco, cambio, clic. La biblioteca debe ocuparse de la propagación de eventos, no del código)
• Debe ser compatible con IE7 y hacia arriba.
• debe tener una buena documentación y API pública flexibles

estoy luchando con una biblioteca y casi "adaptarse" a los requisitos, pero que carece de la documentación y la concesión de licencias está claro en cuanto a si puedo modificarlo.

¡Muchas gracias por la ayuda!

Saludos cordiales.

Answer 1

Puede consultar Twitter Bootstrap. Creo que utiliza CSS para realizar la mayoría de sus trucos, por lo que no debería necesitar el concepto de un componente de delegado (lo real/falso) para obtener un aspecto ligeramente más pulido.

Answer 2

¡Puede ver esto!

http://twitter.github.com/bootstrap/base-css.html#forms 

¡Bootstrap tiene cosas muy útiles que te pueden ayudar!

Answer 3

Me gusta mucho jQtransform: sólo tiene que incluir la librería jQuery y jqtransform complemento

//required 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script> 

y luego aplicar las transformaciones de toda forma

<script type="text/javascript"> 
$(function() { 
    //find all form with class jqtransform and apply the plugin 
    $("form").jqTransform(); 
}); 
</script> 

oa una forma específica

<script type="text/javascript"> 
$(function() { 
    //find all form with class jqtransform and apply the plugin 
    $("form.jqtransform").jqTransform(); 
}); 
</script> 

Answer 4

Si solo quiere darle un estilo a la entrada, seleccione y textarea's en realidad no necesita javascript para hacerlo. Todo esto es posible con css normales (cambie los bordes, los colores, el fondo, las esquinas redondeadas, etc.). Solo los navegadores más antiguos (IE) no podrán usar esquinas redondeadas en sus elementos (de formulario).

Si también desea poder diseñar el menú desplegable de su elemento de selección, puede necesitar javascript, porque eso no funcionará en CSS.

De todas las bibliotecas existentes que miré, encontré que jqTransform es el más fácil de usar (como se mencionó anteriormente) porque ofrece los reemplazos HTML más limpios para los elementos del formulario. Que son todos fáciles de diseñar con CSS.

Pero tengo algunos problemas con jqTransform. Para empezar, contiene un error que hace que el evento onchance en un elemento seleccionado no se dispare, y tampoco tiene la opción destruir/actualizar. Por lo tanto, no podrá diseñar nuevos elementos inyectados en una forma ya diseñada. En ambos casos, he creado soluciones para que funcione. Encontré una solución para el evento onchange (en algún lugar de stackoverflow) y también escribí una función adicional para actualizar un elemento jqTransform.

Pero, debido a estos problemas y al hecho de que jqTransform no se ha actualizado desde 2009, hace aproximadamente un mes decidí escribir mi propio plugin de jQuery para manejar esta funcionalidad por mí.

Se llama 'jQuery Mighty Form Styler' y debería funcionar bien con jQuery 1.7 y superior. En este punto, solo aplica estilos al elemento seleccionado, ya que otros elementos del formulario se pueden diseñar con css. Entonces, ¿por qué agregar tiempo de carga a su página con javascript innecesarios? Estoy planeando agregar radio y casillas de verificación también porque diseñarlas con CSS no es tan fácil (y no funciona en muchos navegadores).

Ya tiene una función de actualización y destrucción para eliminar los elementos falsos o actualizar el contenido de los elementos falsos.

Puede obtenerlo en http://www.binkje.nl/mfs donde también puede encontrar la documentación. Es gratis para que todos lo usen. Aunque creo que no debes diseñar nada con javascript. Eso es algo que solo debes hacer con CSS.

Answer 5

es posible que desee ver en los (febrero de 2014):

uniformjs.com - formulario de elementos de estilo (IE7 +, Chrome, Safari, Firefox)

github.com/emblematiq/Niceforms - elementos de formulario styling - (? Tal vez) suena arriesgado como ninguna comunidad, uno commiter solamente (IE7 +, Firefox2 +, Safari3 +, Opera9 +, Chrome0.3 +)

github.com/harvesthq/chosen y harvesthq.github.io/chosen - forma seleccione caja/desplegable

ivaynberg.github.io/select2 - cuadros desplegables (IE8 +), parece que se originó de Elegido.js (para ser comprobado doble)

github.com/Robdel12/DropKick y robdel12.github.io/DropKick - forma seleccionar/cuadro desplegable

github.com/gfranko/jQuery.selectBoxIt.js - forma seleccionar/cuadro desplegable

brianreavis.github.io/selectize.js o github.com/brianreavis/selectize.js - híbrido de un cuadro de texto y cuadro - útil para el etiquetado, listas de contactos, selectores de campo, y así sucesivamente

arthurgouveia.com/prettyCheckable - formulario de casillas de verificación & botones de radio estilo (IE7 +, Chrome, Firefox, Safari & navegadores móviles)

http://xoxco.com/projects/code/tagsinput/ o https://github.com/xoxco/jQuery-Tags-Input - etiquetas

Twitter Bootstrap podría ser una buena opción también - Use the Customizer cargar sólo la parte de la biblioteca que necesita, leer más sobre customizing Twitter bootstrap components

Answer 6

Si usted está buscando un estilo para ambos computadora de escritorio web y móvil: una solución receptiva: echa un vistazo al Mobiscroll Forms.

Se envía con 13 controles distintivos desde entradas de texto hasta alertas, notificaciones y controles deslizantes personalizables. Debe estar cubierto para sus necesidades básicas y más allá.

Otra cosa a tener en cuenta es que los elementos se pueden diseñar con los temas incorporados, para iOS, Material, Windows, Web y, por supuesto, con CSS encima.

• El conjunto de herramientas se puede descargar desde website.
• Las demostraciones pueden ser visto here.
• Si lo prefiere: Github repo y NPM package.