L'interfaccia utente di JQuery può aggiungere così tanto a una pagina web. Ci sono molti diversi widget forniti dall'interfaccia utente. Una stella alta e futura, è il cursore. In questo tutorial, ti mostrerò come utilizzare un dispositivo di scorrimento per controllare le dimensioni del testo di un articolo su una pagina. Ciò consente all'utente di controllare esattamente le dimensioni adatte a loro, ed è anche una caratteristica piuttosto impressionante da avere su un sito!

La parte del cursore di questo tutorial riproduce una tecnica originariamente creata da Buck Wilson.

Il nostro obbiettivo

Alla fine vorremmo che la nostra pagina assomigli a qualcosa del genere:

Comportamento:

• Quando il cursore viene trascinato, una bolla si dissolverà, indicando la dimensione corrente.
• Il testo "dimensione attuale del testo" apparirà anche con la dimensione attuale del testo accanto ad essa.
• Proveremo anche a fare in modo che il testo aumenti di un px o diminuisca di un px al clic del segno più o meno.

Passaggio 1: ottenere i file Javascript necessari

Ovviamente abbiamo bisogno di JQuery, ma avremo anche bisogno di alcuni file UI per estendere JQuery. Possiamo ottenere un file dell'interfaccia utente personalizzato per le nostre esigenze nell'interfaccia utente di JQuery Build Your Download.

Come puoi vedere, ci sono degli effetti sonori davvero eccezionali! Per quanto allettante possa essere, non abbiamo bisogno di tutti questi effetti per ottenere il prodotto desiderato. Tutto ciò di cui abbiamo bisogno è:

• UI Core
• Slider
• Il plugin per cookie di Klaus Hartl

Passaggio 2: l'HTML

Per questo tutorial, non ho intenzione di perdere tempo spiegando le basi dell'HTML e creando un layout che lo usa e CSS. Se vuoi saperne di più su questo argomento, qui ci sono altre esercitazioni come la mia esercitazione su Pannello superiore o il tutorial Contenuto schede a Collis.

            
 
 
 
 
 
 
 
 
 
 
 
Slider di dimensioni del testo
 
Dimensione corrente del carattere:  
 
 Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione. Lorem Ipsum è stato il testo fittizio standard del settore sin dal 1500, quando una stampante sconosciuta ha preso una cambusa di tipo e l'ha codificata per creare un libro esemplificativo di tipo. È sopravvissuto non solo a cinque secoli, ma anche al salto nella composizione elettronica, rimanendo sostanzialmente invariato. È stato reso popolare negli anni '60 con la pubblicazione di fogli Letraset contenenti brani di Lorem Ipsum e, più recentemente, con software di desktop publishing come Aldus PageMaker che include versioni di Lorem Ipsum. 
 
   

Quindi noterai diverse cose:

1. La correzione PNG per IE 5.5 e 6. Ho collegato direttamente alla codepage di Google. Ciò significa che dovrò terminare ogni PNG trasparente con un -trans.png .
2. Ho anche collegato direttamente a JQuery e al nostro file UI personalizzato.
3. Ho inserito i tag necessari per il cursore nella #header

NOTA: per far funzionare il cursore, abbiamo bisogno di una barra e una maniglia.

Passaggio 3: il CSS

