Accentsconagua

Erfahren Sie, wie Sie Artikel für Print und E-Mail gestalten

Code
Share

Beim Entwerfen von Websites ist eine häufig gewünschte Funktion die Möglichkeit, jeden Bereich einer Webseite dynamisch zu drucken oder per E-Mail zu senden. Leider wird diese Idee aus Zeit- oder Wissensgründen meist später im Projekt verworfen. Das Formatieren des Texts für den Druck ist schwieriger als es zunächst scheint. Heute verwenden wir JavaScript, um automatisch nach bestimmten Seitenelementen zu suchen und diese für den Druck richtig zu formatieren.


Ziele:

Am Ende dieses Tutorials haben wir Folgendes erreicht:

  • Verwenden Sie jQuery, um einen beliebigen Abschnitt einer Seite automatisch zu drucken oder per E-Mail zu senden, wenn Sie auf ein bestimmtes Element klicken.
  • Formatieren und ändern Sie den Stil, um ihn für den Druck oder die E-Mail zu optimieren.
  • Hinzufügen von Variablen zur E-Mail-Version (An, Von, Nachricht usw.)

Die Seite

Was ist daran falsch??

Wow… diese Seite ist bunt. Ich stimme zu - es ist nicht das beste Farbschema der Welt. Dieses Design war definitiv nicht für den Druck gedacht. Obwohl das Hintergrundblau bei den meisten Druckern nicht gedruckt wird, wird es vom Drucker nur verschwinden. Dies wird den Rest des Designs jedoch durcheinander bringen, da nun der helle orangefarbene und grüne Text auf einem weißen Hintergrund gedruckt wird. Es gibt keine einfache Möglichkeit für einen Benutzer, einen schönen schwarz-weiß-formatierten Artikel von dieser Seite auszudrucken. Er muss nicht in ein Textverarbeitungsprogramm kopiert und selbst formatiert werden.

Behalten Sie das Design, beheben Sie das Problem

Eine Lösung könnte darin bestehen, ein Druck-Stylesheet bereitzustellen, wie es Tuts + getan hat. Dies würde funktionieren, wenn sich auf einer Seite nur ein Artikel befindet. Leider ist dieses Beispiel im Blog-Format. Das bedeutet, dass sich auf einer Seite mehrere Artikel befinden. und die Chancen stehen gut, dass der Benutzer nur einen Artikel ausdrucken möchte. Wir werden jQuery verwenden, damit der Benutzer nach jedem Artikel auf einen Link klicken kann, der den Artikel formatiert und ihn drucken oder per E-Mail senden kann.

HTML für diese Seite

Das HTML ist für diese Seite ziemlich einfach. Wir fügen ein paar Standardklassen hinzu: Eine, um einen Abschnitt anzugeben, der gedruckt / per E-Mail gesendet werden soll (.printSection), eine, um den Bereich anzugeben, der die zu druckenden Links oder E-Mails enthält (.printControls), eine Klasse für alle Drucklinks ( .printControl) und eine Klasse für alle E-Mail-Links (.emailControl). Beachten Sie, wie wir auch eine Verknüpfung mit der minimierten Datei von Google hergestellt haben. Dies ermöglicht uns die spätere Verwendung von jQuery. 

    Drucken | JQuery-Plugin per E-Mail senden    
 
  
Dies ist eine Überschrift

  
Artikeltext
 
Abschnitt drucken
 | 
E-Mail-Bereich
 
 
  
Dies ist eine andere Überschrift
Artikeltext
 
Mehr Artikeltext
 
Abschnitt drucken
 | 
E-Mail-Bereich
 
 
  
Dies ist eine andere Überschrift
Artikeltext
 
Mehr Artikeltext
 
Abschnitt drucken
 | 
E-Mail-Bereich
 
 
  
Dies ist wieder eine Überschrift
Artikeltext
 
Mehr Artikeltext
 
Abschnitt drucken
 | 
E-Mail-Bereich

Das CSS

