Share
In questo tutorial utilizzeremo il widget del cursore dell'interfaccia utente jQuery per creare un dispositivo di scorrimento dei contenuti interessante e funzionale. Avremo un contenitore, che ha una serie di elementi contenenti ciascuno diversi blocchi di contenuto. Ci saranno troppi di questi elementi da visualizzare contemporaneamente, quindi possiamo usare il cursore per spostare i diversi blocchi di contenuti dentro e fuori dalla vista.
jQuery UI è la libreria ufficiale di widget e utilità costruita su jQuery; è molto facile da usare, altamente configurabile e robusto, ed estremamente facile da tema. Per seguire il tutorial avrai bisogno di una copia dell'ultima versione della libreria; può essere scaricato utilizzando il builder download di jQuery UI all'indirizzo http://jqueryui.com/download. Sebbene possiamo scegliere uno qualsiasi dei temi disponibili, ti consigliamo di utilizzare il tema predefinito di scorrevolezza. L'interfaccia utente di jQuery include una copia della versione corrente di jQuery, quindi non è necessario scaricarlo separatamente.
Crea una nuova cartella da qualche parte a portata di mano e chiamala slider. All'interno di questa cartella, crea due nuove cartelle; uno chiamato jqueryui e uno chiamato immagini. Disimballare l'archivio scaricato della libreria nella cartella jqueryui; in Explorer o Finder, dovresti finire con la seguente struttura di cartelle:
Iniziamo prima sulla pagina di base e sul codice HTML sottostante; nel tuo editor di testo crea la seguente pagina:
Slider dell'interfaccia utente jQuery Alcune ben note nebulose galattiche e le loro statistiche vitali
Nebulosa Omega
- Distanza dalla Terra:
- 5000 - 6000 anni luce
- Diametro:
- 15 anni luce
- Massa:
- 800 masse solari
- Numero di catalogo:
- M17 / NGC6618
- Scoperto in:
- 1764
- Scopritore:
- Philippe Loys de Chéseaux
Salva questo come slider.html nella cartella di scorrimento. Nella parte iniziale della pagina, colleghiamo al foglio di stile dell'interfaccia utente jQuery, che contiene tutto il CSS richiesto per ciascuno dei componenti della libreria. Può sembrare uno spreco; in qualche modo è come stiamo usando un singolo componente, ma usando un foglio di stile da 26KB. Tuttavia, utilizzando uno strumento come YUICompressor, possiamo facilmente ridurlo, e con GZipping possiamo anche abbassarlo ulteriormente. Ci colleghiamo anche al nostro foglio di stile personalizzato, che creeremo in seguito.
Non abbiamo ancora aggiunto alcuno stile, ma per riferimento, la seguente schermata mostra il widget di scorrimento predefinito:
Nella pagina tutto ciò che abbiamo è il mark-up per il contenuto e il cursore; abbiamo un elemento contenitore esterno che abbiamo assegnato al nome della classe ui-corner-all. Questa è una delle classi prese di mira dal foglio di stile dell'interfaccia utente jQuery e darà al nostro contenitore (e agli altri elementi a cui lo diamo) degli angoli arrotondati. Utilizza CSS3 per ottenere questo risultato, quindi non tutti i browser sono supportati, ma gli utenti di Firefox, Safari o Chrome li vedranno.
All'interno del contenitore abbiamo un elemento di titolo che descrive il contenuto, seguito da un altro elemento contenitore (che avrà anche angoli arrotondati nei browser di supporto); quando arriviamo ad aggiungere il CSS, a questo elemento verrà assegnata una regola di overflow nascosta che nasconderà la maggior parte dei singoli blocchi di contenuti e ci consentirà di farli scorrere in vista usando il cursore. Questo elemento funzionerà come visualizzatore.
All'interno del visualizzatore abbiamo un elemento contenitore finale; la ragione di questo è per le prestazioni: quando aggiustiamo la proprietà CSS sinistra con jQuery, selezioneremo e manipoleremo solo un elemento invece di molti blocchi di contenuti. Usiamo un altro nome di classe dalla libreria UI su questo elemento - la classe ui-helper-clearfix, che cancella automaticamente gli elementi flottati all'interno di qualsiasi elemento a cui è applicato.
Di seguito è riportato un esempio di blocco del contenuto; Ne ho mostrato solo uno nell'esempio di codice sopra perché mostrare altro sarebbe una ripetizione inutile. Nel file sorgente ce ne sono sette, ma puoi inserirne quanti ne vuoi e lo slider funzionerà come dovrebbe. Ogni blocco di contenuto contiene un'intestazione, un'immagine e una lista di definizioni, che semanticamente è probabilmente la scelta migliore per questo esempio, ma non necessariamente necessaria in altre implementazioni. I blocchi di contenuti possono presentare praticamente tutto ciò di cui hanno bisogno, a condizione che ogni contenitore abbia una dimensione fissa; vedrai perché questo è importante, arriviamo ad aggiungere JavaScript un po 'più tardi.
Dopo l'elemento visualizzatore arriva un contenitore vuoto che verrà trasformato nel widget di scorrimento una volta richiamata la libreria dell'interfaccia utente. Questo è tutto l'HTML sottostante di cui avremo bisogno. Di seguito, colleghiamo a jQuery e ai file di origine dell'interfaccia utente jQuery; ancora, questo file contiene tutto il codice JavaScript necessario per eseguire l'intera libreria dell'interfaccia utente, che per questo tutorial è più del necessario. Vi sono singoli file per il core e ciascun componente separatamente che possono ridurre l'ingombro della libreria. Entrambi i file JS jQuery e jQuery UI JS sono già stati minimizzati.
In realtà non dobbiamo preoccuparci di definire lo stesso widget di scorrimento; il tema che abbiamo scaricato con la libreria lo farà per noi. Il CSS che stiamo per aggiungere è praticamente puramente arbitrario per lo scopo di questo tutorial, per mettere ordine e dare un aspetto minimale di base. Fintanto che i singoli blocchi di contenuto (dato un nome di classe dell'articolo) hanno una larghezza fissa e sono flottati a sinistra all'interno dell'elemento trasportatore, e se il visualizzatore ha il proprio overflow impostato su nascosto, tutto dovrebbe funzionare come previsto.
In un nuovo file nel tuo editor di testo aggiungi il seguente codice:
h2 text-align: center; font: normale 150% Georgia; #sliderContent width: 650px; margin: auto; imbottitura: 0 50px 50px; background-color: #ebebeb; border: 1px solid # 898989; .viewer width: 607px; altezza: 343px; margine: 0 auto 40px; padding: 1px; overflow: hidden; position: relative; border: 1px solid # 898989; .content-conveyor width: 610px; altezza: 335px; position: relative; .item width: 304px; float: sinistra; font-family: Tahoma; text-align: center; background-color: #ebebeb; .item h2 font-size: 100%; margine: 10px 0; .item dl margin: 10px 0; .item dt, .item dd float: left; larghezza: 149px; text-align: right; margin: 0; font-size: 70%; .item dt font-weight: bold; margin-right: 5px; .item dd text-align: left; .item img border: 1px solid # 898989; background-color: #FFFFFF; padding: 1px;
Salva questo come slider.css nella cartella di scorrimento. La nostra pagina dovrebbe ora assomigliare a questa:
Tutto quello che dobbiamo fare ora è aggiungere il JavaScript che inizializzerà il cursore e controllerà i nostri blocchi di contenuti. Subito dopo l'elemento di script che collega all'interfaccia utente di jQuery in slider.html, aggiungi il seguente codice:
È un frammento di codice molto breve e semplice, con pochissime cose da fare; diamo un'occhiata alla riga per riga; All'interno della scorciatoia document.ready abbiamo prima impostato alcune variabili in modo da poter memorizzare nella cache gli elementi della pagina che manipoleremo per motivi di prestazioni; questo rende il nostro codice più veloce perché stiamo attraversando solo il DOM e selezionando ogni elemento una volta.
Per prima cosa selezioniamo l'elemento trasportatore puntando sul nome della sua classe; poiché l'uso di un selettore di classe è inefficiente, diamo al selettore un contesto dell'elemento sliderContent. Il contesto è fornito utilizzando un selettore di ID, quindi non è necessario attraversare tutto il DOM. Selezioniamo anche la raccolta di blocchi di contenuti allo stesso modo.
Una volta memorizzati i nostri selettori, possiamo impostare la lunghezza dell'elemento trasportatore; nel CSS è stato impostato sulla larghezza di due dei blocchi di contenuto, ma affinché funzioni correttamente, le caselle di contenuto devono fluttuare l'una accanto all'altra, quindi il trasportatore deve essere sufficientemente ampio da poter essere.
In modo da non limitare il numero di blocchi di contenuti che possono essere inseriti nel widget, non viene inserito un hardcore di una larghezza impostata; invece, otteniamo il numero di blocchi di contenuti e moltiplichiamo questo per la larghezza di ogni blocco. Questo è il motivo per cui è importante impostare una larghezza fissa sui blocchi. Abbiamo bisogno di utilizzare la funzione parseInt di JavaScript quando recuperiamo la larghezza dei blocchi perché il metodo jQuery css restituisce un valore stringa in modalità getter.
Successivamente creiamo un oggetto di configurazione letterale che verrà passato al metodo di scorrimento dell'interfaccia utente jQuery e utilizzato per impostare alcune proprietà del widget di scorrimento. Il nostro oggetto di configurazione ha due proprietà, max e slide. Il valore della proprietà massima è un numero intero che rappresenta la larghezza dell'elemento trasportatore meno la larghezza del visualizzatore. Questo sarà il valore massimo che può raggiungere l'handle del dispositivo di scorrimento.
Il valore della proprietà slide è una funzione anonima che riceverà automaticamente due argomenti; l'oggetto evento originale e un oggetto preparato contenente proprietà utili relative al widget. Non usiamo affatto il primo argomento, che definiamo come e, ma dobbiamo includerlo per ottenere l'accesso al secondo argomento, che chiamiamo ui.
L'evento di diapositiva è un evento personalizzato esposto dall'API del cursore e la funzione che impostiamo come valore verrà chiamata ogni volta che si verifica un'interazione di una diapositiva. Ogni volta che viene attivato l'evento, semplicemente manipoliamo la proprietà di stile sinistra del nostro elemento di trasporto negativamente della stessa quantità di spostamento del cursore. Possiamo ottenere il valore con cui viene spostato il cursore utilizzando la proprietà value dell'oggetto ui.
Impostiamo il valore massimo del cursore sulla lunghezza dell'elemento trasportatore, in questo esempio finisce con 2128 px, quindi il valore massimo è 2128. Questo non è in pixel, come vedrete nella prossima schermata, lo slider stesso è lungo circa 650px. Ma se spostiamo il cursore a circa metà della traccia, il valore riportato nell'oggetto ui sarà intorno a 1064, quindi spostiamo il bordo sinistro del trasportatore di molti pixel a sinistra oa destra.
Non dobbiamo preoccuparci di scoprire in quale direzione è stato spostato il cursore; se l'handle del dispositivo di scorrimento è già stato spostato a destra, la proprietà CSS di sinistra se il trasportatore avrà già un valore negativo. Quando riduciamo un numero negativo da un numero negativo, il risultato è ovviamente un numero positivo, quindi il trasportatore tornerà come dovrebbe. La pagina completata dovrebbe ora apparire con il cursore:
Dovresti scoprire che funziona come previsto e che i diversi blocchi di contenuto possono essere spostati dentro e fuori dalla vista usando il widget di scorrimento. Oltre all'interazione di trascinamento standard, anche incorporata nel dispositivo di scorrimento è l'aggiunta utile di un'interazione di clic; se si fa clic in qualsiasi punto della traccia, l'handle viene automaticamente spostato in quella posizione e viene eseguita la funzione di richiamata della diapositiva.
In questo tutorial abbiamo esaminato come l'HTML sottostante utilizzato per il cursore (un semplice contenitore vuoto), lo stile predefinito applicato dalla libreria e come possa essere configurato e inizializzato con il nostro codice.
Il cursore è una grande aggiunta a qualsiasi interfaccia; è facile da configurare e facile da usare per i nostri visitatori, è tattile e interattivo e può essere utilizzato in una varietà di situazioni dallo spostamento di contenuti in giro come in questo esempio o come, ad esempio, un controllo del volume su un'applicazione web in streaming.
Accentsconagua