Temi personalizzati di progettazione / sviluppo di app per dispositivi mobili con jQuery Mobile

Nel precedente tutorial su jQuery Mobile avevo introdotto gran parte del framework sottostante e come impostare il tuo primo sito web. La libreria JS è leggera e facile da riprendere in termini di difficoltà di apprendimento. C'è anche un foglio di stile CSS generico incluso con i file in modo da poter personalizzare ulteriormente gli elementi nel proprio layout.

Per questo secondo segmento mi piacerebbe trascorrere un po 'di tempo approfondendo questa idea dei temi di jQuery Mobile. L'intero settore del design è stato rivoluzionato da jQM e il processo di costruzione di un modello mobile da zero è stato notevolmente migliorato. jQuery Mobile non è solo una libreria di scripting, ma un'intera struttura di base per costruire e produrre modelli mobili efficienti.

Contenuto del foglio di stile predefinito

Dovrei iniziare chiarendo esattamente quale tipo di codice CSS è incluso nei file predefiniti. Il foglio di stile di jQM 1.0 è stato diviso in due segmenti principali - struttura e temi.

Il codice della struttura è il materiale che puoi ignorare maggiormente. Questo è usato per impostare i margini, il riempimento, l'altezza / larghezza, le varianti dei caratteri e molti altri valori predefiniti del browser. I temi interni sono quindi suddivisi in A-E, ognuno dei quali controlla diversi effetti visivi nel proprio progetto. Questo può includere colori di sfondo, sfumature, ombre esterne, ecc.

Ognuno di questi elementi tematici interni può anche essere indicato come campioni. Quando costruisci un modello per dispositivi mobili, generalmente rimani con un singolo tema. Ma in quasi tutti gli scenari è possibile migliorare il design con diversi schemi di colori. Il foglio di stile predefinito include solo i campioni A-E ma è possibile creare campioni F-Z per aggiungere altre 21 alternative alla libreria dei temi. Giusto per chiarire nuovamente questi termini a tema è considerato 1 singolo file CSS che può includere fino a 26 diversi campioni etichettato A-Z.

Commutazione degli stili

Se non si sceglie di specificare alcun campione, jQuery Mobile si atterrà al campione A per impostazione predefinita. Se non sapevi già che i documenti di jQuery Mobile utilizzano attributi di dati HTML5 per molte funzioni interne. Uno di questi include la modifica dei campioni tramite l'attributo tema-dati. Controlla il mio esempio di codice qui sotto per vedere cosa intendo.

  Pagina jQM predefinita
 
  Ecco alcuni contenuti interni.

Notare che ho inserito l'attributo data-theme nel div della pagina radice. Ciò significa che il nuovo colore del campione avrà effetto su tutto ciò che include sia l'intestazione che le aree di contenuto. Potrei anche includere Dati-theme = "c" nell'intestazione div per cambiare solo quel contenuto dal resto della mia pagina.

Componenti di uno Swatch

Dovrebbe essere abbastanza semplice come implementare questi diversi campioni all'interno di un singolo layout. Quindi ora diamo un'occhiata al codice CSS di jQM in modo da poter analizzare i singoli componenti di un campione. Scopri l'ultimo file jQuery Mobile 1.4.5 CSS ospitato sul proprio CDN.

Dovresti notare come ogni campione è separato da un commento distinto e ciascuna delle classi interne termina con la scritta appropriata. Per esempio .ui-bar-un e .ui-corpo-a vengono applicate nelle barre di intestazione / piè di pagina e aree di contenuto per impostazione predefinita. La maggior parte delle proprietà sta implementando un ripristino dei colori dei caratteri e dei collegamenti, dei gradienti di sfondo e altri piccoli dettagli. Ho incluso semplicemente il ui-bar-un codici per darti un'idea di quali elementi puntiamo.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; sfondo: # 111111; colore: #ffffff; font-weight: bold; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# 3c3c3c), a (# 111)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / background-image: -ms-linear-gradient (# 3c3c3c, # 111); / * IE10 * / background-image: -o-linear-gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: linear-gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button font-family: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-inherit color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; font-weight: bold;  .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: active color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: visited color: # 2489CE / * a-bar-link-visited * /;

Se stai solo cercando di creare un campione personalizzato, ti consiglio di basare il modello su uno degli originali. Il processo diventerà molto più fluido se inizi a scrivere codici in un nuovo documento CSS. Non avrai il fastidio di modificare nel file originale e potrai iniziare a lavorare su una lavagna pulita. Ma le aree chiave su cui vuoi concentrarti includeranno quanto segue:

intestazione e piè di pagina
contenuto del corpo e testo della pagina
elenca gli stili
pulsante indica default / hover / active
controlli di input modulo (extra)

Codifica di un nuovo design della barra

Dallo stesso file CSS abbiamo visto prima copia / incolla tutto il codice A (righe 12-150) in un nuovo file. Possiamo usare il nome del campione G per implementare questi nuovi stili. Ora dopo aver copiato il codice, si vuole rinominare ogni istanza di classe che termina in -un a -g, in questo modo jQuery Mobile riconoscerà quali stili utilizzare.