Das CSS ist auch ziemlich einfach.

 body text-align: center; Schriftfamilie: Tahoma, Arial, Helvetica, Sans Serif;  h2 color: # d98841; Schriftgröße: 48px; Polsterung: 0px; Marge: 0px; Schriftgewicht: normal;  .page-wrap margin-left: auto; Rand rechts: auto; Breite: 550px; Hintergrund: # 10222b; Polsterung: 15px; Text ausrichten: links;  .printSection p color: # bdd684; Schriftgröße: 12px; Text ausrichten: begründen;  p.printControl, p.emailControl, .printControls display: inline; Farbe: # f2ece4;  p.printControl, p.emailControl Cursor: Zeiger;  img margin-left: 35px;

Wir werden auch ein wenig CSS hinzufügen, um die Benutzerfreundlichkeit zu erhöhen. Falls Javascript deaktiviert ist, möchten wir keine toten Links - also blenden wir die Links aus:

Skriptzeit

Was wollen wir beim Drucken erreichen??

  • Fügen Sie einen Listener hinzu, um darauf zu warten, dass ein .printControl oder ein .emailControl angeklickt wird.
  • Ändern Sie das Erscheinungsbild des Abschnitts so, dass er druckerfreundlich ist
  • schnappen Sie sich die Teile der Seite, die wir drucken möchten
  • ein Fenster aufmachen und die Größe bestimmen.
  • Legen Sie die Teile der Seite, die wir gegriffen haben, in das Fenster
  • Öffnen Sie das Druckdialogfeld
  • Schließen Sie das Fenster nach dem Druckvorgang

Wie werden wir diese Dinge erreichen??

Fügen Sie den Listener hinzu:

Wir haben den Print Listener in die DOM-Lesefunktion eingefügt: 

 $ (document) .ready (function () $ ('. printControl'). click (function () // Hier setzen wir den Druckcode););

Ändern Sie das Aussehen

Wir müssen die Farben vom Farbschema in Schwarz und Weiß ändern. Es gibt mehrere Möglichkeiten, diese Aufgabe zu lösen. Die Methode, die wir verwenden, besteht darin, dem betroffenen Abschnitt vorübergehend eine Klasse hinzuzufügen, den zu druckenden Code zu verwenden und die Klasse dann sofort wieder zu entfernen. Wir fügen die Klasse mit dem CSS-Selector von jQuery hinzu, um die divs auszuwählen, und fügen dann mit dem Befehl children () allen Elementen eine Klasse hinzu.

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

Für die Elemente mit Printversion müssen wir noch mehr Stil hinzufügen:

 h2.printversion, p.printversion color: # 333333; Text ausrichten: links;  .printControls.printversion display: none;

Die Sektion packen

Wir werden jetzt den Abschnitt packen und in eine Variable einfügen. Wir werden dies nach dem Hinzufügen der Klasse setzen, aber bevor wir sie entfernen, sodass die Version in der Variablen mit der hinzugefügten Klasse übereinstimmt. Wir packen den HTML-Code im Kopf, um die Styling-Informationen zu erhalten, und verketten sie mit dem HTML-Code der Sektion. Das "this" erlaubt es uns, nur den angeklickten Abschnitt auszuwählen, anstatt alle zu markieren. Dann gehen wir von der Drucktaste zu den Stufen und greifen diese auf. 

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

Das Fenster öffnen

Wir müssen die Variable jetzt irgendwo setzen. Aber zuerst müssen wir ein neues Fenster öffnen. Diese Zeilen sind nicht sehr wichtig und sind nur einfaches JavaScript - in diesem Schritt kein jQuery. Grundsätzlich öffnen wir ein Fenster, vergeben einen eindeutigen Namen und geben ihm einige grundlegende Parameter. 

 $ (document) .ready (function () $ ('. printControl'). click (function () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ ('. printSection '). children (). removeClass (' printversion '); var windowUrl =' ungefähr: leer '; var uniqueName = neues Datum (); var windowName =' PrintSection '+ uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName,' left = 500, oben = 000, width = 600, height = 1000 ');););

Fülle das Fenster

Wir müssen jetzt das Fenster mit dem füllen, was wir zuvor ergriffen haben. Grundsätzlich schreiben wir einfach den Wert der Variablen in das Fenster. 

 $ (document) .ready (function () $ ('. printControl'). click (function () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ ('. printSection '). children (). removeClass (' printversion '); var windowUrl =' ungefähr: leer '; var uniqueName = neues Datum (); var windowName =' PrintSection '+ uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName,' left = 500, oben = 000, width = 600, height = 1000 '); printWindow.document.write (printContent);););

