Come si applicano gli stili dell'interfaccia utente jQuery ai normali elementi del modulo, come input e select tags?

Question

Forse mi manca qualcosa, ma dopo aver letto i documenti dell'interfaccia utente jQuery, non vedo nulla sull'applicazione degli stili di tema ai normali widget, come input e select tags. Dopo aver chiamato button() sui pulsanti e datepicker() sui tag di input che selezioneranno le date, dovrei avvolgere normali textareas e input in un <div class="ui-widget"> per dare uno stile dall'aspetto coerente, o dare loro una certa classe css, o chiamare una funzione sul carico del documento quello stile tutto il resto?

Answer 1

I temi dell'interfaccia utente jQuery funzionano come qualsiasi altro documento CSS che si desidera utilizzare. Se c'è un insieme di stili che stai cercando su un particolare elemento, spesso tutto ciò che devi fare è aggiungere le classi che definiscono gli stili che vuoi all'elemento in questione.

La parte difficile è che, a seconda del browser, molti elementi di forma hanno gradi di stilizzazione molto diversi. In particolare, Internet Explorer utilizza controlli di modulo OS nativi, che ottengono lo stile predefinito dalle impostazioni del tema del sistema operativo, mentre altri browser come Chrome e Firefox utilizzano il proprio set di controlli dei moduli e hanno uno stile predefinito impostato come proprio.

In molti casi, ciò che fanno i widget dell'interfaccia utente jQuery è nascondere gli elementi di modulo predefiniti e quindi sostituirli con altri elementi stilizzabili, come una struttura di <div> s, che possono essere disegnati per imitare gli elementi di modulo reali. Queste strutture finte hanno anche gestori di eventi javascript collegati per catturare l'input e restituirlo agli effettivi elementi del modulo, nonché renderlo all'interno di se stessi.

Quindi, in poche parole, applicare gli stili dell'interfaccia utente di jQuery per formare elementi può a volte essere semplice come applicare semplicemente le classi tematiche, o talvolta essere doloroso come dover imitare gli elementi del modulo reale. Tutto dipende dai browser di destinazione e dagli stili che desideri applicare.

Answer 2

Alcuni esempi che utilizzano Jquery.

$("input:text").addClass("ui-corner-all"); 

$("#Submit").button();