Scopri come creare articoli per la stampa e l'email

Durante la progettazione di siti Web, una caratteristica comunemente desiderata è la possibilità di stampare o inviare in modo dinamico qualsiasi sezione di una pagina Web. Sfortunatamente, questa idea viene solitamente scartata più avanti nel progetto a causa della mancanza di tempo o conoscenza. La formattazione del testo per la stampa è più difficile di quanto possa sembrare inizialmente. Oggi utilizzeremo JavaScript per cercare automaticamente determinati elementi della pagina e formattarli correttamente per una stampa.

obiettivi:

Alla fine di questo tutorial, avremo realizzato quanto segue:

• Utilizzare jQuery per stampare o inviare via email qualsiasi sezione di una pagina automaticamente quando si fa clic su un determinato elemento.
• Formatta e modifica lo stile per ottimizzare la stampa o la posta elettronica.
• Aggiungere variabili alla versione e-mail (To, From, Message, ecc.)

La pagina

Cosa c'è di sbagliato in questo?

Wow ... quella pagina è colorata. Sono d'accordo - non è la più grande combinazione di colori al mondo. Questo design non è stato sicuramente progettato per la stampa. Sebbene lo sfondo blu non venga stampato sulla maggior parte delle stampanti, la stampante lo farà scomparire. Ciò incasinerà il resto del design anche se ora il testo arancione e verde si stamperà su uno sfondo bianco. Non c'è un modo semplice per un utente di stampare un bel articolo formattato in bianco e nero da questa pagina, a meno di copiarlo in un word processor e formattarlo da solo.

Mantenere il design, risolvere il problema

Una soluzione potrebbe essere quella di fornire un foglio di stile di stampa, come ha fatto Tuts +. Questo funzionerebbe se ci fosse solo un articolo su una pagina. Sfortunatamente, questo esempio è in formato blog. Ciò significa che ci sono diversi articoli su una pagina; e le probabilità sono che l'utente voglia solo stampare un articolo. Utilizzeremo jQuery per consentire all'utente di fare clic su un collegamento dopo ogni articolo che formatta l'articolo e consente di stamparlo o inviarlo via email.

HTML per questa pagina

L'HTML è piuttosto semplice per questa pagina. Aggiungeremo un paio di classi standard: una per indicare una sezione da stampare / inviare via email (.printSection), una per indicare l'area che contiene i collegamenti da stampare o e-mail (.printControls), una classe per tutti i collegamenti di stampa ( .printControl) e una classe per tutti i collegamenti e-mail (.emailControl). Nota come abbiamo anche collegato il file minificato di Google. Questo ci permette di usare jQuery in seguito.

        
 
  
Questa è una rubrica

  
Articolo Testo
 
Sezione di stampa
 | 
Sezione Email 
 
  
Questa è un'intestazione diversa
Articolo Testo
 
Altro testo di testo
 
Sezione di stampa
 | 
Sezione Email 
 
  
Questa è un'altra intestazione
Articolo Testo
 
Altro testo di testo
 
Sezione di stampa
 | 
Sezione Email 
 
  
Questo è di nuovo un titolo
Articolo Testo
 
Altro testo di testo
 
Sezione di stampa
 | 
Sezione Email 
 
   

Il CSS

Anche il CSS è piuttosto semplice.

 body text-align: center; famiglia di font: Tahoma, Arial, Helvetica, Sans Serif;  h2 color: # d98841; font-size: 48px; imbottitura: 0px; margine: 0px; font-weight: normal;  .page-wrap margin-left: auto; margin-right: auto; larghezza: 550 px; sfondo: # 10222b; imbottitura: 15px; allineamento del testo: a sinistra;  .printSection p color: # bdd684; font-size: 12px; allineamento del testo: giustificare;  p.printControl, p.emailControl, .printControls display: inline; colore: # f2ece4;  p.printControl, p.emailControl cursor: pointer;  img margin-left: 35px; 