Drucken und schließen

Wir müssen noch ein paar Zeilen hinzufügen, bevor wir fertig sind. Zuerst müssen wir das Fenster fokussieren und dann das Dialogfeld "Drucken" öffnen. Dann schließen wir das Fenster, nachdem das Dialogfeld geschlossen wurde. 

 $ (document) .ready (function () $ ('. printControl'). click (function () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ ('. printSection '). children (). removeClass (' printversion '); var windowUrl =' ungefähr: leer '; var uniqueName = neues Datum (); var windowName =' PrintSection '+ uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName,' left = 500, oben = 000, width = 600, height = 1000 '); printWindow.document.write (printContent); printWindow.document.close (); printWindow.focus (); printWindow.print (); printWindow.close ();););

Das ist es. Wir sollten jetzt nach jedem Artikel einen funktionellen Druckknopf haben. Gute Arbeit, aber wir sind noch nicht fertig. Jetzt müssen wir die E-Mail-Schaltfläche korrekt ausführen.

Was müssen wir beim E-Mail-Versand leisten??

  • Fügen Sie einen Listener hinzu, um darauf zu warten, dass ein .printControl oder ein .emailControl angeklickt wird.
  • Wir benötigen die E-Mail-Adresse, an die sie gesendet werden.
  • Wir brauchen ihren Namen.
  • Wir brauchen ihre E-Mail.
  • Wir brauchen eine kurze Nachricht, um mit gesendet zu werden.
  • Setzen Sie all diese Informationen mithilfe von Eingabeaufforderungen in Variablen ein.
  • Ändern Sie das Erscheinungsbild des Abschnitts, um E-Mail-freundlich zu sein
  • Wir benötigen die URL der Seite, einschließlich eines Ankertags, um direkt zum Artikel zu gelangen.
  • alle diese Informationen in eine Variable.
  • steck das in ein neues Fenster.

Dinge, die wir bereits beim Drucken gemacht haben

Es ist nicht nötig, all diese Schritte noch einmal durchzugehen. Wir können diejenigen überspringen, die wir beim Drucken behandelt haben:

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

Informationen abrufen

Für dieses Beispiel benötigen wir nichts Besonderes, um die erforderlichen Informationen abzurufen. Wir werden nur einige Eingabeaufforderungen ausgeben, die die Informationen in Variablen speichern.

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = Eingabeaufforderung ('Bitte geben Sie an, an wen Sie dies senden möchten'); var fromWho = Eingabeaufforderung (' Und wie lautet Ihr Name? '); Var fromWhoEmail = Eingabeaufforderung (' und was ist Ihre E-Mail-Adresse? '); Var fromMessage = Eingabeaufforderung (' Haben Sie eine Nachricht? '); $ ('. PrintSection '). Children () .addClass ('printversion'); $ ('. printSection'). children (). removeClass ('printversion'); var windowUrl = 'about: blank'; var uniqueName = neues 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 ();););

URL und Ankertag erhalten