Ecco il CSS per rendere quella pagina un po 'migliore. Questa pagina è piuttosto semplice, quindi il CSS è piuttosto semplice:

 body background: # 373737; allineamento del testo: centro; margine: 0px;  #header width: 700px; altezza: 200 px; background: # 48887d url (images / header.jpg); margin-left: auto; margin-right: auto; posizione: relativa;  .slider_container position: absolute; altezza: 25px; superiore: 170 px; a sinistra: 165 px;  .minus background: url (images / minus-trans.png) no-repeat; altezza: 9px; larghezza: 25px; overflow: nascosto; fluttuare: a sinistra; cursore: puntatore;  .slider_bar background: url (images / bar-trans.png) no-repeat; altezza: 9px; larghezza: 316px; fluttuare: a sinistra; margine: 0px 5px; posizione: relativa;  .add background: url (images / add-trans.png) no-repeat; altezza: 25px; larghezza: 23 px; fluttuare: a sinistra; posizione: relativa; inizio: -5px; cursore: puntatore;  .slider_handle background: url (images / selector-trans.png) no-repeat; altezza: 25px; larghezza: 12px; posizione: assoluta; inizio: -8px;  #slider_caption background: url (images / caption-trans.png) no-repeat; altezza: 45px; larghezza: 38 px; overflow: nascosto; posizione: assoluta; inizio: -50px; margin-left: -10px; imbottitura: 5px 0px 0px 0px; font-family: "Myriad Pro"; colore: # 36665d; font-weight: bold; allineamento del testo: centro;  #text font-family: Helvetica, Arial, sans-serif; larghezza: 655 px; sfondo: # f9f9f9; margin-left: auto; margin-right: auto; imbottitura: 20px 20px 20px 25px; posizione: relativa;  #text p font-size: 12px; allineamento del testo: a sinistra; colore nero;  #text h1 text-align: left; margin-left: 20px;  p font-family: Arial, Helvetica, sans-serif; colore: #CCCCCC;  #font_indicator position: absolute; a destra: 100 px; top: 50px; font-size: 10px; display: nessuno;  

Ancora una volta, non ho intenzione di andare in grande dettaglio con il CSS neanche. Se hai ancora bisogno di ulteriore aiuto, assicurati di controllare quei due tutorial che ho menzionato sopra. Se hai domande, assicurati di farmi sapere nei commenti.

Si noti che tutte le immagini png con trasparenza alfa hanno un finale -trans.png.

Passaggio 4: Effetti di scorrimento di base

Quando ho appreso per la prima volta dell'effetto slider, ho cercato su Google un po 'di più su di esso e su come funziona. Beh, sono stato fortunato a trovare questo fantastico screencast. Aveva anche un effetto molto pulito; una didascalia che sembrava mostrare la posizione del cursore, in cima al cursore. Sfortunatamente, si sono fermati lì. Utilizzeremo una variante del loro codice JQuery come punto di partenza:

 $ (function () $ ('# slider_caption'). hide (); var captionVisible = false; $ ('. slider_bar'). slider (handle: '.slider_handle', startValue: 26, minValue: 0, maxValue : 100, start: function (e, ui) $ ('# slider_caption'). FadeIn ('veloce', function () captionVisible = true;);, stop: function (e, ui) if ( captionVisible == false) $ ('# slider_caption'). fadeIn ('veloce', function () captionVisible = true;); $ ('# slider_caption'). css ('left', ui.handle.css ('left')). text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). animate (fontSize: ui.value * 15/100 + 8 ) .fadeIn ("slow"); $ ('# slider_caption'). fadeOut ('veloce', function () captionVisible = false;); slide: function (e, ui) $ ('# slider_caption '). css (' left ', ui.handle.css (' left ')). text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("slow"););

Alcune idee chiave:

• Per prima cosa nascondiamo la didascalia con Javascript. Questo rende visibile la didascalia se Javascript è disabilitato solo per un po 'più di accessibilità.
• Come puoi vedere, ora abbiamo anche un modificatore .slider e diversi sotto-elementi:
  • startValue: Specifica la posizione in cui inizia l'handle
  • minValue: Specifica il valore minimo a cui andrà l'handle
  • maxValue: Specifica il valore massimo a cui andrà l'handle
  • inizio: Questo ci consente di dire a JQuery cosa fare quando l'utente inizia a far scorrere la barra
  • Stop: Specifica cosa succede quando il cursore viene rilasciato
  • diapositiva: Specifica ciò che accade quando viene fatto scorrere il cursore
  • maniglia: Questo ci permette di specificare quale sarà la maniglia