Aggiungiamo anche un po 'di CSS per aumentare l'usabilità. Nel caso in cui Javascript sia disabilitato, non vogliamo collegamenti morti, quindi nascondiamo i collegamenti:

Script Time

Cosa vogliamo ottenere quando stampiamo?

• aggiungere un listener per attendere che venga premuto un .printControl o .emailControl.
• modificare l'aspetto della sezione per essere stampante amichevole
• prendi le parti della pagina che vogliamo stampare
• apri una finestra e tagliala.
• metti le parti della pagina che abbiamo afferrato nella finestra
• apri la finestra di dialogo di stampa
• chiudi la finestra dopo aver finito di stampare

Come stiamo andando a realizzare queste cose?

Aggiungi l'ascoltatore:

Inseriamo il listener di stampa nella funzione di lettura DOM:

 $ (document) .ready (function () $ ('. printControl'). click (function () // Qui inseriremo il codice di stampa););

Cambia l'aspetto

Abbiamo bisogno di cambiare i colori dallo schema colorato, al bianco e nero. Ci sono diversi modi in cui possiamo portare a termine questo compito. Il metodo che useremo è di aggiungere temporaneamente una classe alla sezione interessata, prendere il codice da stampare e quindi rimuovere immediatamente la classe. Aggiungiamo la classe usando il selettore CSS di jQuery per selezionare i div e quindi aggiungiamo una classe a tutti gli elementi all'interno del comando children ().

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

Dobbiamo anche aggiungere un po 'di stile per gli elementi con printversion:

 h2.printversion, p.printversion color: # 333333; allineamento del testo: a sinistra;  .printControls.printversion display: none;  

Afferrando la sezione

Ora andiamo ad afferrare la sezione e inserirla in una variabile. Lo inseriremo dopo aver aggiunto la classe ma prima di rimuoverla, in modo che la versione nella variabile sia con la classe aggiunta. Prendiamo l'HTML in testa per ottenere le informazioni sullo stile e concatenarlo con l'HTML della sezione. Il "questo" ci consente di selezionare solo la sezione su cui è stato fatto clic anziché su tutti. Poi saliamo ai livelli dal pulsante di stampa e lo prendiamo.

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

Aprire la finestra

Ora dobbiamo mettere la variabile da qualche parte. Ma prima, dobbiamo aprire una nuova finestra. Queste linee non sono molto importanti e sono semplicemente JavaScript - nessuna jQuery in questo passaggio. Fondamentalmente, apriamo una finestra, assegniamo un nome univoco e diamo alcuni parametri di base.

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

Riempi la finestra

Ora dobbiamo riempire la finestra con ciò che abbiamo afferrato prima. In pratica scriviamo semplicemente alla finestra il valore della variabile.

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

Stampa e chiudi

Abbiamo bisogno di aggiungere altre righe prima di aver finito. Per prima cosa, dobbiamo focalizzare la finestra e quindi aprire la finestra di dialogo di stampa. Quindi chiudiamo la finestra dopo che la finestra di dialogo è stata chiusa.

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

Questo è tutto. Ora dovremmo avere un pulsante di stampa funzionale dopo ogni articolo. Bel lavoro, ma non abbiamo ancora finito. Ora dobbiamo fare in modo che il pulsante email funzioni correttamente.

Cosa dobbiamo realizzare quando invii email?

• aggiungere un listener per attendere che venga premuto un .printControl o .emailControl.
• Abbiamo bisogno dell'indirizzo email a cui lo stanno inviando.
• Abbiamo bisogno del loro nome.
• Abbiamo bisogno della loro email.
• Abbiamo bisogno di un breve messaggio da inviare.
• metti tutte queste informazioni in variabili attraverso l'uso di prompt.
• cambia l'aspetto della sezione per essere amichevole con la posta elettronica
• Abbiamo bisogno dell'URL della pagina, incluso un tag di ancoraggio per saltare direttamente all'articolo.
• metti tutte queste informazioni in una variabile.
• metti questo in una nuova finestra.

Cose che abbiamo già fatto durante la stampa

Non è necessario rivedere tutti questi passaggi. Possiamo saltare quelli che abbiamo coperto con la stampa:

 $ (document) .ready (function () $ ('. emailControl'). click (function () $ ('. 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 ();););

Ottenere le informazioni

Per questo esempio, non abbiamo bisogno di nulla di particolare per il recupero delle informazioni richieste. Stiamo solo andando a sollevare diversi prompt che memorizzano le informazioni in variabili.

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = prompt ('Si prega di digitare a chi si desidera inviare questo a'); var fromWho = prompt (' E qual è il tuo nome? '); Var fromWhoEmail = prompt (' E qual è il tuo indirizzo email? '); Var fromMessage = prompt (' Hai un messaggio? '); $ ('. 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 ();););

Ottenere l'URL e il tag di ancoraggio

Ora, abbiamo bisogno di memorizzare l'URL corrente e il numero dell'articolo (tramite il tag di ancoraggio) nelle variabili. Li combineremo in seguito.

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = prompt ('Si prega di digitare a chi si desidera inviare questo a'); var fromWho = prompt (' E qual è il tuo nome? '); Var fromWhoEmail = prompt (' E qual è il tuo indirizzo email? '); Var fromMessage = prompt (' Hai un messaggio? '); $ ('. 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 = window .open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus (););) ;

Mettendo tutto insieme

Per prima cosa combiniamo l'URL insieme al tag di ancoraggio e lo inseriamo in una bella stringa di testo. Quindi lo combiniamo con tutto il resto di cui abbiamo bisogno in una variabile chiamata emailContent.

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = prompt ('Si prega di digitare a chi si desidera inviare questo a'); var fromWho = prompt (' E qual è il tuo nome? '); Var fromWhoEmail = prompt (' E qual è il tuo indirizzo email? '); Var fromMessage = prompt (' Hai un messaggio? '); $ ('. PrintSection '). Children () .addClass ('printversion'); var emailID = $ (this) .parent (). parent (). find ('a'). attr ('name'); var currentURL = window.location.href; var emailLink = "
Fonte: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + '
A:'+ sendTo +'
'+'
Dal nome):'+ fromWho +'
'+'
Dall'email):'+ daWhoEmail +'
'+'
Messaggio:'+ fromMessage +'
'+ emailLink +'
'+ $ (this) .parent (). parent (). html (); $ ( 'PrintSection. ') I bambini () removeClass (' versione print')..; 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 (); ); );

Codice finito

 $ (document) .ready (function () $ ('. printControl'). click (function () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ ('. printSection '). children (). removeClass (' printversion '); var windowUrl =' about: 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 '). click (function () var sendTo = prompt ('Si prega di digitare chi si desidera inviare questo a'); var fromWho = prompt ('E qual è il tuo nome?'); var fromWhoEmail = prompt ('E qual è il tuo Email? '); Var fromMessage = prompt (' Hai un messaggio? '); $ ('. PrintSection '). Children (). AddClass (' printversion '); var emailID = $ (this) .parent () .parent (). find ('a'). attr ('name'); var currentURL = window.location.href; var emailLink = "
Fonte: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + '
A:'+ sendTo +'
'+'
Dal nome):'+ fromWho +'
'+'
Dall'email):'+ daWhoEmail +'
'+'
Messaggio:'+ fromMessage +'
'+ emailLink +'
'+ $ (this) .parent (). parent (). html (); $ ( 'PrintSection. ') I bambini () removeClass (' versione print')..; 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 (); ); );

Sono stati fatti

Ora abbiamo un modo automatico per stampare e inviare via email le sezioni di un sito web che si degradano quando JavaScript è disabilitato. Buon lavoro! Se ti è piaciuto questo tutorial, resta sintonizzato; in un futuro tutorial, vedremo come trasformarlo in un plugin jQuery. Nel frattempo, se hai domande o commenti, assicurati di lasciarli qui sotto. Mi piacerebbe sentirti!