Homepage » Coding » Creazione di un controller di volume con Slider dell'interfaccia utente jQuery
Creazione di un controller di volume con Slider dell'interfaccia utente jQuery
Se sei un cacciatore di omaggi, è probabile che tu abbia scaricato molte interfacce utente di PSD (UI). Alcuni di questi sono davvero sorprendenti e potrebbero risparmiare tempo realizzando prototipi del design su cui stavamo lavorando.
In questo post codificheremo un'interfaccia utente di PSD e la trasformeremo in qualcosa di più funzionale. Stiamo per codificare il seguente dispositivo di scorrimento dell'interfaccia utente PSD da applicare come tema dello slider dell'interfaccia utente jQuery.
però, per favore prendere nota che questo tutorial è destinato a livelli intermedi di esperienza Detto questo, è ancora relativamente facile da seguire, purché si abbia abbastanza familiarità con CSS e jQuery.
Va bene, ora iniziamo.
Passaggio 1: l'interfaccia utente di jQuery
Ovviamente abbiamo bisogno di jQuery e della libreria dell'interfaccia utente jQuery e abbiamo due possibilità di utilizzarli. Innanzitutto, possiamo collegare jQuery e l'interfaccia utente jQuery direttamente dal seguente CDN: API AjN di Google Ajax, Microsoft CDN e jQuery CDN, ci sono molti vantaggi nell'utilizzare il file CDN ospitato quando mettiamo online il nostro sito.
Ma dal momento che lavoreremo solo offline, useremo il secondo modo invece.
Scaricheremo e personalizzeremo la libreria dell'interfaccia utente jQuery dalla pagina di download ufficiale. Poiché abbiamo solo bisogno del plug-in Slider, selezioneremo solo la libreria Slider insieme alle sue dipendenze e lasceremo le altre. In questo modo i file che useremo saranno molto più sottili e possono essere caricati più velocemente. Successivamente, collega tutte quelle librerie al documento HTML, preferibilmente in fondo alla pagina o prima della chiusura
tag per essere precisi.
Passaggio 2: markup HTML
Il markup per il cursore è molto semplice, abbiamo avvolto tutti i markup necessari - il tooltip, il cursore e il volume - all'interno di un HTML5 sezione etichetta. L'interfaccia utente di jQuery genererà automaticamente il resto.
Passaggio 3: installa l'interfaccia utente del dispositivo di scorrimento
Lo snippet seguente installerà lo Slider sulla pagina, ma applica solo la configurazione predefinita.
$ (function () $ ("#slider") .slider (););
Quindi qui miglioreremo un po 'il cursore aggiungendo altre configurazioni.
Innanzitutto, memorizziamo l'elemento slider come variabile.
var slider = $ ('cursore #'),
Quindi impostiamo il valore predefinito minimo del cursore su cui contare 35, quando viene caricato per la prima volta.
slider.slider (range: "min", value: 35,);
A questo punto, non vedremo ancora nulla sul browser, perché l'interfaccia utente di jQuery è fondamentalmente solo generando il markup. Quindi, abbiamo bisogno di applicare alcuni stili per iniziare a vedere il risultato visivamente sul browser.
Passaggio 4: Gli stili
Prima di procedere, abbiamo bisogno di alcune risorse dal file sorgente PSD come la trama dello sfondo e l'icona.
Non parleremo di come tagliare in questo articolo, ci concentreremo solo sul codice. Se non sei sicuro di come tagliare, guarda il seguente screencast prima di procedere.
Convertire un disegno da PSD in HTML - Nettuts+
Bene, ora iniziamo ad aggiungere gli stili.
Inizieremo posizionando il cursore al centro della finestra del browser e allegando lo sfondo che abbiamo suddiviso dal PSD al corpo.
body background: url ('... /images/bg.jpg') ripeti in alto a sinistra; section width: 150px; altezza: auto; margine: 100px auto 0; posizione: relativa;
Successivamente, applicheremo gli stili per il suggerimento, il volume, la maniglia, il cursore gamma e il cursore si.
Faremo questa parte per parte, iniziando con ...
Slider
Poiché non abbiamo definito il valore massimo per lo Slider stesso, l'interfaccia utente di jQuery applicherà il valore predefinito; questo è 100. Pertanto, possiamo anche applicare 100 (px) per il cursore larghezza.
Abbiamo modificato leggermente l'icona del volume per soddisfare la nostra idea. L'idea è che creeremo un effetto su alzare gradualmente la barra del volume in base al valore del cursore. Sono sicuro che hai visto spesso un tale effetto nell'interfaccia utente di un lettore multimediale.
In questo passaggio inizieremo a lavorare sull'effetto speciale dello Slider.
tooltip
A questo punto, il tooltip non ha ancora contenuto, quindi lo riempiremo con il valore del cursore. Inoltre, la posizione orizzontale del tooltip corrisponderà alla posizione della maniglia.
Prima di tutto, archiviamo l'elemento tooltip come variabile.
var tooltip = $ ('. tooltip');
Quindi definiamo l'effetto del tooltip che abbiamo menzionato sopra all'interno dell'Evento Slide.
slide: function (event, ui) var value = slider.slider ('value'), tooltip.css ('left', value) .text (valore ui);
Ma vogliamo anche che il tooltip sia inizialmente nascosto.
tooltip.hide ();
Dopo quello, quando il maniglia sta per iniziare a scorrere, verrà mostrato con un effetto dissolvenza.
start: function (event, ui) tooltip.fadeIn ('fast'); ,
E, quando l'utente smette di far scorrere la maniglia, il tooltip si dissolverà e sarà nascosto.
stop: function (event, ui) tooltip.fadeOut ('fast'); ,
Volume
Come abbiamo menzionato sopra nel Sezione Stili, pianifichiamo l'icona del volume per cambiare corrispondentemente con la posizione della maniglia o per essere esatti, il valore del cursore. Quindi, applicheremo la seguente istruzione condizionale per creare questo effetto.
Ma, innanzitutto, memorizziamo l'elemento volume e il valore del cursore come variabile.
volume = $ ('. volume');
Quindi iniziamo l'istruzione condizionale.
Quando il valore del cursore è inferiore o uguale a 5 l'icona del volume non avrà affatto barre, a indicare che il volume è molto basso, ma quando il valore del cursore aumenta, anche la barra del volume inizierà ad aumentare.
if (valore <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ;
Metti tutti insieme
Va bene, se sei confuso con tutte le cose di cui sopra, non essere. Ecco la scorciatoia. Inserisci tutti i seguenti codici nel documento.
$ (function () var slider = $ ('# slider'), tooltip = $ ('. tooltip'); tooltip.hide (); slider.slider (range: "min", min: 1, valore: 35, start: function (event, ui) tooltip.fadeIn ('fast');, slide: function (event, ui) var value = slider.slider ('value'), volume = $ ('. Volume '); tooltip.css (' left ', value) .text (valore ui.); if (valore <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ; , stop: function(event,ui) tooltip.fadeOut('fast'); , ); );
Bene, ora vediamo il risultato nel browser.
dimostrazione
Scarica fonte
Conclusione
Oggi abbiamo creato con successo un tema jQuery UI più elegante, ma allo stesso tempo abbiamo anche tradotto con successo un'interfaccia utente PSD in un controller del volume funzionale.
Speriamo che questo tutorial ti ispiri e possa aiutarti a capire come trasformare un PSD in un prodotto più utilizzabile.
Infine, se hai qualche domanda riguardante questo tutorial, sentiti libero di aggiungerlo nella sezione commenti qui sotto.
