Aflați cum să creați articole pentru imprimare și e-mail

La proiectarea site-urilor web, o caracteristică dorită în mod obișnuit este abilitatea de a imprima sau trimite prin e-mail orice secțiune a unei pagini web. Din păcate, această idee este, de obicei, dezmembrată mai târziu în proiect din cauza lipsei de timp sau de cunoaștere. Formatarea textului pentru imprimare este mai dificilă decât ar părea inițial. Astăzi, vom folosi JavaScript pentru a căuta în mod automat anumite elemente de pagină și pentru a le formata corect pentru imprimare.

Obiective:

La sfârșitul acestui tutorial, vom fi realizat următoarele:

• Utilizați jQuery pentru a imprima sau a trimite automat prin e-mail orice secțiune a unei pagini când se face clic pe un anumit element.
• Formatați și schimbați stilul pentru a optimiza pentru imprimare sau e-mail.
• Adăugați variabile la versiunea de e-mail (To, From, Message, etc.)

Pagina

Ce e rău cu asta?

Wow ... pagina este colorată. Sunt de acord - nu este cea mai mare schemă de culori din lume. Acest design nu a fost conceput pentru imprimare. Deși albastrul de fundal nu va fi imprimat pe majoritatea imprimantelor, imprimanta va face să dispară. Acest lucru va sparge restul de design, deși pentru că acum luminos portocaliu și verde textul va imprima pe un fundal alb. Nu există o modalitate ușoară ca un utilizator să tipărească un articol frumos formatat alb-negru de pe această pagină, fără să îl copieze într-un procesor de text și să îl formateze.

Păstrați designul, rezolvați problema

O soluție ar putea fi furnizarea unei foi de stil imprimate, așa cum a făcut Tuts +. Acest lucru ar funcționa dacă ar exista un singur articol pe o pagină. Din păcate, acest exemplu este în format de blog. Acest lucru înseamnă că există mai multe articole pe o pagină; și sunt șanse ca utilizatorul să vrea doar să imprime un articol. Vom folosi jQuery pentru a permite utilizatorului să facă clic pe un link după fiecare articol care formatează articolul și îi permite să-l imprime sau să-l trimită prin e-mail.

HTML pentru această pagină

HTML-ul este destul de simplu pentru această pagină. Vom adăuga câteva clase standard: Unu pentru a semnifica o secțiune care va fi tipărită / trimisă prin e-mail (.printSection), una pentru a semnifica zona care conține linkurile de tipărire sau e-mail (.printControls), o clasă pentru toate legăturile tipărite .printControl) și o clasă pentru toate linkurile de e-mail (.emailControl). Observați cum am și legat fișierul miniaturat Google. Acest lucru ne permite să folosim mai târziu jQuery.

        
 
  
Acesta este un titlu

  
Textul articolului
 
Imprimare secțiune
 | 
Secțiunea de e-mail 
 
  
Acesta este un titlu diferit
Textul articolului
 
Mai mult text articol
 
Imprimare secțiune
 | 
Secțiunea de e-mail 
 
  
Acesta este un alt titlu
Textul articolului
 
Mai mult text articol
 
Imprimare secțiune
 | 
Secțiunea de e-mail 
 
  
Acesta este un capitol din nou
Textul articolului
 
Mai mult text articol
 
Imprimare secțiune
 | 
Secțiunea de e-mail 
 
   

CSS

CSS este destul de simplu.

 corp text-aliniere: centru; font-familie: Tahoma, Arial, Helvetica, Sans Serif;  h2 culoare: # d98841; font-size: 48px; padding: 0px; margine: 0px; font-weight: normal;  .page-wrap margin-stânga: auto; margin-dreapta: auto; lățime: 550 px; fundal: # 10222b; padding: 15px; text-aliniere: stânga;  .printSecție p culoare: # bdd684; font-size: 12px; text-align: justify;  p.printControl, p.emailControl, .printControls afișare: inline; culoare: # f2ece4;  p.printControl, p.emailControl cursor: pointer;  img margine-stânga: 35px; 

De asemenea, vom adăuga un pic de CSS pentru a crește gradul de utilizare. În cazul în care Javascript este dezactivat, nu vrem link-uri moarte - așa că ascundem linkurile:

Script Time

Ce dorim să realizăm la imprimare?

• adăugați un ascultător să aștepte un clic pe .printControl sau .emailControl.
• modificați aspectul secțiunii pentru a fi prietenos pentru imprimantă
• apuca părțile paginii pe care dorim să le tipărim
• deschideți o fereastră și măriți-o.
• puneți părțile paginii pe care le-am prins în fereastră
• deschideți caseta de dialog pentru imprimare
• închideți fereastra după finalizarea tipăririi

Cum vom realiza aceste lucruri?

Adăugați Listener:

