Apple è un marchio molto popolare nella nuova era tecnologica in cui viviamo. Sia i progettisti che gli sviluppatori concordano sul fatto che i prodotti Apple mostrano talento e passione squisita per le loro capacità. Nel corso del tempo la progettazione dell'interfaccia utente ha preso una piega al rialzo ed è ora uno degli argomenti più caldi tra i web designer.
Qui di seguito vedremo come costruire un piccolo modulo di input in stile Apple con alcune strutture e script di base. Tutto il codice incluso è basato su XHTML Transitional Doctype insieme alle nuove tecniche CSS2 / CSS3. Useremo anche la libreria jQuery 1.4.1 per supportare le nostre funzioni di etichetta di visualizzazione.
Provalo
Ecco un'anteprima di quello che costruiremo. Guarda la pagina demo per vederla dal vivo e scarica l'esempio per uno sguardo più da vicino.
Demo dal vivo - Download
Costruire il nostro HTML e CSS
Prima di iniziare a sviluppare è importante avere la struttura del codice frontend in ordine. Fortunatamente questo processo è molto semplice e non dovrebbe richiedere molto tempo per completare. Di seguito ho incluso una copia ridotta del codice HTML dal nostro esempio? Index.html? documento. Questo dovrebbe essere un codice standard per visualizzare un modulo di input molto semplice, nient'altro che una conoscenza di base dello sviluppatore HTML.
Qui ho impostato 2 elementi di input molto importanti sotto gli ID? Unameblock? e? pwblock ?. Questi stanno per blocco del nome utente e blocco password, rispettivamente, e sarà molto importante più avanti nel nostro script. Ora che il nostro codice sembra buono, sarebbe saggio passare agli stili CSS.
Queste sono le vere regole della struttura bare-bone poiché il CSS è ciò che dà a tutti gli elementi HTML la loro forma. Non ci saranno molti cambiamenti che includeremo. Alcune reimpostazioni di base per le variabili globali con allineamento e posizionamento per i campi di input. Di seguito sono riportate le clip del codice sorgente, illustrate a intervalli di bit.
Qui abbiamo il nostro reset globale con il asterisco (*) selettore che rimuove tutti i margini standard del browser e il riempimento. Diamo anche alcuni stili all'elemento del corpo per posizionare la nostra forma davanti e al centro. La divisione #c è il nostro contenitore div che è stato centrato per il bene della nostra demo.
Il primo blocco evidente è usato per lo stile dei nostri campi di input. Mira a tutti gli elementi di input con una classe di? U1? che eseguono entrambi i campi username e password. Invece di posizionare 10-20 dichiarazioni di stile su una singola riga è molto più facile per la modifica mantenere questo a livello di blocco.
Qui abbiamo gli stili per configurare come appariranno i nostri campi di input. Riempimento, dimensione carattere, tra molti bordi e proprietà di manipolazione del testo. Stiamo usando molte nuove tecniche CSS3 qui che dovrebbero essere evidenti a tutti gli sviluppatori CSS.
Nuove entità CSS3
Le due nuove funzioni CSS3 che stiamo usando sono -webkit gradiente e -moz-lineare gradiente che può generare gradienti al volo. Questa è una caratteristica straordinaria che non è stata discussa in molti articoli di CSS3. Ciò elimina la necessità di qualsiasi immagine nella creazione di gradienti di sfondo conformi agli standard.
Abbiamo anche -webkit-box-ombra e -moz-box-ombra. Schemi di denominazione simili aiutano a confondere i browser Webkit con i browser Gecko basati su Mozilla.
Più in basso abbiamo altri 3 stili che attaccano il nostro pulsante di invio insieme agli stati per i nostri moduli di input. Il :messa a fuoco lo pseudo-targeting significa che i CSS applicheranno i nostri stili solo quando l'utente è focalizzato su entrambi i campi di input. Questi stili visualizzeranno un bagliore blu per messa a fuoco e bagliore rosso per errori (molto utile durante il debug degli accessi utente e dei moduli di registrazione).
Fin qui tutto sembra fantastico! In realtà, tutto ciò che dobbiamo fare è includere alcuni script / stili nella nostra sezione di intestazione per iniziare veramente con i nostri effetti dinamici. Se prendi il documento corrente e includi il nostro foglio di stile, possiamo ottenere immediatamente gli effetti al passaggio del mouse.
Lavorare con effetti jQuery
jQuery è una sorprendente libreria JavaScript che si è dimostrata utile più e più volte. Il tuo sviluppatore web medio è fortemente focalizzato sulla velocità e la precisione degli script. Questo è qualcosa che jQuery accetta e interiorizza con le loro idee.
Di seguito è una piccola sezione che deve essere aggiunto tra il capo tag del tuo documento. Spiegherò alcuni di questi qui sotto e inserirò anche alcuni dei codici dietro le quinte.
Il nostro style.css è il file che include tutte le nostre regole CSS elencate sopra. Un'altra inclusione è tip-yellowsimple.css che non è stato ancora menzionato. Si tratta di uno script scritto con jQuery come plug-in per il tooltip aleggia.Con questo foglio di stile (download con sorgente demo) siamo in grado di dare forma a suggerimenti su qualsiasi azione.
I nostri due file JavaScript sono davvero semplici e autoesplicativi. Stiamo accedendo a jQuery 1.4.1 min in modo da ridurre l'elaborazione e la velocità di download. Stiamo anche leggendo il database dei codici API di Google che memorizza tutte le versioni precedenti e attive degli script popolari. Questo è uno sforzo enorme e aiuta i progetti di sviluppo a crescere senza la necessità di scaricare costantemente la libreria jQuery manualmente.
Il secondo file che abbiamo? Jquery.poshytip.js? contiene il nostro codice plug-in. Poshytip è una classe jQuery scritta da Vasil Dinkov per supportare tooltip dinamici. Il codice è vasto e non necessario per imparare in dettaglio. Tuttavia, se sei un geek jQuery sentiti libero di controllare i suoi sforzi manuali per vedere come vengono chiamati questi metodi e quali variabili puoi modificare.
Chiamata di azione di base
Tutto ciò di cui abbiamo bisogno ora è il nostro infame invito all'azione! Questa è la nostra funzione principale che si caricherà sul carico del documento e si preparerà a lanciare su qualunque segnale chiamiamo. In questo caso stiamo cercando un evento che si verifica quando un utente si concentra su uno dei campi di input.
Un ultimo passo è quello di aggiungere questo codice nella testa sotto tutti i nostri file include. Questo è vero codice JavaScript, quindi dovrebbe essere incapsulato con a copione etichetta. Per facilitare ho rimosso i tag nel codice qui sotto in modo che possiamo concentrarci solo sulla funzionalità js.
Quindi quello che stiamo facendo è chiamare un generico funzione() {} per controllare alcuni eventi. Stiamo creando 2 nuove istanze del poshytip () metodo basato sui nostri moduli di input. Questo può essere visto quando analizziamo il DOM per gli ID elemento? Unameblock? e? pwblock ?.
Ciascuna delle singole impostazioni sul posto espande la funzionalità di poshytip. Se desideri visualizzare la documentazione per tutti i metodi, c'è una grande collezione che Vasil ha messo online. cioè showOn è la nostra variabile più importante che indica al motore di analisi di controllare eventuali attività di messa a fuoco in questi due elementi.
AlignX e AlignY sono importanti per quanto riguarda il posizionamento. Questi contengono i valori per cui il nostro suggerimento apparirà nella pagina. Questo può essere in basso, al centro, in alto, insieme ai posizionamenti sfalsati come interno-sinistra e interno-destra. Prova a fare confusione con questi se preferisci che le descrizioni dei comandi vengano visualizzate sul lato o sul fondo anziché sulla parte superiore.
Ciò che forse non hai notato è da dove viene caricato il nostro testo. Poshytips rende anche qui semplice il valore del nostro titolo l'attributo è visualizzato nel testo del suggerimento. Ciò rende il targeting di elementi specifici estremamente semplice e molto produttivo!
Conclusione
Questi sono alcuni dei passi più basilari verso la creazione di un campo di input in stile Apple. Ci sono molti altri effetti unici che possono essere applicati usando jQuery che va oltre lo scopo di questo tutorial. Guarda alcune demo dal sito Web di Apple per ulteriori suggerimenti. Inoltre, se desideri scaricare l'intero pacchetto demo, puoi farlo qui.