Lær hvordan du stiler artikler for utskrift og e-post

Ved utforming av nettsteder er en vanlig ønsket funksjon evnen til å skrive ut eller e-poste en hvilken som helst del av en nettside. Dessverre blir denne ideen vanligvis slettet senere i prosjektet på grunn av mangel på tid eller kunnskap. Formatering av teksten for utskrift er vanskeligere enn det som i utgangspunktet kan virke. I dag bruker vi JavaScript for automatisk å søke etter bestemte sideelementer og formatere dem riktig for utskrift.

Mål:

På slutten av denne opplæringen har vi oppnådd følgende:

Bruk jQuery til å skrive ut eller sende en epost til en side automatisk når et bestemt element klikkes.
Formater og endre stilen for å optimalisere for utskrift eller e-post.
Legg til variabler i e-postversjonen (Til, Fra, Melding, etc.)

Siden

Hva er galt med dette?

Wow ... den siden er fargerik. Jeg er enig - det er ikke det største fargeskjemaet i verden. Denne designen var definitivt ikke laget for utskrift. Selv om bakgrunnsblå ikke vil skrive ut på de fleste skrivere, vil skriveren bare gjøre det forsvinne. Dette vil ødelegge resten av designet, men fordi den lyse oransje og grønne teksten vil skrives ut på en hvit bakgrunn. Det er ingen enkel måte for en bruker å skrive ut en fin svart og hvit formatert artikkel fra denne siden, kort for å kopiere den til et tekstbehandlingsprogram og formatere det selv.

Hold design, fikse problemet

En løsning kan være å gi et utskriftsformatark, som Tuts + har gjort. Dette ville fungere hvis det bare var en artikkel på en side. Dessverre er dette eksemplet i bloggformat. Dette betyr at det finnes flere artikler på en side; og sjansen er at brukeren bare vil skrive ut en artikkel. Vi skal bruke jQuery for å tillate brukeren å klikke på en kobling etter hver artikkel som formaterer artikkelen og tillater dem å skrive ut eller e-poste det.

HTML for denne siden

HTML er ganske enkelt for denne siden. Vi legger til et par standardklasser: En for å signere en seksjon som skal skrives ut / mailes (.printSection), en for å angi området som inneholder koblingene til utskrift eller e-post (.printControls), en klasse for alle utskriftskoblinger ( .printControl), og en klasse for alle e-postkoblinger (.emailControl). Legg merke til hvordan vi også koblet til Googles minifiserte fil. Dette tillater oss å bruke jQuery senere.

    Skriv ut | E-post jQuery-plugin       Dette er et overskrift

  Artikkel Tekst
 Utskriftseksjon
 | E-post seksjon 
   Dette er et annet overskrift
Artikkel Tekst
 Mer Artikkel Tekst
 Utskriftseksjon
 | E-post seksjon 
   Dette er et annet overskrift
Artikkel Tekst
 Mer Artikkel Tekst
 Utskriftseksjon
 | E-post seksjon 
   Dette er et overskrift igjen
Artikkel Tekst
 Mer Artikkel Tekst
 Utskriftseksjon
 | E-post seksjon

CSS

CSS er ganske enkelt også.

 kropp text-align: center; font-familie: Tahoma, Arial, Helvetica, Sans Serif;  h2 farge: # d98841; skriftstørrelse: 48px; polstring: 0px; margin: 0px; font-weight: normal;  .page-wrap margin-left: auto; margin-høyre: auto; bredde: 550px; bakgrunn: # 10222b; polstring: 15px; tekstjustering: venstre;  .printSection p color: # bdd684; skriftstørrelse: 12px; tekstjustering: rettferdiggjøre;  p.printControl, p.emailControl, .printControls display: inline; farge: # f2ece4;  p.printControl, p.emailControl cursor: pointer;  img margin-left: 35px;

Vi vil også legge til litt CSS for å øke brukervennligheten. Hvis Javascript er deaktivert, vil vi ikke ha døde koblinger - så vi skjuler koblingene:

Skript tid

Hva vil vi oppnå når du skriver ut?

legg til en lytter for å vente på en .printControl eller .emailControl som skal klikkes.
endre utseendet til seksjonen for å være skrivervennlig
Ta tak i deler av siden som vi vil skrive ut
åpne et vindu og størrelse det.
sett delene av siden som vi grep inn i vinduet
åpne dialogboksen for utskrift
lukk vinduet etter ferdig utskrift

Hvordan skal vi nå disse tingene?

Legg til lytteren:

