Recentemente, ho visto un certo numero di siti Web che utilizzano questa interfaccia di documento a paginazione basata su JavaScript. Agli utenti viene presentato un set di documenti di più pagine che inizia nella prima pagina e hanno la possibilità di passare da una pagina all'altra in modo dinamico. Questa può essere una soluzione molto migliore rispetto al collegamento diretto a un documento PDF. O potrebbe anche essere un'alternativa in cui si dispone di un collegamento per il download PDF, oltre alle immagini del documento incorporato per un facile accesso.
In questo tutorial voglio dimostrare come possiamo costruire un piccolo script che gestisca qualsiasi numero di documenti. Il codice JS è un po 'complicato dal momento che dobbiamo adattarci per un gran numero di pagine. Tuttavia, non è molto difficile personalizzare e ottenere il design esattamente come se fosse necessario! Guarda la mia demo di esempio qui sotto per avere un'idea di cosa creeremo.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Dobbiamo prima creare i file index.html e styles.css nella stessa directory. Ho anche scaricato una copia recente di jQuery da archiviare con il mio altro documento JS. jQuery è l'unica dipendenza per ciò che abbiamo bisogno di costruire e la libreria minimizzata non occupa molto spazio.
Come puoi vedere, l'intestazione non contiene nulla di troppo comune. Anche il contenuto del corpo è facile da capire e ho cercato di mantenere l'interfaccia il più semplice possibile. C'è un singolo div usando l'ID #documentcontainer che contiene l'immagine della prima pagina. Questo tag img si aggiorna automaticamente una volta che l'utente fa clic su uno dei link di navigazione o fa clic sull'immagine stessa per spostarsi in avanti di una pagina.
Sto solo usando il? e ← entità per la visualizzazione di collegamenti a freccia. Ma potresti aggiornare questo design per apparire come più ti piace. La parte veramente importante sarebbero gli ID allegati su ciascun link. Questi corrispondono ai gestori di eventi jQuery che si attivano dopo che l'utente fa clic su una delle frecce per spostarsi in avanti o indietro nel set di documenti.
Configurazione della pagina
Viene chiamato un attributo interessante che trovi sul tag img data-page. Usiamo questo attributo per determinare quale pagina è attualmente visualizzata senza bisogno di indovinare dal nome file corrente. jQuery aggiornerà questo valore quando si passa da una pagina all'altra.
Dagli stili CSS dobbiamo solo preoccuparci del contenuto del corpo interiore. Troverai tutti i reset tipici e gli stili div wrapper centrati all'interno del foglio di stile. Questo è abbastanza comune e spero che gli sviluppatori di frontend abbiano già familiarità con queste idee.
Il contenitore del documento ha un po 'di imbottitura su entrambi i lati per mantenere l'immagine centrata sulla pagina. Anche il tag img stesso ha la proprietà cursore: puntatore; per ogni volta che l'utente si posiziona per promuovere un evento di clic. Non esiste un link di ancoraggio che avvolge l'img perché non vogliamo collegarci da nessuna parte. Ma l'immagine dovrebbe essere cliccabile e questa icona del mouse a forma di mano è la tecnica perfetta per l'esperienza dell'utente.
Con tutto il resto impostato sulla pagina, possiamo ora approfondire il jQuery. Ho cercato di mantenere lo script molto malleabile utilizzando variabili che è possibile aggiornare per i propri documenti. Ma dal momento che ci sono tanti metodi diversi per raggiungere questo obiettivo, non posso garantire che il mio codice sia la soluzione perfetta e assolutamente perfetta!
jQuery Variabili di paging
Ogni singola pagina del documento è in realtà un'immagine JPG esportata da questo documento PDF utilizzando Adobe Photoshop. Questo processo dovrebbe essere possibile con qualsiasi PDF tipico, il che rende ancora più facile la pubblicazione sul Web utilizzando un visualizzatore di documenti JS. Dovremmo dare un'occhiata al mio file personalizzato docview.js e abbattere ciascuno dei blocchi di codice.
Queste 4 variabili possono essere personalizzate se si utilizza un diverso set di documenti. Il primo è setDirectory che dovrebbe portare a un valore URL locale o assoluto, con la barra diretta, che punta alla directory delle immagini. tipi di file sarebbe l'estensione delle immagini del tuo documento. lastDocNum è il numero totale di pagine nel tuo set, in questo modo jQuery sa quando abbiamo raggiunto la fine del tuo documento.
L'ultima variabile fileDigits è importante da spiegare. Questo script presuppone che tu debba etichettare i set di documenti nell'ordine di 01.jpg, 001.jpg o 0001.jpg, usando comunque molti zeri per riempire il posto delle pagine. Se si dispone di un documento di 2.500 pagine, l'ordinamento dovrebbe essere numericamente sequenziale e la variabile fileDigits sarà impostata su 4 perché ci sono 4 cifre numeriche all'interno di ciascun nome di immagine.
Gestire immagini dinamiche
Quando stavo scavando attraverso Stack Overflow ho trovato questa incredibile soluzione per aggiungere zeri al nome del file.Abbiamo bisogno di convertire il nome del file in un numero intero per aumentare il valore di 1. Quindi lo convertiamo in una stringa, aggiungere il numero corretto di zeri e dargli l'estensione del file finale.
Probabilmente non hai bisogno di sapere esattamente come funziona, ma è una grande funzione. L'ultimo grande blocco di codice gestirà i gestori di eventi jQuery per fare clic sull'immagine o su uno dei due collegamenti di navigazione. Abbiamo impostato il file img principale in una variabile JavaScript denominata docimage e quindi manipolare gli attributi da lì.
Le nuove variabili create all'interno manterranno il prossimo numero di pagina numerico, insieme al nuovo numero ID della pagina e alla nuova origine dell'immagine. Per prima cosa controlliamo se l'ID è uguale al numero finale di documenti e in tal caso smettiamo di eseguire ulteriormente lo script. Ciò significa che abbiamo raggiunto la pagina finale e che l'utente sta facendo clic sulla pagina finale per andare avanti, ma non abbiamo nient'altro da mostrare! In caso contrario, gli attributi img vengono aggiornati e la nuova immagine verrà visualizzata istantaneamente.
L'ultimo gestore di eventi utilizza selettori jQuery per entrambi i collegamenti freccia. Sulla base del nome dell'ID, controlliamo se l'ID della pagina corrente debba essere sottratto o aggiunto da uno. Inoltre dobbiamo eseguire un controllo simile per vedere se l'utente si trova nella prima pagina e non può più tornare indietro, o se si trova nell'ultima pagina e non può più andare avanti. Altrimenti i codici sono quasi identici e dovresti essere in grado di seguirlo fino alla fine.
Demo dal vivo - Scarica il codice sorgente
Pensieri finali
Spero che questo tutorial possa rivelarsi utile per alcuni sviluppatori web. Questa idea è ancora abbastanza nuova e non c'è una grande richiesta di questa funzionalità su tutti i siti web. Ma mi piace l'idea di inserire nuovi URL immagine in modo dinamico in modo che la pagina non si aggiorni.
Ciò offre all'utente un'esperienza più pulita e l'intero sito Web carica meno richieste HTTP per pagina. Se hai idee o domande simili sul tutorial sentiti libero di condividere con noi nell'area di discussione qui sotto!