Nyligen har jag sett ett antal webbplatser med hjälp av det här JavaScript-drivna paged dokumentgränssnittet. Användare presenteras en flersidig dokumentuppsättning som börjar på första sidan, och de har möjlighet att växla mellan sidor dynamiskt. Det här kan vara en mycket bättre lösning än att länka direkt till ett PDF-dokument. Eller så kan det vara ett alternativ där du har en PDF-länk, plus de inbäddade dokumentbilderna för enkel åtkomst.
I denna handledning vill jag visa hur vi kan bygga ett litet manus som hanterar ett visst antal dokument. JS-koden är lite knepig eftersom vi behöver anpassa för ett stort antal sidor. Men det är inte så svårt att anpassa och få designen att se exakt ut som du skulle behöva det! Kolla in min provdemo nedan för att få en uppfattning om vad vi ska skapa.
Live Demo - Hämta källkod
Komma igång
Vi måste först skapa index.html och styles.css-filer i samma katalog. Jag hämtade också en nyligen kopia av jQuery att lagra med mitt andra JS-dokument. jQuery är det enda beroendet för vad vi behöver bygga och det förminskade biblioteket tar inte upp mycket utrymme.
Som du kan se innehåller inte rubriken något för vanligt. Kroppsinnehållet är också lätt att förstå och jag har försökt att hålla gränssnittet så enkelt som möjligt. Det finns en enda div med ID #documentcontainer vilken innehåller första sidan bilden. Den här img-taggen uppdateras automatiskt när användaren klickar på någon av navigeringslänkarna eller klickar på själva bilden för att flytta fram en sida.
Jag använder bara? och ← enheter för visning av pillänkar. Men du kan uppdatera den här designen för att visas som du vill. Den väldigt viktiga delen skulle vara ID-erna bifogade på varje länk. Dessa motsvarar jQuery-händelsehanterare som utlöses efter att användaren klickar på någon av pilarna för att gå framåt eller bakåt i dokumentuppsättningen.
Konfigurera sidan
Ett intressant attribut du hittar på img-taggen heter data sida. Vi använder det här attributet för att bestämma vilken sida som visas för närvarande utan att behöva gissa från det aktuella filnamnet. jQuery uppdaterar detta värde när du byter mellan alternativa sidor.
Från CSS-stilar behöver vi verkligen bara vara oroade över det inre kroppsinnehållet. Du hittar alla de typiska återställda och centrerade wrapper div-stilarna inom stilarket. Det här är allt ganska vanligt och jag hoppas att frontendutvecklare skulle känna till dessa idéer redan.
Dokumentbehållaren har lite vaddering på båda sidor för att hålla bilden centrerad på sidan. Även img-taggen själv har egenskapen markör: pekare; för närhelst användaren svänger för att marknadsföra en klickhändelse. Det finns ingen ankarlänk som sätter in img eftersom vi inte vill länka någonstans. Men bilden ska vara klickbar, och den här muspekaren är en perfekt användarupplevelsesteknik.
Med allt annat setup på sidan kan vi nu dyka in i jQuery. Jag försökte hålla scriptet mycket formbar med hjälp av variabler som du kan uppdatera för dina egna dokument. Men eftersom det finns så många olika metoder för att uppnå detta, kan jag inte garantera att min kod är den absoluta perfekta änden-allt-alla-lösningen!
jQuery personsökningsvariabler
Varje enskild dokumentsida är faktiskt en JPG-bild som exporteras från detta PDF-dokument med hjälp av Adobe Photoshop. Denna process bör vara möjlig med vilken typ av PDF som helst, vilket gör det enklare att publicera på webben med en JS-dokumentvisare. Vi borde ta en titt på min anpassade fil docview.js och bryt ner var och en av kodblocken.
Dessa 4 variabler kan anpassas om du använder en annan uppsättning dokument. Först är setDirectory vilket borde leda till ett lokalt eller absolut webbadressvärde, med framåtskuren, pekar på katalogens katalog. filtyper skulle vara förlängningen av dina dokumentbilder. lastDocNum är det totala antalet sidor i din uppsättning, så vet du när vi har kommit fram till slutet av ditt dokument.
Den sista variabeln fileDigits är viktigt att förklara. Detta skript förutsätter att du kommer att märka dokumentuppsättningar i storleksordningen 01.jpg, 001.jpg eller 0001.jpg, med hjälp av många nollor att fylla sidans sidor. Om du har ett dokument på 2500 sidor ska beställningen vara numeriskt sekventiell och filenDigits-variabeln skulle vara inställd på 4 eftersom det finns 4 numeriska siffror inom varje bildnamn.
Hantering av dynamiska bilder
När jag grävde genom Stack Overflow hittade jag den här fantastiska lösningen för att lägga till nollor i filnamnet.Vi måste konvertera filnamnet till ett heltal för att öka värdet med 1. Då konverterar vi det tillbaka till en sträng, lägger till rätt antal nollor och ger det slutänden filtillägg.
Du behöver nog inte veta exakt hur det fungerar men det är en bra funktion. Det sista stora kvarteret kommer att hantera jQuery-händelsehanterare för att klicka på bilden eller någon av de två navigeringslänkarna. Vi ställer in huvud img till en JavaScript-variabel som heter docimage och sedan manipulera attributen därifrån.
De nya variablerna skapade inuti kommer att hålla nästa numeriska sidnummer tillsammans med det nya sidnumret och den nya bildkällan. Vi kontrollerar först om ID: n är lika med det allra sista antalet dokument och i så fall stoppar vi skriptet från att fortsätta. Det betyder att vi har träffat den sista sidan och användaren klickar på den sista sidan för att gå vidare, men vi har inget annat att visa! Annars uppdateras img-attributen och den nya bilden visas omedelbart.
Den sista händelsehanteraren använder jQuery-selektorer för båda pilarna tillsammans. Baserat på ID-namnet kontrollerar vi om det aktuella sididentifikatet ska subtraheras eller läggas till av en. Vi måste också göra en liknande kontroll för att se om användaren är på första sidan och inte kan gå tillbaka längre, eller om de är på den sista sidan och inte längre kan gå vidare. Annars är koderna nästan identiska och du borde kunna följa hela det hela till slutet.
Live Demo - Hämta källkod
Slutgiltiga tankar
Jag hoppas att denna handledning kan vara användbar för vissa webbutvecklare. Denna idé är fortfarande ganska ny och det finns bara en stor efterfrågan på denna funktionalitet på alla webbplatser. Men jag tycker om idén om att dra nya bildadresser dynamiskt så att sidan inte uppdateras.
Detta ger användaren en renare upplevelse och hela webbplatsen laddar färre HTTP-förfrågningar per sida. Om du har några liknande idéer eller frågor om handledningen kan du dela med oss i diskussionsområdet nedan!