Vi legger ut høreren i DOM-lesingsfunksjonen:

 $ (dokument) .ready (funksjon () $ ('. printControl'). klikk (funksjon () // Her setter vi utskriftskoden););

Endre utseende

Vi må endre fargene fra den fargerike ordningen til svart og hvitt. Det er flere måter vi kan oppnå denne oppgaven på. Metoden vi skal bruke er å legge en klasse midlertidig til den berørte delen, ta koden som skal skrives ut, og fjern deretter klassen umiddelbart igjen. Vi legger til klassen ved å bruke jQuery's CSS selector for å velge divs, og deretter legge til en klasse for alle elementene inne med kommandoen barn ().

 $ ('printSection'). barn (). addClass ('printversion'); $ ('. printSection' ) .children (). removeClass ('printversion');););

Vi må også legge til litt mer styling for elementene med utskriftsversjon:

 h2.printversion, p.printversion farge: # 333333; tekstjustering: venstre;  .printControls.printversion display: none;

Griper avsnittet

Vi skal nå ta tak i delen og sette den i en variabel. Vi legger til dette etter at vi legger til klassen, men før vi fjerner den, slik at versjonen i variabelen er med den ekstra klassen. Vi tar tak i HTML i hodet for å få styling info og sammenkoble den med seksjonens HTML. Med "dette" kan vi bare velge delen som ble klikket i stedet for alle dem. Så går vi opp til nivåer fra utskriftsknappen og griper det.

 $ (dokument) .ready (funksjon () $ ('. printControl'). klikk (funksjon () $ ('. printSection'). barn (). addClass ('printversion'); var printContent = $ hode '). html () + $ (dette) .parent () .forelder () .html (); $ (' .SpringSeksjon '). barn (). removeClass (' printversion ');););

Åpner vinduet

Vi må nå sette variabelen et sted. Men først må vi åpne et nytt vindu. Disse linjene er ikke veldig viktige, og er bare enkle JavaScript - nei jQuery i dette trinnet. I utgangspunktet åpner vi et vindu, tilordner et unikt navn, og gir det noen grunnleggende parametere.

 $ (dokument) .ready (funksjon () $ ('. printControl'). klikk (funksjon () $ ('. printSection'). barn (). addClass ('printversion'); var printContent = $ head ()). html () + $ (dette) .parent (). foreldre (). html (); $ ('. printSection'). barn (). removeClass ('printversion'); var windowUrl = 'om: blank '; var uniqueName = new Date (); var windowName =' PrintSection '+ uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName,' left = 500, top = 000, width = 600, height = 1000 ');););

Fyll vinduet

Vi må nå fylle vinduet med det vi grep tidligere. Vi skriver i utgangspunktet bare til variabelenes verdi.

 $ (dokument) .ready (funksjon () $ ('. printControl'). klikk (funksjon () $ ('. printSection'). barn (). addClass ('printversion'); var printContent = $ head ()). html () + $ (dette) .parent (). foreldre (). html (); $ ('. printSection'). barn (). removeClass ('printversion'); var windowUrl = 'om: blank '; 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);););

Skriv ut og lukk

Vi må legge til noen flere linjer før vi er ferdige. Først må vi fokusere på vinduet og åpne dialogboksen for utskrift. Så lukker vi vinduet etter at dialogboksen er stengt.

 $ (dokument) .ready (funksjon () $ ('. printControl'). klikk (funksjon () $ ('. printSection'). barn (). addClass ('printversion'); var printContent = $ head ()). html () + $ (dette) .parent (). foreldre (). html (); $ ('. printSection'). barn (). removeClass ('printversion'); var windowUrl = 'om: blank '; 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 ();););

Det er det. Vi burde nå ha en funksjonell utskriftsknapp etter hver artikkel. God jobb, men vi er ikke ferdige ennå. Nå må vi gjøre e-postknappen funksjonen riktig.

Hva må vi oppnå når vi sender e-post?

legg til en lytter for å vente på en .printControl eller .emailControl som skal klikkes.
Vi trenger e-postadressen de sender den til.
Vi trenger navnet deres.
Vi trenger e-posten deres.
Vi trenger en kort melding som skal sendes med.
Sett all denne informasjonen inn i variabler ved hjelp av instruksjoner.
endre utseendet til seksjonen for å være e-postvennlig
Vi trenger nettadressen til siden, inkludert en ankermerke for å hoppe over til høyre for artikkelen.
Sett all denne informasjonen inn i en variabel.
sett dette inn i et nytt vindu.

Ting vi allerede har gjort når du skriver ut

