Lär dig att utforma artiklar för utskrift och e-post

Vid utformning av webbplatser är en vanligt önskad funktion förmågan att dynamiskt skriva ut eller maila någon del av en webbsida. Tyvärr slängs denna idé vanligtvis senare i projektet på grund av brist på tid eller kunskap. Det är svårare att formatera texten för utskrift än det kan verka. Idag använder vi JavaScript för att automatiskt söka efter vissa sidelement och formatera dem korrekt för en utskrift.

mål:

I slutet av denna handledning har vi gjort följande:

• Använd jQuery för att skriva ut eller maila varje sektion av en sida automatiskt när ett visst element klickas.
• Formatera och ändra stilen för att optimera för utskrift eller e-post.
• Lägg till variabler i e-postversionen (Till, Från, Meddelande, etc.)

Sidan

Vad är fel med detta?

Wow ... den sidan är färgstark. Jag håller med - det är inte det största färgschemat i världen. Denna design var definitivt inte avsedd för tryck. Även om bakgrundsblå inte kommer att skrivas ut på de flesta skrivare, kommer skrivaren bara att försvaga den. Detta kommer att förstöra resten av designen men för att nu kommer den ljusa orange och gröna texten att skrivas ut på en vit bakgrund. Det finns inget enkelt sätt för en användare att skriva ut en fin svartvitt formaterad artikel från den här sidan, inte att kopiera den till en ordbehandlare och formatera det själv.

Håll designen, åtgärda problemet

En lösning kan vara att tillhandahålla ett utskriftsformat, som Tuts + har gjort. Detta skulle fungera om det bara fanns en artikel på en sida. Tyvärr är det här exemplet i bloggformat. Det betyder att det finns flera artiklar på en sida. och chansen är att användaren bara vill skriva ut en artikel. Vi ska använda jQuery för att tillåta användaren att klicka på en länk efter varje artikel som formaterar artikeln och låter dem skriva ut eller maila det.

HTML för den här sidan

HTML är ganska enkelt för den här sidan. Vi lägger till några standardklasser: En för att beteckna en sektion som ska skrivas ut / mailas (.printSection), en för att ange det område som innehåller länkarna att skriva ut eller e-posta (.printControls), en klass för alla utskriftslänkar ( .printControl) och en klass för alla e-postlänkar (.emailControl). Lägg märke till hur vi också kopplade till Googles minifierade fil. Detta tillåter oss att använda jQuery senare.

        
 
  
Detta är en rubrik

  
Artikel Text
 
Utskriftsavsnitt
 | 
E-postavsnitt 
 
  
Detta är ett annat rubrik
Artikel Text
 
Mer artikeltext
 
Utskriftsavsnitt
 | 
E-postavsnitt 
 
  
Detta är ett annat rubrik
Artikel Text
 
Mer artikeltext
 
Utskriftsavsnitt
 | 
E-postavsnitt 
 
  
Detta är en rubrik igen
Artikel Text
 
Mer artikeltext
 
Utskriftsavsnitt
 | 
E-postavsnitt 
 
   

CSS

CSS är också ganska enkelt.

 kropp text-align: center; font-family: Tahoma, Arial, Helvetica, Sans Serif;  h2 färg: # d98841; typsnittstorlek: 48px; vaddering: 0px; marginal: 0px; typsnitt: normal;  .page-wrap margin-left: auto; marginal-höger: auto; bredd: 550px; bakgrund: # 10222b; vaddering: 15px; text-align: left;  .printSection p färg: # bdd684; fontstorlek: 12px; text-align: rättfärdiga;  p.printControl, p.emailControl, .printControls display: inline; färg: # f2ece4;  p.printControl, p.emailControl markör: pekare;  img margin-left: 35px; 

Vi lägger också till lite CSS för att öka användbarheten. Om Javascript är inaktiverat vill vi inte ha döda länkar - så vi gömmer länkarna:

Script Time

Vad vill vi åstadkomma vid utskrift?

• lägg till en lyssnare för att vänta på en .printControl eller .emailControl som ska klickas.
• ändra utseendet på avsnittet att vara skrivarvänligt
• Ta tag i de delar av sidan som vi vill skriva ut
• öppna ett fönster och storlek det.
• sätt de delar av sidan som vi grep in i fönstret
• öppna dialogrutan för utskrift
• stäng fönstret efter färdig utskrift

Hur vi ska utföra dessa saker?

Lägg till lyssnaren:

