Latest web development tutorials

tema jQuery UI

Tutti jQuery UI plug-in consente agli sviluppatori di integrare senza soluzione di continuità i widget UI per l'aspetto dei loro siti o applicazioni. Ogni widget è definito da stili CSS, e contiene due informazioni di stile: lo standard framework jQuery UI CSS stili e plug-in specifico stile.

framework jQuery UI CSS fornisce una rappresentazione semantica della classe per indicare il ruolo di un piccolo elementi componenti, come ad esempio il titolo, il contenuto, o l'area cliccabile. Questi sono coerenti in tutte le piccole parti, e una scheda cliccabile (scheda), fisarmonica (fisarmonica) o il pulsante (Button) hanno la stessa ui-state-default , di classe, per dimostrare che sono cliccabili a. Quando l'utente si posiziona nella parte superiore di questi elementi, la classe diventa ui-state-hover , quindi questi elementi diventano eletto in ui-state-active . La classe di consistenza rende l'apparizione prestazioni costanti di tutti gli elementi o componenti che hanno un ruolo simile nella condizione di interazione.

cornice di stile CSS è incapsulato in un file separato, denominato ui.theme.css . Questo file attraverso ThemeRoller all'applicazione di modificare. stile frame contiene influenzano solo l'aspetto e la sensazione di proprietà, fino a quando i colori, immagini di sfondo, icone e così via. Quindi questi sono in stile "sicuro", non interesserà la funzione plug-in. Questa separazione significa che gli sviluppatori possono utilizzare in theme.css modificare i file a colori e di immagini per creare un look personalizzato grafico. Dal momento che il futuro di plug-in o correzioni di bug sarà disponibile, e questi possono essere usati senza modifiche dal tema.

Dal momento che la copertura stile della cornice solo guardare e sentire, quindi ha bisogno di includere specifici plug-in fogli di stile, questi fogli di stile includono tutti i widget aggiuntivi consentono regole di stile struttura funzionale, come la dimensione, imbottitura, margini, posizionamento, galleggiante. Ogni widget fogli di stile themes/base della cartella, e con il "jquery.ui.accordion.css" plug-in nome, ad esempio. Questi modelli devono essere modificati con attenzione gli script perché forniscono un quadro che copre stili insieme.

Invitiamo tutti gli sviluppatori di creare plug-in jQuery, jQuery UI framework CSS rende più facile per gli utenti finali di utilizzare temi personalizzati e plug-in.

tematizzazione

Qui ci sono tre dei widget di jQuery UI relativa alla procedura generale:

  • Scarica argomenti ThemeRoller: in primo luogo creare un tema è quello di utilizzare ThemeRoller per generare e scaricare un tema. Questa applicazione creerà un nuovo ui.theme.css di file e contiene tutte le immagini di sfondo e le icone necessarie sprite images delle cartelle. Questo metodo è il primo a creare e mantenere il tema della strada, ma le opzioni che offre limitate ThemeRoller personalizzato.
  • Modificare il file CSS: Al fine di promuovere l'aspetto dei controlli, è possibile scegliere tra il tema di default (Uniformità) inizia, o da un argomento generato dal ThemeRoller Start, quindi regolare ui.theme.css file, un plug-in separato o qualsiasi foglio di stile. Ad esempio, è possibile regolare facilmente l'angolo del raggio di tutti i pulsanti è diversa dai valori di altri componenti dell'interfaccia utente, o utilizzare un'icona personalizzata per modificare la procedura guidata percorso. Gli stili variano attraverso un po ', si può anche usare più di un tema in una interfaccia utente. Per la manutenzione più facile, la modifica proposta unica ui.theme.css file e immagini.
  • Ri-scrivere CSS personalizzato: per massimizzare il controllo l'aspetto grafico, è possibile iniziare a scrivere di nuovo su ogni widget e CSS, senza l'uso di classi del framework plug-in o un foglio di stile specifico. Se si desidera guardare e sentire può essere ottenuto modificando il CSS o utilizzando i tag altamente personalizzate, quindi è possibile utilizzare questo metodo. Questo approccio richiede una profonda esperienza in termini CSS, e richiedono aggiornamenti manuali per un futuro plug-in.

Utilizzare ThemeRoller, jQuery UI framework CSS, così come tema di design personalizzato