Qual è la migliore libreria/plug-in per lo styling degli elementi form (jQuery)?

Question

Nel progetto a cui sto lavorando al momento elementi del modulo (come <input>, <select>, <textarea> ecc.) devono avere un look-n-feel non standard.

Quale libreria o plug-in (jQuery) puoi consigliare per questo?

Ho cercato tra alcune librerie disponibili, ma non ho trovato una libreria adatta alle mie esigenze. Tutti hanno un'idea "reale" - "falsa" dell'elemento. Il progetto ha molti elementi del modulo creati al volo e iniettati nel DOM.

I requisiti principali sono:

• Creazione di elemento 'falso'/s al volo.
• Possibilità di applicare stili per un nodo o selettore CSS (non per l'intera pagina).
• Propagazione di eventi non intrusivi tra elementi falsi e reali. (L'elemento falso dovrebbe rispondere ai cambiamenti nell'elemento reale e inviare eventi che si verificano sull'elemento reale corrispondente come sfocatura, messa a fuoco, modifica, clic. La libreria dovrebbe occuparsi della propagazione degli eventi, non del codice)
• Dovrebbe essere compatibile con IE7 e verso l'alto.
• dovrebbe avere una buona documentazione e API pubblica flessibile

sto lottando con una biblioteca e quasi "adattato" alle esigenze ma manca la documentazione e il rilascio delle licenze è chiaro sul fatto che posso modificarlo.

Grazie mille per l'aiuto!

Cordiali saluti.

Answer 1

Si potrebbe dare un'occhiata a Twitter Bootstrap. Credo che utilizzi i CSS per eseguire la maggior parte dei suoi trucchi, quindi non dovresti aver bisogno del concetto di componente delegato (la cosa reale/finta) per avere un aspetto leggermente più raffinato.

Answer 2

Potete vedere questo!

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

Bootstrap ha molto e utilizza le cose che possono aiutarti !!

Answer 3

mi piace molto jQtransform: è sufficiente includere libreria jQuery e plug jqtransform

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

e quindi applicare le trasformazioni a ogni forma

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

o ad una specifica forma

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

Answer 4

Se vuoi semplicemente inserire uno stile, seleziona e textarea non hai davvero bisogno di javascript per farlo. Questo è tutto facilmente possibile con i normali css (cambiare i bordi, i colori, lo sfondo, gli angoli arrotondati, ecc.). Solo i browser più vecchi (IE) non saranno in grado di utilizzare gli angoli arrotondati degli elementi (del modulo).

Se anche voi volete essere in grado per lo stile della discesa di voi selezionare elementi, potrebbe essere necessario javascript, perché questo non funziona in CSS.

Da tutte le librerie esistenti che ho visto ho trovato jqTransform il più semplice con cui lavorare (come accennato in precedenza) perché fornisce le sostituzioni HTML "più pulite" per gli elementi del modulo. Che sono tutti facili da stile con i CSS.

Ma, ho un paio di problemi con jqTransform. Per i principianti, contiene un bug che fa sì che l'evento onchance su un elemento select non si attivi, inoltre non ha alcuna opzione destroy/refresh. Quindi non sarai in grado di disegnare nuovi elementi iniettati in una forma già stilizzata. Per entrambi questi problemi ho creato soluzioni alternative per farlo funzionare. Ho trovato una correzione per l'evento onchange (da qualche parte qui su StackOverflow) e ho anche scritto una funzione extra per aggiornare un elemento jqTransform.

Ma, a causa di questi problemi e del fatto che jqTransform non è stato aggiornato dal 2009, circa un mese fa ho deciso di scrivere il mio plugin jQuery per gestire questa funzionalità per me.

Si chiama 'jQuery Mighty Modulo Styler' e dovrebbe funzionare bene con jQuery 1.7 e superiori. A questo punto, disegna solo l'elemento select, perché altri elementi del modulo possono essere disegnati con css. Allora perché aggiungere tempo di caricamento alla tua pagina con javascript non necessario? Ho in programma di aggiungere radio e caselle di controllo anche perché lo stile con solo css non è così facile (e nog funziona in molti browser).

Lo fa già dispongono di un aggiornamento e la funzione di distruggere per rimuovere gli elementi falsi o aggiornare il contenuto degli elementi finti.

si può ottenere in http://www.binkje.nl/mfs dove è anche possibile trovare la documentazione. È gratuito per tutti da usare. Anche se credo che non dovresti disegnare nulla con javascript. Questo è qualcosa che dovresti fare solo con i CSS.

Answer 5

si consiglia di guardare in quelle (febbraio 2014):

uniformjs.com - modulo di elementi stilistici (IE7 +, Chrome, Safari, Firefox)

github.com/emblematiq/Niceforms - elementi del modulo styling - (? Forse) suona rischioso come nessuna comunità, una sola commiter (IE7 +, Firefox2 +, Safari3 +, Opera9 +, Chrome0.3 +)

github.com/harvesthq/chosen e harvesthq.github.io/chosen - modulo selezionare la casella/discesa

ivaynberg.github.io/select2 - caselle a discesa (IE8 +), sembra aver avuto origine da Chosen.js (da ricontrollato)

github.com/Robdel12/DropKick e robdel12.github.io/DropKick - forma selezionare/box discesa

github.com/gfranko/jQuery.selectBoxIt.js - forma selezionare/box discesa

brianreavis.github.io/selectize.js o github.com/brianreavis/selectize.js - ibrido di una casella di testo e box - utile per la codifica, elenchi di contatti, selettori di campagna, e così via

arthurgouveia.com/prettyCheckable - caselle di forma & pulsanti di opzione styling (IE7 +, Chrome, Firefox, Safari & browser mobile)

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

Twitter Bootstrap potrebbe essere una buona opzione troppo - Use the Customizer solo caricare la parte della libreria di cui avete bisogno, saperne di più customizing Twitter bootstrap components

Answer 6

Se siete alla ricerca di uno stile per entrambi Web desktop e mobile: una soluzione reattiva: dai uno sguardo allo Mobiscroll Forms.

Viene fornito con 13 controlli distintivi da input di testo a avvisi, notifiche e cursori personalizzabili. Dovresti essere coperto per le tue necessità di forma base e oltre.

Un'altra cosa da notare è che gli elementi possono essere abbinati ai temi incorporati - per iOS, Materiale, Windows, Web - e ovviamente con i CSS sopra.

• Il set di strumenti possono essere scaricati dal website.
• Le demo possono essere viste here.
• Se si preferisce: Github repo e NPM package.