Interfaccia utente di jQuery e ThemeRoller

• Potrebbe 17, 2024

Se desideri un modo semplice e rapido per progettare l'interfaccia utente per un sito Web o un'applicazione Web e includere anche jQuery, dai un'occhiata all'interfaccia utente di jQuery. Lì troverai un pacchetto combinato di funzioni CSS e jQuery chiavi in ​​mano che semplifica l'aggiunta di queste funzionalità al tuo nuovo progetto.

Facciamo una passeggiata attraverso il sito. Sotto il collegamento Demo e documenti troverai un elenco dei plugin interattivi jQuery come trascinamento della selezione, schede e transizioni. Per ogni plug-in è disponibile una demo, documentazione e codice cut-and-paste di esempio per i test.

Se si desidera acquisire i file chiavi in ​​mano, fare clic sul collegamento Temi per il ThemeRoller jQuery. Il css predefinito è un tema bianco e grigio a ossa nude. Puoi fare clic sul pulsante di download e utilizzare così com'è ma c'è anche una galleria di temi colorati per iniziare. Nell'area Galleria ci sono diverse miniature a tema. Basta fare clic su quello che ti piace. Puoi scaricare quel tema così com'è facendo clic sulla scheda Roll Your Own e quindi sul pulsante Scarica tema. Ma il divertimento inizia quando inizi a twittare il tema con il motore ThemeRoller. Ci sono 11 opzioni che puoi personalizzare. La maggior parte delle opzioni ti permetterà di cambiare la trama e il colore dello sfondo, il colore del bordo e il testo e i colori delle icone.

Hai diverse opzioni per twittare il tema.

• Impostazioni carattere: è possibile modificare la famiglia di caratteri, il peso e le dimensioni.
  
  
• Raggio dell'angolo: è possibile modificare il raggio dell'angolo. Ogni tema ha uno stile di scheda arrotondato predefinito, ma qui puoi cambiare la dimensione dell'angolo o impostarlo su zero per una scheda quadrata. (Le schede sono basate su CSS3, che al momento non è supportato da IE.)
  
  
• Intestazione / Barra degli strumenti: è possibile impostare i valori di colore per l'area dietro le schede e le aree di intestazione come per il plug-in del calendario.
  
  
• Contenuto: qui puoi impostare i colori per l'area del contenuto principale. È possibile ottenere un design molto diverso a seconda della scelta del bordo o nessun bordo.
  
  
• Stato predefinito selezionabile: controlla l'aspetto predefinito (inattivo) delle schede e dei pulsanti.
  
  
• Stato al passaggio del mouse selezionabile: questi controlli consentono di visualizzare le schede e i pulsanti nello stato al passaggio del mouse.
  
  
• Stato attivo selezionabile: controlla l'aspetto della scheda e del pulsante per la pagina attiva.
  
  
• Evidenzia: i colori di sfondo, bordo, testo e icona per le aree evidenziate.
  
  
• Errore: colori di sfondo, bordo, testo e icona per i messaggi di errore.
  
  
• Schermata modale per sovrapposizioni: controlla il colore e la trama dello sfondo.
  
  
• Ombre discendenti: controlli per l'opacità, lo spessore, l'offset e gli angoli dell'ombra per un effetto ombra discendente.
  
  

Quando scarichi jquery-ui-x.x.xx.custom.zip e esegui l'upgrade del pacchetto, vedrai tre cartelle (css, bundle di sviluppo e js) e un file index.html. Il file index.html è una demo per i plugin disegnati con il tuo tema. Dovrai mettere le cartelle css e js nella tua directory principale e copiare / incollare il codice dal file index.html nel codice del tuo sito nella posizione in cui vuoi che vengano visualizzati i plugin.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/