Leer hoe u artikelen voor afdrukken en e-mail opmaakt

Bij het ontwerpen van websites is een algemeen gewenste functie het vermogen om dynamisch een gedeelte van een webpagina af te drukken of te e-mailen. Helaas wordt dit idee meestal later in het project gesloopt vanwege een gebrek aan tijd of kennis. Het opmaken van de tekst voor het afdrukken is moeilijker dan het in eerste instantie lijkt. Vandaag zullen we JavaScript gebruiken om automatisch naar bepaalde pagina-elementen te zoeken en deze correct te formatteren voor afdrukken.

Doelen:

Aan het einde van deze tutorial hebben we het volgende bereikt:

• Gebruik jQuery om automatisch een gedeelte van een pagina af te drukken of te e-mailen wanneer op een bepaald element wordt geklikt.
• Formatteer en wijzig de stijl om te optimaliseren voor afdrukken of e-mailen.
• Variabelen aan de e-mailversie toevoegen (Aan, Van, Bericht, etc.)

De pagina

Wat is er mis hiermee?

Wauw ... die pagina is kleurrijk. Ik ben het ermee eens - het is niet het beste kleurenschema ter wereld. Dit ontwerp was absoluut niet ontworpen om te worden afgedrukt. Hoewel de achtergrond blauw niet op de meeste printers wordt afgedrukt, zal de printer deze gewoon laten verdwijnen. Dit verpest echter de rest van het ontwerp omdat nu de fel oranje en groene tekst op een witte achtergrond zal worden afgedrukt. Er is geen gemakkelijke manier voor een gebruiker om een ​​mooi zwart-wit geformatteerd artikel van deze pagina af te drukken, in plaats van het in een tekstverwerker te kopiëren en het zelf te formatteren.

Houd het ontwerp, fixeer het probleem

Een oplossing kan zijn om een ​​afdrukstijlblad te leveren, zoals Tuts + heeft gedaan. Dit zou werken als er slechts één artikel op een pagina was. Helaas is dit voorbeeld in blogformaat. Dit betekent dat er meerdere artikelen op een pagina staan; en de kans bestaat dat de gebruiker slechts één artikel wil afdrukken. We gaan jQuery gebruiken om de gebruiker toe te staan ​​op een link te klikken na elk artikel dat het artikel opmaakt en stelt hen in staat om het af te drukken of te e-mailen.

HTML voor deze pagina

De HTML is vrij eenvoudig voor deze pagina. We zullen een paar standaardklassen toevoegen: één om een ​​sectie aan te geven die moet worden afgedrukt / gemaild (.printSection), één om het gebied aan te geven dat de links bevat om te printen of e-mailen (.printControls), een klasse voor alle printkoppelingen ( .printControl), en een klasse voor alle e-maillinks (.emailControl). Merk op hoe we ook gelinkt zijn aan het verkleinde bestand van Google. Dit stelt ons in staat om later jQuery te gebruiken.

        
 
  
Dit is een rubriek

  
Artikel Tekst
 
Print sectie
 | 
E-mail sectie 
 
  
Dit is een andere koers
Artikel Tekst
 
Meer tekst van het artikel
 
Print sectie
 | 
E-mail sectie 
 
  
Dit is een andere rubriek
Artikel Tekst
 
Meer tekst van het artikel
 
Print sectie
 | 
E-mail sectie 
 
  
Dit is weer een koers
Artikel Tekst
 
Meer tekst van het artikel
 
Print sectie
 | 
E-mail sectie 
 
   

De CSS

De CSS is ook vrij eenvoudig.

 body text-align: center; font-family: Tahoma, Arial, Helvetica, Sans Serif;  h2 color: # d98841; lettergrootte: 48 px; opvulling: 0px; marge: 0px; font-gewicht: normaal;  .page-wrap margin-left: auto; marge-rechts: auto; breedte: 550 px; achtergrond: # 10222b; opvulling: 15px; text-align: left;  .printSection p color: # bdd684; lettergrootte: 12px; text-align: rechtvaardigen;  p.printControl, p.emailControl, .printControls display: inline; kleur: # f2ece4;  p.printControl, p.emailControl cursor: pointer;  img margin-left: 35px; 

We voegen ook een beetje CSS toe om de bruikbaarheid te vergroten. In het geval dat Javascript is uitgeschakeld, willen we geen dode links - dus we verbergen de links:

Scripttijd

Wat willen we bereiken tijdens het afdrukken?

• voeg een luisteraar toe om te wachten tot op een .printControl of .emailControl wordt geklikt.
• verander het uiterlijk van de sectie om printervriendelijk te zijn
• pak de delen van de pagina die we willen afdrukken
• open een venster en maak het op maat.
• leg de delen van de pagina die we in het venster hebben gepakt
• open het afdrukdialoogvenster
• sluit het venster na het afdrukken

