Molti negozi online e siti di e-commerce utilizzano un piccolo pannello di dettagli per offrire maggiori informazioni su un prodotto. Lo ricordo fin dai primi giorni della navigazione di Template Monster, ed è diventato una tendenza comune per i web designer moderni.
In questo tutorial mi piacerebbe spiegare come possiamo duplicare questo effetto usando un codice molto semplice. Ho fornito due versioni diverse, una costruita su jQuery e un'altra costruita usando CSS3. Ci sono vantaggi per ognuno e puoi scaricare una copia del mio codice tutorial per vedere quale preferisci.
jQuery Demo - Demo CSS3 - Scarica il codice sorgente
Strutturare la pagina
La mia versione di jQuery ha un setup HTML leggermente diverso rispetto all'adattamento di CSS3. Ovviamente avremo bisogno di una copia della libreria jQuery, ma ancora più importante è la gestione del pannello dei dettagli. Con JS sto chiamando un singolo elemento HTML per sostituire il contenuto HTML interno. CSS3 richiede elementi div univoci accanto a ciascuno dei link delle miniature e quindi aggiunge più elementi alla tua pagina.
Questo codice si trova nel corpo della mia versione jQuery. Le miniature sono suddivise in voci di elenco in cui estraiamo le informazioni per il pannello dei dettagli dagli attributi HTML. Questi dettagli possono essere trovati nel link di ancoraggio, nel tag immagine e in un meta tag correlato che contiene la descrizione del contenuto. Sto anche utilizzando un attributo di dati HTML5 per la data di pubblicazione.
Verso il basso noterai un singolo contenitore div con l'ID # Dettagli-pane. Il targeting di questo oggetto in jQuery ci consente di sostituire i valori interni per i dettagli del passaggio del mouse. Ora diamo un'occhiata a un elemento dell'elemento della lista dalla versione CSS3.
Ho cambiato l'ID in una classe di .details-pane perché abbiamo bisogno di più div adiacenti accanto a ciascuna miniatura. CSS3 verifica quando l'utente passa con il mouse sul link e visualizza il div fratello, che contiene già tutte le informazioni. Quindi un altro vantaggio quando si utilizza CSS3 è che non è necessario estrarre informazioni dagli attributi ogni volta che cambia la visualizzazione di destinazione.
Voglio iniziare con l'esempio CSS3 perché il mio codice jQuery è un po 'più complicato. Questo potrebbe essere un altro motivo per restare con la versione HTML / CSS del frontend, anche se questo effetto andrà perso nei vecchi browser legacy.
Passa con il mouse sui dettagli con CSS3
Il modo in cui funziona tutto sta usando un segno più (+) nel selettore. I CSS indirizzeranno l'ultimo elemento del selettore, in questo caso il nostro .details-pane che si trova direttamente accanto a ciascun link di ancoraggio. Ho dato un link a una classe di .hvrlink quindi sono più facili da identificare.
Spero che non ci sia nulla di troppo complicato in questo blocco di installazione iniziale. Ogni voce di elenco viene lasciata a sinistra con un ampio margine per posizionare solo due miniature per riga. Queste voci dell'elenco contengono il collegamento dell'anteprima e la finestra dei dettagli. Diamo il
Quello che potresti trovare interessante è il cambio di posizione tra i primi due collegamenti. Per ogni altro link ho aggiunto una classe di .lato destro sul contenitore del pannello dei dettagli. Inizialmente spingiamo il pannello al passaggio del mouse sopra 290 px a sinistra perché questa è la lunghezza dell'anteprima. Ma sulla colonna di destra otteniamo questo pannello in bilico sullo schermo, quindi preferiremmo che venisse visualizzato a sinistra. Questo utilizza una posizione sinistra negativa basata sulla larghezza 530px del riquadro dei dettagli stesso.
Questi ultimi due selettori sono tutto ciò di cui abbiamo bisogno per ottenere correttamente la configurazione del passaggio del mouse. Quando l'utente passa sopra un collegamento di miniature, viene immediatamente visualizzato il relativo .details-pane. Il secondo blocco di codice lo mantiene visualizzato anche quando l'utente rimuove la miniatura dai dettagli, in modo che venga sempre visualizzata fino a quando gli utenti non si spostano completamente da quella particolare voce di elenco.
Passare a jQuery
Affrontiamo il codice JS che si trova nella parte inferiore del mio originale index.html file. Gran parte del codice CSS è simile, ma è anche più breve e più facile da leggere perché non abbiamo bisogno di valori assoluti. Questo viene gestito da calcoli jQuery che possono sembrare complicati, ma tutto ha senso una volta che ci si pensa.
Ho scelto come target l'immagine di anteprima per il listener di eventi hover e, una volta attivato, abbiamo impostato un intero gruppo di variabili.Il primo grande blocco di codice ottiene tutte le informazioni importanti che è necessario aggiungere nel contenitore del pannello al passaggio del mouse.
Quindi dobbiamo raccogliere le coordinate per capire dove dovrebbe apparire questo pannello dei dettagli. La coordinata y non cambierà in base alla posizione, ma la coordinata x sarà se si passa il mouse sulla colonna di destra. Ho una dichiarazione di logica che controlla la posizione dell'immagine corrente divisa per l'intera finestra usando $ (Window) .width (). Se l'immagine è oltre il 50% della larghezza totale della pagina, è necessario visualizzarla sul lato sinistro anziché a destra.
Questi set di codice successivi sostituiscono i valori HTML interni nel riquadro dei dettagli utilizzando le variabili definite in precedenza. Alla fine aggiorniamo le proprietà CSS inline per cambiare blocco di visualizzazione e farlo apparire sulla pagina. Quando si passa dalla miniatura, nasconde automaticamente il display, a meno che non ci si posiziona sul riquadro dei dettagli. Questo hover verrà catturato utilizzando un intero listener di eventi separato che richiede un po 'di logica complicata.
Si noti che sto usando due metodi separati .on () collegati allo stesso selettore jQuery. Potresti considerare di associarli a una catena jQuery insieme ad altri ascoltatori di eventi simili. Quando si passa con il mouse, è sufficiente mantenere il pannello visualizzato come elemento di blocco. Ma quando si esce dal pannello dei dettagli, desideriamo solo nasconderlo quando l'utente non si posiziona sulla stessa immagine di anteprima utilizzata per la visualizzazione in primo luogo.
La variabile e viene restituito da ogni evento di mouseout, indicando quale nuovo elemento è stato sospeso. Applicazione della proprietà parentNode possiamo controllare dove questo nuovo elemento è contenuto. Ho quattro controlli logici separati all'interno di questa istruzione e tre di questi controllano gli oggetti all'interno del riquadro dei dettagli. Il nome della variabile Questo si riferisce a # Dettagli-pane.
Dobbiamo verificare se l'utente passa sopra l'elemento h3, il paragrafo o anche l'immagine (che è incorporata in un link di ancoraggio e un div). Se è così allora non nascondiamo nulla.
Sto anche controllando con il nodeName proprietà nel caso in cui l'utente alza il pannello dei dettagli nel corpo. Se il nodo restituisce IMG, allora non dovrebbe cercare di nascondere qualcosa subito. Questa è più una soluzione compromessa perché le uniche immagini nella mia demo riguardano le miniature stesse. Quindi, quando si posiziona il mouse sull'immagine, vogliamo comunque mantenere il pannello visualizzato, altrimenti viene nascosto usando il metodo .css () di jQuery.
Non sono riuscito a risolvere con una soluzione migliore, ma mi piacerebbe ricevere feedback da altri sviluppatori. Potrebbe essere possibile controllare la classe dell'immagine, ma sfortunatamente non puoi farlo con a nodeName proprietà. Troverai il mio codice commentato console.log (e.nodeName) che puoi eseguire per controllare quali proprietà restituiscono al browser.
jQuery Demo - Demo CSS3 - Scarica il codice sorgente
Chiusura
Queste tecniche sono in genere semplici da capire se ti senti a tuo agio nello sviluppo del Web frontend. CSS3 offre una soluzione semplice ma funziona correttamente solo nei browser conformi agli standard. Noterai che entrambe le versioni sono sostanzialmente le stesse per la prospettiva del visitatore. Prova questo nel tuo prossimo progetto web e vedi cos'altro puoi costruire in cima al mio modello.