Vi lägger skrivarlyttaren in i DOM-läsfunktionen:

 $ (dokument) .ready (funktion () $ ('printControl'). klicka (funktion () // Här lägger vi ut tryckkoden););

Ändra Utseendet

Vi behöver ändra färgerna från det färgstarka systemet till svartvitt. Det finns flera sätt att nå denna uppgift. Metoden vi använder är att tillfälligt lägga till en klass i den berörda delen, ta koden som ska skrivas ut och ta omedelbart av klassen igen. Vi lägger till klassen genom att använda jQuery's CSS-väljare för att välja divs och sedan lägga till en klass för alla element inuti kommandot barn ().

 $ (dokument) .ready (funktion () $ ('. printControl'). klicka (funktion () $ ('. printSection'). barn (). addClass ('printversion'); ) .children (). removeClass ('printversion');););

Vi måste också lägga till lite mer styling för elementen med tryckversion:

 h2.printversion, p.printversion färg: # 333333; text-align: left;  .printControls.printversion display: none;  

Griper av avsnittet

Vi ska nu ta tag i sektionen och sätta den i en variabel. Vi lägger till detta efter att vi lägger till klassen men innan vi tar bort den så att versionen i variabeln är med den tillagda klassen. Vi tar tag i HTML-koden i huvudet för att få stylinginformationen och sammanfatta den med sektionens HTML. Med "detta" kan vi bara välja den sektion som klickades i stället för dem alla. Då går vi upp till nivåer från utskriftsknappen och tar tag i det.

 $ (dokument) .ready (funktion () $ ('. printControl'). klicka (funktion () $ ('. printSection'). barn (). addClass ('printversion'); var printContent = $ head)). html () + $ (detta) .parent () .föräldra (). html (); $ ('. printSection'). barn (). removeClass ('printversion');););

Öppnar fönstret

Vi behöver nu sätta variabeln någonstans. Men först måste vi öppna ett nytt fönster. Dessa rader är inte så viktiga och är bara vanliga JavaScript - nej jQuery i det här steget. I grund och botten öppnar vi ett fönster, tilldelar ett unikt namn och ger några grundläggande parametrar.

 $ (dokument) .ready (funktion () $ ('. printControl'). klicka (funktion () $ ('. printSection'). barn (). addClass ('printversion'); var printContent = $ head)). html () + $ (detta) .parent () .föräldra (). html (); $ ('. printSection'). barn (). removeClass ('printversion'); var windowUrl = 'om: blank "; var uniqueName = nytt datum (); var windowName = 'PrintSection' + uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName, 'left = 500, top = 000, width = 600, height = 1000 ');););

Fyll i fönstret

Vi behöver nu fylla fönstret med vad vi grep tidigare. Vi skriver i grunden bara till fönstret variabelns värde.

 $ (dokument) .ready (funktion () $ ('. printControl'). klicka (funktion () $ ('. printSection'). barn (). addClass ('printversion'); var printContent = $ head)). html () + $ (detta) .parent () .föräldra (). html (); $ ('. printSection'). barn (). removeClass ('printversion'); var windowUrl = 'om: blank "; var uniqueName = nytt datum (); var windowName = 'PrintSection' + uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName, 'left = 500, top = 000, width = 600, height = 1000 '); printWindow.document.write (printContent);););

Skriv ut och stäng

Vi måste lägga till några fler rader innan vi är färdiga. Först måste vi fokusera fönstret och öppna dialogrutan för utskrift. Då stänger vi fönstret efter att dialogrutan har stängts.

 $ (dokument) .ready (funktion () $ ('. printControl'). klicka (funktion () $ ('. printSection'). barn (). addClass ('printversion'); var printContent = $ head)). html () + $ (detta) .parent () .föräldra (). html (); $ ('. printSection'). barn (). removeClass ('printversion'); var windowUrl = 'om: blank "; var uniqueName = nytt datum (); var windowName = 'PrintSection' + uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName, 'left = 500, top = 000, width = 600, height = 1000 '); printWindow.document.write (printContent); printWindow.document.close (); printWindow.focus (); printWindow.print (); printWindow.close ();););

Det är allt. Vi ska nu ha en funktionell utskriftsknapp efter varje artikel. Bra jobb, men vi är inte färdiga än. Nu måste vi göra e-postknappen funktionen korrekt.

Vad måste vi uppnå när vi skickar mail?

• lägg till en lyssnare för att vänta på en .printControl eller .emailControl som ska klickas.
• Vi behöver den e-postadress de skickar den till.
• Vi behöver deras namn.
• Vi behöver deras email.
• Vi behöver ett kort meddelande som ska skickas med.
• sätt all denna information i variabler genom att använda anvisningar.
• ändra utseendet på avsnittet för att vara e-postvänligt
• Vi behöver webbadressen till sidan, inklusive en ankerkod för att hoppa direkt till artikeln.
• sätt all denna information i en variabel.
• sätt detta till ett nytt fönster.

Saker vi redan har gjort vid utskrift

Det finns ingen anledning att gå över alla dessa steg igen. Vi kan hoppa över de som vi täckte med utskrift:

 $ (dokument) .ready (funktion () $ ('. emailControl'). Klicka (funktion () $ ('.SpringSektion'). barn (). addClass ('printversion'); ) .children (). removeClass ('printversion'); var windowUrl = 'om: blank'; var uniqueName = nytt datum (); var windowName = 'emailSection' + uniqueName.getTime (); var emailWindow = window.open windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus ();););

Få informationen