Hoe we deze dingen gaan doen?

De luisteraar toevoegen:

We plaatsen de luisteraar voor afdrukken in de DOM-leesfunctie:

 $ (document) .ready (function () $ ('. printControl'). klik (functie () // Hier plaatsen we de afdrukcode););

Verander de verschijning

We moeten de kleuren van het kleurrijke schema wijzigen in zwart en wit. Er zijn verschillende manieren om deze taak te volbrengen. De methode die we zullen gebruiken is om een ​​klasse tijdelijk aan de betreffende sectie toe te voegen, de code te nemen om af te drukken en de klasse vervolgens onmiddellijk weer te verwijderen. We voegen de klasse toe door de CSS-selector van jQuery te gebruiken om de divs te selecteren en vervolgens een klasse toe te voegen aan alle elementen binnen de opdracht children ().

 $ (document) .ready (function () $ ('. printControl'). klik (functie () $ ('. printSection'). children (). addClass ('printversion'); $ ('. printSection' ) .children (). removeClass ('printversion');););

We moeten ook wat meer styling toevoegen voor de elementen met printversie:

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

De sectie grijpen

We gaan nu het gedeelte pakken en in een variabele plaatsen. We gaan dit zetten nadat we de klasse hebben toegevoegd, maar voordat we deze verwijderen, zodat de versie in de variabele met de toegevoegde klasse is. We halen de HTML in de kop om de stylinginformatie te krijgen en deze samen te voegen met de HTML van de sectie. Met 'dit' kunnen we alleen het gedeelte selecteren waarop is geklikt in plaats van alle segmenten. Dan gaan we naar niveaus vanaf de printknop en pakken dat.

 $ (document) .ready (function () $ ('. printControl'). klik (functie () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ ('. printSection '). children (). removeClass (' printversion ');););

Het venster openen

We moeten de variabele nu ergens neerzetten. Maar eerst moeten we een nieuw venster openen. Deze regels zijn niet erg belangrijk en zijn gewoon JavaScript - geen jQuery in deze stap. Kortom, we openen een venster, wijzen een unieke naam toe en geven het enkele basisparameters.

 $ (document) .ready (function () $ ('. printControl'). klik (functie () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ ('. printSection '). children (). removeClass (' printversion '); var windowUrl =' about: leeg '; var uniqueName = new Date (); var windowName =' PrintSection '+ uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName,' left = 500, top = 000, width = 600, height = 1000 ');););

Vul het venster

We moeten nu het venster vullen met wat we eerder hebben gegrepen. We schrijven gewoon naar het venster de waarde van de variabele.

 $ (document) .ready (function () $ ('. printControl'). klik (functie () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ ('. printSection '). children (). removeClass (' printversion '); var windowUrl =' about: leeg '; var uniqueName = new Date (); var windowName =' PrintSection '+ uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName,' left = 500, top = 000, width = 600, height = 1000 '); printWindow.document.write (printContent);););

Afdrukken en sluiten

We moeten nog een paar regels toevoegen voordat we klaar zijn. Eerst moeten we het venster scherpstellen en vervolgens het afdrukdialoogvenster openen. Daarna sluiten we het venster nadat het dialoogvenster is gesloten.

 $ (document) .ready (function () $ ('. printControl'). klik (functie () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ ('. printSection '). children (). removeClass (' printversion '); var windowUrl =' about: leeg '; var uniqueName = new Date (); 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 ();););

Dat is het. We zouden nu een functionele printknop moeten hebben na elk artikel. Goed gedaan, maar we zijn nog niet klaar. Nu moeten we de e-mailknop goed laten werken.

Wat moeten we bereiken bij het e-mailen?

• voeg een luisteraar toe om te wachten tot op een .printControl of .emailControl wordt geklikt.
• We hebben het e-mailadres nodig waarnaar ze het verzenden.
• We hebben hun naam nodig.
• We hebben hun e-mail nodig.
• We hebben een kort bericht nodig om mee te sturen.
• zet al deze info in variabelen door het gebruik van prompts.
• verander het uiterlijk van de sectie om e-mailvriendelijk te zijn
• We hebben de URL van de pagina nodig, inclusief een ankertag om direct naar het artikel over te slaan.
• zet al deze informatie in één variabele.
• zet dit in een nieuw venster.

Dingen die we al hebben gedaan bij het afdrukken

Het is niet nodig om al deze stappen opnieuw te bespreken. We kunnen degene overslaan die we hebben afgedekt met afdrukken:

 $ (document) .ready (function () $ ('. emailControl'). klik (functie () $ ('. printSection'). children (). addClass ('printversion'); $ ('. printSection' ) .children (). removeClass ('printversion'); var windowUrl = 'about: blank'; var uniqueName = new Date (); 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 ();););