Det er ikke nødvendig å gå over alle disse trinnene igjen. Vi kan hoppe over de som vi dekket med utskrift:

 $ (dokument) .ready (funksjon () $ ('. emailControl'). klikk (funksjon () $ ('. printSection'). barn (). addClass ('printversion'); $ ) .children (). removeClass ('printversion'); var windowUrl = 'om: blank'; var uniqueName = ny dato (); 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å informasjonen

For dette eksempelet trenger vi ikke noe fancy for å hente den nødvendige informasjonen. Vi skal bare heve flere anledninger som lagrer informasjonen i variabler.

 $ (dokument) .ready (funksjon () $ ('. emailControl'). klikk (funksjon ) var sendTo = prompt ('Vennligst skriv hvem du vil sende dette til'); var fromWho = prompt Og hva er ditt navn? '); Var fromWhoEmail = prompt (' Og hva er din e-post? '); Var fromMessage = prompt (' Har du en melding? '); $ ('. PrintSection '). .addClass ('printversjon'); $ ('. printSection'). barn (). removeClass ('printversion'); var windowUrl = 'om: blank'; var uniqueName = ny dato (); 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å URL og Anchor Tag

Nå må vi lagre det nåværende nettadressen og artikkelnummeret (via ankerkoden) i variabler. Vi vil kombinere dem senere.

 $ (dokument) .ready (funksjon () $ ('. emailControl'). klikk (funksjon ) var sendTo = prompt ('Vennligst skriv hvem du vil sende dette til'); var fromWho = prompt Og hva er ditt navn? '); Var fromWhoEmail = prompt (' Og hva er din e-post? '); Var fromMessage = prompt (' Har du en melding? '); $ ('. PrintSection '). .addClass ('printversion'); var emailID = $ (dette) .parent () .forelder (). finn ('a'). attr ('navn'); var currentURL = window.location.href; $ .printSection '). children (). removeClass (' printversion '); var windowUrl =' om: blank '; var uniqueName = ny dato (); var windowName =' emailSection '+ uniqueName.getTime (); var emailWindow = vindu .open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus (););) ;

Setter alt sammen

Først kombinerer vi nettadressen sammen med ankeretiketten og legger den inn i en fin tekststreng. Da kombinerer vi det med alt annet vi trenger i en variabel som kalles emailContent.

 $ (dokument) .ready (funksjon () $ ('. emailControl'). klikk (funksjon ) var sendTo = prompt ('Vennligst skriv hvem du vil sende dette til'); var fromWho = prompt Og hva er ditt navn? '); Var fromWhoEmail = prompt (' Og hva er din e-post? '); Var fromMessage = prompt (' Har du en melding? '); $ ('. PrintSection '). .addClass ('printversion'); var emailID = $ (dette) .parent () .forelder (). finn ('a'). attr ('navn'); var currentURL = window.location.href; var emailLink = "Kilde: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + 'Til:'+ sendTo +'
'+'Fra navn):'+ fra hvem +'
'+'Fra (e-post):'+ fromWhoEmail +'
'+'Budskap:'+ fromMessage +'
'+ emailLink +'
'+ $ (dette) .parent () .forelder (). html (); $ ( 'PrintSection. ') Barn () removeClass (' Printversion')..; var windowUrl = 'about: blank'; var uniqueName = nytt dato (); 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 (); ); );

Ferdig kode

 $ (dokument) .ready (funksjon () $ ('. printControl'). klikk (funksjon () $ ('. printSection'). barn (). addClass ('printversion'); var printContent = $ head ()). html () + $ (dette) .parent (). foreldre (). html (); $ ('. printSection'). barn (). removeClass ('printversion'); var windowUrl = 'om: blank '; 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 '). klikk (funksjon () var sendTo = prompt ('Vennligst skriv hvem du vil sende dette til'); var fromWho = prompt ('Og hva er navnet ditt?'); var fromWhoEmail = prompt ('Og hva er ditt E-post? '); Var fromMessage = prompt (' Har du en melding? '); $ ('. PrintSection '). Barn (). AddClass (' utskriftsversjon '); var emailID = $ (dette) .parent .parent (). finn ('a'). attr ('navn'); var currentURL = window.location.href; var emailLink = "Kilde: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + 'Til:'+ sendTo +'
'+'Fra navn):'+ fra hvem +'
'+'Fra (e-post):'+ fromWhoEmail +'
'+'Budskap:'+ fromMessage +'
'+ emailLink +'
'+ $ (dette) .parent () .forelder (). html (); $ ( 'PrintSection. ') Barn () removeClass (' Printversion')..; var windowUrl = 'about: blank'; var uniqueName = nytt dato (); 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 (); ); );

Vi er ferdige

Vi har nå en automatisk måte å skrive ut og sende på deler av et nettsted som nedbrytes når JavaScript er deaktivert. Godt jobbet! Hvis du likte denne opplæringen, hold deg innstilt; I en fremtidig opplæring, vil vi dekke hvordan du gjør dette til en jQuery-plugin. I mellomtiden, hvis du har noen spørsmål eller kommentarer, sørg for å la dem være under. Jeg vil gjerne høre fra deg!

Kode