För det här exemplet behöver vi inte något som är fint för att hämta den information som krävs. Vi kommer bara att hämta flera uppmaningar som lagrar informationen i variabler.

 $ (dokument) .ready (funktion () $ ('. emailControl'). klicka (funktion ) var sendTo = prompt ('Var vänlig skriv vem du vill skicka detta till'); var fromWho = prompt Och vad är ditt namn? '); Var fromWhoEmail = prompt (' och vad är din email? '); Var fromMessage = prompt (' Har du ett meddelande? '); $ ('. PrintSection '). .addClass ('printversion'); $ ('.printSection'). barn (). removeClass ('printversion'); var windowUrl = 'om: blank'; var uniqueName = nytt datum (); var windowName = 'emailSection' + uniqueName.getTime (); var emailWindow = window.open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus ();););

Hämta URL och Anchor Tag

Nu måste vi lagra den aktuella webbadressen och artikelnumret (via ankerkoden) i variabler. Vi kommer att kombinera dem senare.

 $ (dokument) .ready (funktion () $ ('. emailControl'). klicka (funktion ) var sendTo = prompt ('Var vänlig skriv vem du vill skicka detta till'); var fromWho = prompt Och vad är ditt namn? '); Var fromWhoEmail = prompt (' och vad är din email? '); Var fromMessage = prompt (' Har du ett meddelande? '); $ ('. PrintSection '). .addClass ('printversion'); var emailID = $ (detta) .parent () .förälder (). hitta ('a'). attr ('namn'); var currentURL = window.location.href; $ .printSection '). children (). removeClass (' printversion '); var windowUrl =' om: blank '; var uniqueName = nytt datum (); var windowName =' emailSection '+ uniqueName.getTime (); var emailWindow = fönster .open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus (););) ;

Att sätta allt tillsammans

Först kombinerar vi URL-adressen tillsammans med ankaretiketten och lägger den i en fin textsträng. Sedan kombinerar vi det med allt annat vi behöver i en variabel som heter emailContent.

 $ (dokument) .ready (funktion () $ ('. emailControl'). klicka (funktion ) var sendTo = prompt ('Var vänlig skriv vem du vill skicka detta till'); var fromWho = prompt Och vad är ditt namn? '); Var fromWhoEmail = prompt (' och vad är din email? '); Var fromMessage = prompt (' Har du ett meddelande? '); $ ('. PrintSection '). .addClass ('printversion'); var emailID = $ (detta) .parent () .förälder (). hitta ('a'). attr ('namn'); var currentURL = window.location.href; var emailLink = "
Källa: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + '
Till:'+ sendTo +'
"+"
Från namn):'+ från vem +'
"+"
Från epost):'+ fromWhoEmail +'
"+"
Meddelande:'+ fromMessage +'
'+ emailLink +'
'+ $ (detta) .parent () .förälder (). html (); $ (PrintSection.) Barn () removeClass (Printversion).. var windowUrl = 'om: blank'; var uniqueName = nytt datum (); var windowName = 'emailSection' + uniqueName.getTime (); var emailWindow = window.open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus (); ); );

Färdig kod

 $ (dokument) .ready (funktion () $ ('. printControl'). klicka (funktion () $ ('. printSection'). barn (). addClass ('printversion'); var printContent = $ head)). html () + $ (detta) .parent () .föräldra (). html (); $ ('. printSection'). barn (). removeClass ('printversion'); var windowUrl = 'om: blank "; var uniqueName = nytt datum (); var windowName = 'PrintSection' + uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName, 'left = 500, top = 000, width = 600, height = 1000 '); printWindow.document.write (printContent); printWindow.document.close (); printWindow.focus (); printWindow.print (); printWindow.close ();); $ ('. EmailControl '). klick (funktion () var sendTo = prompt ('Var vänlig skriv vem du vill skicka detta till'); var fromWho = prompt ('Och vad är ditt namn?'); var fromWhoEmail = prompt ('Och vad är ditt E-post? '); Var fromMessage = prompt (' Har du ett meddelande? '); $ ('. PrintSection '). Barn (). AddClass (' printversion '); var emailID = $ (detta) .parent .parent (). hitta ('a'). attr ('namn'); var currentURL = window.location.href; var emailLink = "
Källa: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + '
Till:'+ sendTo +'
"+"
Från namn):'+ från vem +'
"+"
Från epost):'+ fromWhoEmail +'
"+"
Meddelande:'+ fromMessage +'
'+ emailLink +'
'+ $ (detta) .parent () .förälder (). html (); $ (PrintSection.) Barn () removeClass (Printversion).. var windowUrl = 'om: blank'; var uniqueName = nytt datum (); var windowName = 'emailSection' + uniqueName.getTime (); var emailWindow = window.open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (emailContent); emailWindow.document.close (); emailWindow.focus (); ); );

Var gjort

Vi har nu ett automatiskt sätt att skriva ut och maila delar av en webbplats som bryts ned när JavaScript är avaktiverat. Bra jobbat! Om du haft denna handledning, håll dig stillad; I en framtida handledning täcker vi hur vi gör det till ett jQuery-plugin. Under tiden, om du har några frågor eller kommentarer, var noga med att lämna dem nedan. Jag skulle gärna höra från dig!