• Assegniamo anche una variabile che ci aiuterà a sapere quando Stop: si verifica, se la didascalia è visibile o meno, e quindi eseguire un'azione basata su tale conclusione.
• Abbiamo anche dovuto porre un limite alle dimensioni dei font possibili, quindi abbiamo limitato le possibilità del valore di scorrimento a tra 8 e 23. L'abbiamo fatto eseguendo calcoli matematici di base sul valore del cursore. (moltiplicato per 15/100 e aggiunto 8)
• Questa equazione ha portato a dimensioni di spazi decimali, quindi abbiamo dovuto arrotondare il Math.round
• Si noti anche, il metodo con cui abbiamo fatto la didascalia rimanere in cima al manico. Abbiamo reso il valore di sinistra del css della didascalia uguale all'handle.
• Si noti che sul Stop: Ho la dimensione del testo animata, mentre sulla diapositiva, ho la dimensione del css in continua evoluzione. Questo potrebbe sembrare contro-intuitivo, su quello diapositiva: Non lo animerei, ma con l'essenza di scorrere e allargare gradualmente le dimensioni, fa la stessa cosa. Se dovessi animare invece di cambiare solo il css, sarebbe mosso e non rispondente.

Passaggio 5: aggiunta della didascalia di testo

 $ (function () $ ('# slider_caption'). hide (); var calloutVisible = false; $ ('. slider_bar'). slider (handle: '.slider_handle', startValue: 26, minValue: 0, maxValue : 100, start: function (e, ui) $ ('# slider_caption'). FadeIn ('fast', function () calloutVisible = true;); $ ('# font_indicator'). FadeIn ('slow' );, stop: function (e, ui) if (calloutVisible == false) $ ('# slider_caption'). fadeIn ('veloce', function () calloutVisible = true;); $ ('# font_indicator '). fadeIn (' slow '); $ (' # slider_caption '). css (' left ', ui.handle.css (' left ')). text (Math.round (valore ui.valore * 15/100 + 8)); $ ('# font_indicator b'). Text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). Animate (fontSize: ui.value * 15/100 + 8). FadeIn ("slow"); $ ('# slider_caption'). FadeOut ('fast', function () calloutVisible = false;); $ ('# font_indicator'). fadeOut ('slow');, slide: function (e, ui) $ ('# slider_caption'). css ('left', ui.handle.css ('left')). text (Math.round ( ui.value * 15/100 + 8)); $ ('# font_indicator b'). text (Math.round (ui. valore * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("slow"); );

Idee chiave su #font_indicator

• Abbiamo aggiunto gli stessi effetti di dissolvenza in entrata e in uscita negli stessi punti della didascalia
• Tuttavia, abbiamo lasciato la posizione sinistra del css
• Si noti che abbiamo un tag all'interno dell'indicatore di carattere div #. Questo non solo fa risaltare di più il numero, ma ci consente semplicemente di inserire il valore di handle del cursore corrente come testo in esso. Se ci limitassimo ad aggiungere la fine del div, ogni valore di dimensione del carattere si accumulerebbe alla fine.

Passaggio 6: assegnazione delle azioni Plus e Minus

Questo non sarebbe un design funzionale, se non avessimo dato le azioni sui segni più e meno al clic. Questo codice potrebbe essere un po 'trascurato e non perfettamente efficiente, ma ha il compito di farlo. Questo progetto richiedeva una quantità sorprendente di matematica, il che spiega alcuni dei numeri stravaganti che finiscono per essere usati.

Senza ulteriori indugi, ecco il resto del javascript, lo spiegherò in seguito:

 $ (". aggiungi"). click (function () var currentFontSize = $ ('# text p'). css ('font-size'); var currentFontSizeNum = parseFloat (currentFontSize, 10); var newFontSize = currentFontSizeNum + 1; if (newFontSize < 24)  $('#text p').css('font-size', newFontSize); $('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut(); $('.slider_handle').css('left', newFontSize*19.75 - 158); $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text(Math.round(newFontSize )); $('#font_indicator').fadeOut('slow');  else $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text("Isn't 23 big enough?"); $('#font_indicator').fadeOut('slow');  return false; ); $(".minus").click(function() var currentFontSize = $('#text p').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum-1; if (newFontSize > 8) $ ('# text p'). Css ('font-size', newFontSize); $ ('# slider_caption'). css ('left', newFontSize * 19.75 - 158) .fadeIn ('fast'). text (Math.round (newFontSize)). fadeOut (); $ ('. slider_handle'). css ('left', newFontSize * 19.75 - 158); $ ( '# Font_indicator') fadeIn ( 'lento.'); $ ('# font_indicator b'). text (Math.round (newFontSize)); $ ( '# Font_indicator') fadeOut ( 'lento.');  else $ ('# font_indicator'). fadeIn ('slow'); $ ('# font_indicator b'). text ("Non è 8 abbastanza piccolo?"); $ ( '# Font_indicator') fadeOut ( 'lento.');  return false; );

Alcune note chiave:

• Se conosci la sintassi di base di Javascript, questo dovrebbe essere abbastanza evidente.
• Assegno una variabile iniziale per ottenere la dimensione del carattere corrente.
• Quindi lo converto in un numero intero
• Quindi creo un'altra variabile che è un valore più alto.
• Metto un limite tra meno di 24 e sopra 8, usando un se altro dichiarazione.

Tempo di matematica

Regolare la maniglia e la didascalia per reagire ai clic positivi e negativi era una vera sfida. Quello che ho finito per fare, è stato capire la larghezza della barra (316px), e dividendola tra le 16 possibili dimensioni del font (8-23) per capire quanto spazio ogni incremento ha richiesto.

316/16 =

Per sicurezza, ho quindi dovuto capire il punto di partenza per la dimensione del carattere. Sapevo che non era esattamente il 12, perché l'ho leggermente modificato con il 15/100 + 8. Quindi ho preso il valore iniziale del manico (26) e l'ho moltiplicato per questo:

26 * 15/100 + 8 =

Ho pensato che, dato che era arrotondato, sarebbero comunque dodici.

Così ho pensato che la maniglia sarebbe stata la [dimensione carattere * 19.75 - 158 (Le prime 8 dimensioni)] px.

Ho solo pensato di darti uno sguardo sulla mia matematica strana e complicata;) Ci sono probabilmente modi molto più semplici per farlo, ma credo che questa sia la mia logica.

Step 7: Cookie Time, leggendo il cookie

Per quanto riguarda i cookie, ho utilizzato l'eccellente plugin per cookie di Klaus Hartl. Puoi visualizzare la sintassi di base del plug-in nel link che ho fornito. La sfida consisteva nel trovare un punto in cui impostare in modo affidabile il cookie. Ho finito per impostarlo quando il browser si aggiorna o cambia la pagina. In questo modo, lo fa solo quando necessario e anche in modo reale. Per prima cosa aggiungiamo il codice all'inizio del file javascript per leggere il cookie:

 var startSize = $ .cookie ('fontSize'); var startSize = parseFloat (startSize, 12); $ ('# text p'). css ('font-size', startSize);

Cosa ho fatto:

• Prima leggo il cookie e l'ho inviato alla variabile startSize
• Quindi ho cambiato quella variabile in un numero intero
• Ho quindi aggiunto quel numero al css predefinito del testo

Passaggio 8: impostazione del cookie

Come ho detto sopra, dobbiamo impostare il cookie quando la pagina viene chiusa. Lo facciamo usando il seguente codice:

 window.onbeforeunload = leaveCookie; function leaveCookie () var FontSize = $ ('# text p'). css ('font-size'); var IntFontSize = parseFloat (FontSize, 10); $ .cookie ('fontSize', IntFontSize); 

Cosa ho fatto:

• NOTA: questo JS è al di fuori di JQuery $ (function () );
• Innanzitutto, ho attivato una funzione quando il browser ha lasciato la pagina
• Quindi ho convertito la dimensione del testo in un numero intero
• Quindi inserisco questo nel cookie
  

Questo è tutto!

Spero tu abbia trovato utile questo tutorial! Per favore, scusa la mia logica di programmazione, non sempre la penso così efficacemente: P. Se avete domande o commenti, non esitate a farmelo sapere nei commenti!

• Iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.

Codice