Am pus ascultătorul de imprimare în interiorul funcției de lectură DOM:

 $ (document) .ready (function () $ ('. printControl') click (function () // Aici vom pune codul de imprimare);

Schimbați aspectul

Trebuie să schimbăm culorile de la schema colorată până la alb-negru. Există mai multe moduri în care putem îndeplini această sarcină. Metoda pe care o vom folosi este să adăugăm temporar o clasă la secțiunea afectată, să luăm codul pentru imprimare și apoi să eliminăm din nou clasa din nou. Adăugăm clasa utilizând selectorul CSS al jQuery pentru a selecta divs și apoi adăugați o clasă tuturor elementelor din interior cu comanda children ().

 $ ('. printSection'). $ (('printSection'). () ) .children () removeClass ("printversion");)););

De asemenea, trebuie să adăugăm ceva mai mult stil pentru elementele cu versiune tipărită:

 h2.printversion, p.printversion culoare: # 333333; text-aliniere: stânga;  .printControls.printversion display: none;  

Prinde secțiunea

Acum vom lua secțiunea și o vom pune într-o variabilă. Vom pune acest lucru după ce adăugăm clasa, dar înainte de ao elimina, astfel încât versiunea din variabila să fie cu clasa adăugată. Am apucat HTML-ul în cap pentru a obține informații despre stil și a le concatenate cu secțiunea HTML. "Aceasta" ne permite să selectăm numai secțiunea pe care a fost făcută clic în loc de toate. Apoi mergem la niveluri de la butonul de imprimare și apucăm asta.

 $ (') () () () () () () () () () ("printversion"););); () () () ().

Deschiderea ferestrei

Acum trebuie să punem variabila undeva. Dar mai întâi trebuie să deschidem o fereastră nouă. Aceste linii nu sunt foarte importante și sunt simplu JavaScript - nu jQuery în acest pas. Practic, deschidem o fereastră, atribuim un nume unic și îi dăm niște parametri de bază.

 $ (') () () () () () () () () () ("printversion"); var windowUrl = 'despre: () () () "var =" fereastră "," fereastră "," fereastră, fereastră "," left = 500, top = 000, width = 600, height = 1000 ');););

Umpleți fereastra

Acum trebuie să umplem fereastra cu ceea ce am apucat mai devreme. În principiu doar scriem în fereastră valoarea variabilei.

 $ (') () () () () () () () () () ("printversion"); var windowUrl = 'despre: () () () "var =" fereastră "," fereastră "," fereastră, fereastră "," left = 500, top = 000, width = 600, height = 1000 '); printWindow.document.write (printContent);););

Imprimare și închidere

Trebuie să adăugăm câteva linii înainte să terminăm. În primul rând, trebuie să focalizăm fereastra și să deschidem caseta de dialog pentru imprimare. Apoi închidem fereastra după ce caseta de dialog a fost închisă.

 $ (') () () () () () () () () () ("printversion"); var windowUrl = 'despre: () () () "var =" fereastră "," fereastră "," fereastră, fereastră "," left = 500, top = 000, width = 600, height = 1000 '); printWindow.document.write (printContent); printWindow.document.close (); printWindow.focus (); printWindow.print (); printWindow.close ();););

Asta e. Acum ar trebui să avem un buton de imprimare funcțional după fiecare articol. Bună treabă, dar nu am terminat încă. Acum trebuie să facem funcția corectă a butonului de e-mail.

Ce trebuie să realizăm atunci când trimitem prin e-mail?

• adăugați un ascultător să aștepte un clic pe .printControl sau .emailControl.
• Avem nevoie de adresa de e-mail pe care o trimit.
• Avem nevoie de numele lor.
• Avem nevoie de e-mailul lor.
• Avem nevoie de un mesaj scurt pentru a fi trimis cu.
• puneți toate aceste informații în variabile prin utilizarea instrucțiunilor.
• schimba aspectul secțiunii pentru a fi prietenos prin e-mail
• Avem nevoie de URL-ul paginii, inclusiv de o etichetă de ancorare, pentru a trece direct la articol.
• puneți toate aceste informații într-o singură variabilă.
• puneți asta într-o fereastră nouă.

Lucruri pe care le-am făcut deja la tipărire

Nu este nevoie să treceți din nou peste toți acești pași. Putem sări peste cele pe care le-am acoperit cu imprimarea:

 $ ('. printSection') $ ('. printSection') $ (('printSection'). ) var. fereastrăName = 'emailSection' + uniqueName.getTime (); var emailWindow = window.open () windowUrl, windowName, "left = 500, top = 000, width = 600");

Obținerea informațiilor

Pentru acest exemplu, nu avem nevoie de ceva fantezie pentru a obține informațiile necesare. Vom face doar câteva solicitări care stochează informațiile în variabile.

 $ (document) .ready (functie () $ ('.mailControl') click (function () var sendTo = prompt (' Și care este numele dvs.?); Var dinWhoEmail = prompt ('Și ce este adresa dvs. de e-mail?'); Var dinMessage = prompt ('Aveți un mesaj?'); $ ('PrintSection' "var:" fereastră "=": "blank"; var.addClass ('printversion'); $ ('printSection'); + uniqueName.getTime (); var emailWindow = window.open (windowUrl, windowName, 'left = 500, top = 000, width = 600'), emailWindow.document.write (printContent), emailWindow.document.close (); emailWindow.focus ();););

Obținerea adresei URL și a etichetei de ancorare

Acum, trebuie să stocăm adresa URL curentă și numărul articolului (prin eticheta de ancorare) în variabile. Îi vom combina mai târziu.

 $ (document) .ready (functie () $ ('.mailControl') click (function () var sendTo = prompt (' Și care este numele dvs.?); Var dinWhoEmail = prompt ('Și ce este adresa dvs. de e-mail?'); Var dinMessage = prompt ('Aveți un mesaj?'); $ ('PrintSection' .addClass ('printversion'); var emailID = $ (this) .parent () parent () .arge ('a' . var windowName = 'emailSection' + unicName.getTime (); var emailWindow = fereastră (); removeClass ('printversion'); .open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); ;

Punând totul împreună

Mai întâi combinăm URL-ul împreună cu tag-ul de ancorare și îl punem într-un șir de text frumos. Apoi combinăm asta cu tot ce ne trebuie într-o variabilă numită emailContent.

 $ (document) .ready (functie () $ ('.mailControl') click (function () var sendTo = prompt (' Și care este numele dvs.?); Var dinWhoEmail = prompt ('Și ce este adresa dvs. de e-mail?'); Var dinMessage = prompt ('Aveți un mesaj?'); $ ('PrintSection' .addClass ('printversion'); var emailID = $ (this) .parent () parent () a găsi ('a') .atr ('nume'); var currentURL = window.location.href; "
Sursă: '+ curentURL +' # '+ emailID +'
„; var emailContent = $ ('cap') html () + '
La:'+ sendTo +'
"+"
De la (Nume):"+ de la cine +"
"+"
De la email):"+ dinWhoEmail +"
"+"
Mesaj:"+ din mesajul +"
'+ emailLink +'
'+ $ (acest). părinte () parent (). html (); $ ( 'PrintSection. ') Pentru copii () removeClass (' tipareste')..; var windowUrl = 'despre: gol'; var uniqueName = data nouă (); var fereastrăName = 'emailSection' + uniqueName.getTime (); var emailWindow = fereastra.open (fereastraUrl, fereastrăName, 'stânga = 500, sus = 000, lățimea = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus (); ); );

Cod finalizat

 $ (') () () () () () () () () () ("printversion"); var windowUrl = 'despre: () () () "var =" fereastră "," fereastră "," fereastră, fereastră "," left = 500, top = 000, width = 600, height = 1000 '); printWindow.document.write (printContent); printWindow.document.close (); printWindow.focus (); printWindow.print (); printWindow.close ();); $ (' .mailControl '). faceți clic pe (funcția () var sendTo = prompt ('Vă rugăm să introduceți pe cine doriți să îl trimiteți'); var fromWho = prompt ('Și ce este numele dvs.?') var fromWhoEmail = prompt E-mail?); Var dinMessage = prompt ('Aveți un mesaj?'); $ ('.PriceSection'). (')', '' '' '' '' '' ' window.location.href; var emailLink = "
Sursă: '+ curentURL +' # '+ emailID +'
„; var emailContent = $ ('cap') html () + '
La:'+ sendTo +'
"+"
De la (Nume):"+ de la cine +"
"+"
De la email):"+ dinWhoEmail +"
"+"
Mesaj:"+ din mesajul +"
'+ emailLink +'
'+ $ (acest). părinte () parent (). html (); $ ( 'PrintSection. ') Pentru copii () removeClass (' tipareste')..; var windowUrl = 'despre: gol'; var uniqueName = data nouă (); var fereastrăName = 'emailSection' + uniqueName.getTime (); var emailWindow = fereastra.open (fereastraUrl, fereastrăName, 'stânga = 500, sus = 000, lățimea = 600'); emailWindow.document.write (emailContent); emailWindow.document.close (); emailWindow.focus (); ); );

Au fost efectuate

Acum avem o modalitate automată de imprimare și e-mail a secțiunilor unui site web care se degradează atunci când JavaScript este dezactivat. Bună treabă! Dacă te-ai bucurat de acest tutorial, stați bine reglat; într-un tutorial viitor, vom discuta cum să transformăm acest lucru într-un plugin jQuery. Între timp, dacă aveți întrebări sau comentarii, asigurați-vă că le lăsați mai jos. Mi-ar plăcea să aud de la dvs.!