Informatie verkrijgen

Voor dit voorbeeld hebben we niets speciaals nodig om de vereiste informatie op te halen. We gaan nu enkele aanwijzingen oproepen die de informatie in variabelen opslaan.

 $ (document) .ready (function () $ ('. emailControl'). klik (functie () var sendTo = prompt ('Typ hiernaar waarheen u dit wilt verzenden'); var fromWho = prompt (' En wat is uw naam? '); Var fromWhoEmail = prompt (' En wat is uw e-mailadres? '); Var fromMessage = prompt (' Heeft u een bericht? '); $ ('. PrintSection '). Children () .addClass ('printversion'); $ ('. printSection'). children (). removeClass ('printversion'); var windowUrl = 'about: blank'; var uniqueName = new Date (); 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 ();););

De URL en ankertag krijgen

Nu moeten we de huidige URL en het artikelnummer (via de ankertag) opslaan in variabelen. We zullen ze later combineren.

 $ (document) .ready (function () $ ('. emailControl'). klik (functie () var sendTo = prompt ('Typ hiernaar waarheen u dit wilt verzenden'); var fromWho = prompt (' En wat is uw naam? '); Var fromWhoEmail = prompt (' En wat is uw e-mailadres? '); Var fromMessage = prompt (' Heeft u een bericht? '); $ ('. PrintSection '). Children () .addClass ('printversion'); var emailID = $ (this) .parent (). parent (). find ('a'). attr ('name'); var currentURL = window.location.href; $ (' .printSection '). children (). removeClass (' printversion '); var windowUrl =' about: blank '; var uniqueName = new Date (); var windowName =' emailSection '+ uniqueName.getTime (); var emailWindow = venster .open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus (););) ;

Alles samenbrengen

Eerst combineren we de URL met de ankertag en plaatsen deze in een mooie reeks tekst. Vervolgens combineren we dat met al het andere dat we nodig hebben in een variabele met de naam emailContent.

 $ (document) .ready (function () $ ('. emailControl'). klik (functie () var sendTo = prompt ('Typ hiernaar waarheen u dit wilt verzenden'); var fromWho = prompt (' En wat is uw naam? '); Var fromWhoEmail = prompt (' En wat is uw e-mailadres? '); Var fromMessage = prompt (' Heeft u een bericht? '); $ ('. PrintSection '). Children () .addClass ('printversion'); var emailID = $ (this) .parent (). parent (). find ('a'). attr ('name'); var currentURL = window.location.href; var emailLink = "
Bron: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + '
Naar:'+ sendTo +'
'+'
Van naam):'+ fromWho +'
'+'
Van email):'+ fromWhoEmail +'
'+'
Bericht:'+ fromMessage +'
'+ emailLink +'
'+ $ (this) .parent (). parent (). html (); $ ( 'PrintSection. ') Kinderen () removeClass (' printversie')..; var windowUrl = 'about: blank'; var uniqueName = new Date (); 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 (); ); );

Afgewerkte code

 $ (document) .ready (function () $ ('. printControl'). klik (functie () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ ('. printSection '). children (). removeClass (' printversion '); var windowUrl =' about: leeg '; var uniqueName = new Date (); 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 '). klik (functie () var sendTo = prompt ('Typ hiernaar waarheen u dit wilt verzenden'); var fromWho = prompt ('En wat is uw naam?'; var fromWhoEmail = prompt ('En wat is uw Email? '; Var fromMessage = prompt (' Heeft u een bericht? '; $ ('. PrintSection '). Children (). AddClass (' printversion '); var emailID = $ (this) .parent () .parent (). find ('a'). attr ('naam'); var currentURL = window.location.href; var emailLink = "
Bron: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + '
Naar:'+ sendTo +'
'+'
Van naam):'+ fromWho +'
'+'
Van email):'+ fromWhoEmail +'
'+'
Bericht:'+ fromMessage +'
'+ emailLink +'
'+ $ (this) .parent (). parent (). html (); $ ( 'PrintSection. ') Kinderen () removeClass (' printversie')..; var windowUrl = 'about: blank'; var uniqueName = new Date (); 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 (); ); );

Werden gedaan

We hebben nu een automatische manier om gedeelten van een website af te drukken en te e-mailen die minder wordt als JavaScript is uitgeschakeld. Goed gedaan! Als je deze tutorial leuk vond, blijf dan op de hoogte; in een toekomstige zelfstudie bespreken we hoe u dit in een jQuery-plug-in kunt veranderen. Ondertussen, als u vragen of opmerkingen heeft, zorg er dan voor dat u ze hieronder laat. Ik hoor graag van je!