Mi piacerebbe iniziare ridisegnando la barra di intestazione bg per simulare un gradiente iOS più familiare. Questo può essere fatto solo all'interno del .ui-bar-g selettore. Vogliamo modificare le proprietà background e background-image per modificare gli effetti del gradiente. Controlla il mio codice qui sotto e una schermata demo del nuovo gradiente.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; border-left: 0px; border-right: 0px; sfondo: # 6d83a1; color: #fff / * a-bar-color * /; font-weight: bold; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; background-image: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# b4bfce), color-stop (0.5, # 899cb3), color-stop (0.505, # 7e94b0), a (# 6d83a1)); background-image: -webkit-linear-gradient (in alto, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (in alto, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / background-image: -ms-linear-gradient (in alto, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-linear-gradient (in alto, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / background-image: linear-gradient (in alto, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Sto usando la combinazione di colori blu trovata nella maggior parte delle applicazioni iOS predefinite. Il mio sfondo è inizialmente impostato su un colore a tinta unita per i dispositivi che non possono eseguire il rendering dei gradienti CSS3. Poi di seguito sto usando gli arresti di colore attorno al 50% per ricreare il tradizionale effetto lucentezza stile Apple. Anche all'interno dello stesso selettore ho leggermente modificato l'ombra del testo con un colore e una gamma più sottili.

Pulsanti ed effetti di testo

È importante quando si codificano i campioni per considerare specificamente quali aree dell'interfaccia richiedono attenzione. La barra di intestazione sembra perfetta con questo nuovo sfondo, ma un'ultima modifica che mi piacerebbe fare corrisponderà agli stili dei pulsanti più vicini a quelli delle app iOS.

.ui-btn-up-g border: 1px solid # 375073; sfondo: # 4a6c9b; font-weight: bold; colore: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; background-image: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# 89a0be), color-stop (0.5, # 5877a2), color-stop (0.505, # 476999), a (# 4a6c9b)); background-image: -webkit-linear-gradient (in alto, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (in alto, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / background-image: -ms-linear-gradient (in alto, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -o-linear-gradient (in alto, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: linear-gradient (in alto, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; sfondo: # 2463de; font-weight: bold; colore: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; background-image: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# 779be9), color-stop (0.5, # 376fe0), color-stop (0.505, # 2260dd), a (# 2463de)); background-image: -webkit-linear-gradient (in alto, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (in alto, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-linear-gradient (in alto, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-linear-gradient (in alto, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: linear-gradient (in alto, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

L'area del codice che stiamo modificando ora si trova all'interno delle classi di pulsanti dell'interfaccia utente. Ci sono 3 diverse modalità di cui preoccuparsi: .ui-btn-up-g, .ui-btn-presso-g, e .ui-btn-down-g. Mi concentro principalmente sugli effetti standard (btn-up) e hover (btn-hover) modificando l'ombra del riquadro e i gradienti lineari. Inoltre ho ampliato l'effetto degli angoli arrotondati in modo che i pulsanti appaiano più rettangolari.

Per questo motivo ho dovuto rimuovere il raggio del bordo interno da una classe intitolata .ui-btn-inner. Questa classe viene collegata a un elemento span all'interno di ciascun link di ancoraggio nella barra di intestazione. Senza reimpostare le proprietà del raggio del bordo, noterai piccoli difetti nel disegno ogni volta che passi il mouse su un pulsante. Mentre passi più tempo a programmare in temi jQuery Mobile memorizzerai queste piccole sfumature per i progetti futuri.

Introduzione a ThemeRoller

Se ti piace sporcarti le mani nel codice, ti consiglio vivamente di attenermi alle modifiche personalizzate. Non solo hai più controllo, ma è molto più facile eseguire il debug dei problemi all'interno del CSS se hai apportato tutte le modifiche da solo. Ma per molti progettisti questo processo è faticoso e richiederà semplicemente più tempo del necessario. Fortunatamente il team di jQuery Mobile ha rilasciato un editor online sotto il nome di ThemeRoller.

Da questa pagina hai accesso per modificare i primi 3 campioni A-C o anche crearne uno tuo. Se guardi nella barra laterale di sinistra puoi passare da queste 3 impostazioni o apportare rapidamente delle modifiche alle opzioni del tema globale. Questi includono le proprietà CSS come i raggi del bordo, le ombre di riquadri o i font di pagina predefiniti. Nota quando selezioni uno dei campioni preimpostati che possiamo modificare solo le stesse aree di prima: barre superiore / inferiore, contenuto del corpo e gli stati del pulsante 3.

Ma la mia caratteristica preferita deve essere l'accesso diretto ai campioni di Adobe Kuler. Puoi effettivamente creare alcune combinazioni di colori nel tuo account Kuler e importarle in ThemeRoller. L'interfaccia supporta la funzionalità drag-and-drop, quindi è molto semplice provare alcune idee diverse in pochi minuti.

In definitiva non esiste un metodo assoluto per costruire correttamente i tuoi campioni jQM. Alcuni designer preferiscono il codice rigido CSS, mentre altri adoreranno l'intuitiva app web ThemeRoller. Finché seguirai la struttura della classe, dovresti ottenere gli stessi risultati in ogni caso.

Risorse utili

jQuery Mobile Temi - Documentazione
Utilizzo e personalizzazione di temi jQuery Mobile