Nun müssen wir die aktuelle URL und Artikelnummer (über das Ankertag) in Variablen speichern. Wir werden sie später kombinieren.

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = Eingabeaufforderung ('Bitte geben Sie an, an wen Sie dies senden möchten'); var fromWho = Eingabeaufforderung (' Und wie lautet Ihr Name? '); Var fromWhoEmail = Eingabeaufforderung (' und was ist Ihre E-Mail-Adresse? '); Var fromMessage = Eingabeaufforderung (' Haben Sie eine Nachricht? '); $ ('. 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 = neues 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 (););) ;

Alles zusammenfügen

Zuerst kombinieren wir die URL mit dem Ankertag und fügen sie in eine schöne Textfolge ein. Dann kombinieren wir das mit allem, was wir in einer Variablen namens emailContent brauchen.

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = Eingabeaufforderung ('Bitte geben Sie an, an wen Sie dies senden möchten'); var fromWho = Eingabeaufforderung (' Und wie lautet Ihr Name? '); Var fromWhoEmail = Eingabeaufforderung (' und was ist Ihre E-Mail-Adresse? '); Var fromMessage = Eingabeaufforderung (' Haben Sie eine Nachricht? '); $ ('. PrintSection '). Children () .addClass ('printversion'); var emailID = $ (this) .parent (). parent (). find ('a'). attr ('name'); var currentURL = window.location.href; var emailLink = "
Quelle: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + '
Zu:'+ sendTo +'
'+'
Von Namen):'+ fromWho +'
'+'
Aus der Email):'+ fromWhoEmail +'
'+'
Botschaft:'+ fromMessage +'
'+ emailLink +'
'+ $ (this) .parent (). parent (). html (); $ ('. printSection'). children (). removeClass ('printversion'); var windowUrl = 'about: blank'; var uniqueName = neues Datum (); var windowName = 'emailSection' + uniqueName.getTime (); var emailWindow = window.open (windowUrl, windowName, 'left = 500, oben = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus (); ); );

Fertig Code

 $ (document) .ready (function () $ ('. printControl'). click (function () $ ('. printSection'). children (). addClass ('printversion'); var printContent = $ (' head '). html () + $ (this) .parent (). parent (). html (); $ ('. printSection '). children (). removeClass (' printversion '); var windowUrl =' ungefähr: leer '; var uniqueName = neues Datum (); var windowName =' PrintSection '+ uniqueName.getTime (); var printWindow = window.open (windowUrl, windowName,' left = 500, oben = 000, width = 600, height = 1000 '); printWindow.document.write (printContent); printWindow.document.close (); printWindow.focus (); printWindow.print (); printWindow.close ();); $ ('. EmailControl '). click (function () var sendTo = Eingabeaufforderung ('Bitte geben Sie den Empfänger an, an den Sie dies senden möchten'); var fromWho = Eingabeaufforderung ('Und was ist Ihr Name?'); var fromWhoEmail = Eingabeaufforderung ('Und was ist Ihre E-Mail? '); Var vonMessage = Eingabeaufforderung (' Haben Sie eine Nachricht? '); $ ('. PrintSection '). Children (). AddClass (' printversion '); var emailID = $ (this) .parent () .parent (). find ('a'). attr ('name'); var currentURL = window.location.href; var emailLink = "
Quelle: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('head'). html () + '
Zu:'+ sendTo +'
'+'
Von Namen):'+ fromWho +'
'+'
Aus der Email):'+ fromWhoEmail +'
'+'
Botschaft:'+ fromMessage +'
'+ emailLink +'
'+ $ (this) .parent (). parent (). html (); $ ('. printSection'). children (). removeClass ('printversion'); var windowUrl = 'about: blank'; var uniqueName = neues Datum (); var windowName = 'emailSection' + uniqueName.getTime (); var emailWindow = window.open (windowUrl, windowName, 'left = 500, oben = 000, width = 600'); emailWindow.document.write (emailContent); emailWindow.document.close (); emailWindow.focus (); ); );

Wir sind fertig

Wir haben jetzt eine automatische Methode zum Drucken und E-Mail von Abschnitten einer Website, die sich verschlechtern, wenn JavaScript deaktiviert ist. Gut gemacht! Wenn Ihnen dieses Tutorial gefallen hat, bleiben Sie dran. In einem zukünftigen Tutorial werden wir darauf eingehen, wie man daraus ein jQuery-Plugin macht. Wenn Sie Fragen oder Kommentare haben, lassen Sie sie unten stehen. Ich würde gerne von dir hören!

Code
×