Apprenez à styliser des articles pour impression et courrier électronique

Lors de la conception de sites Web, une fonctionnalité fréquemment recherchée est la possibilité d’imprimer ou d’envoyer par courrier électronique n’importe quelle section d’une page Web. Malheureusement, cette idée est généralement abandonnée plus tard dans le projet en raison d'un manque de temps ou de connaissances. Le formatage du texte pour l'impression est plus difficile qu'il n'y paraissait initialement. Aujourd'hui, nous allons utiliser JavaScript pour rechercher automatiquement certains éléments de page et les formater correctement pour une impression..

Objectifs:

A la fin de ce tutoriel, nous aurons accompli les tâches suivantes:

Utilisez jQuery pour imprimer ou envoyer par courrier électronique n'importe quelle section d'une page automatiquement lorsque vous cliquez sur un élément donné.
Formatez et changez le style à optimiser pour une impression ou un courrier électronique.
Ajouter des variables à la version email (À, De, Message, etc.)

La page

Quel est le problème avec cela?

Wow… cette page est colorée. Je suis d'accord - ce n'est pas la plus grande palette de couleurs au monde. Cette conception n'a certainement pas été conçue pour l'impression. Bien que l’arrière-plan bleu ne s’imprimera pas sur la plupart des imprimantes, elle ne fera que le faire disparaître. Cela gâchera le reste du dessin, car le texte orange et vert clair s’imprimera sur un fond blanc. Il n’existe pas de moyen facile pour un utilisateur d’imprimer un article de cette page en noir et blanc, à moins de le copier dans un logiciel de traitement de texte et de le formater lui-même..

Gardez la conception, corrigez le problème

Une solution pourrait être de fournir une feuille de style d'impression, comme l'a fait Tuts +. Cela fonctionnerait s'il n'y avait qu'un seul article sur une page. Malheureusement, cet exemple est au format blog. Cela signifie qu'il y a plusieurs articles sur une page. et il est probable que l'utilisateur ne souhaite imprimer qu'un seul article. Nous allons utiliser jQuery pour permettre à l'utilisateur de cliquer sur un lien après chaque article qui le formate et lui permet de l'imprimer ou de l'envoyer par courrier électronique..

HTML pour cette page

Le HTML est assez simple pour cette page. Nous ajouterons quelques classes standard: une pour indiquer une section à imprimer / envoyer par courrier électronique (.printSection), une autre pour indiquer la zone contenant les liens à imprimer ou par courrier électronique (.printControls), une classe pour tous les liens d'impression ( .printControl) et une classe pour tous les liens de messagerie (.emailControl). Notez que nous avons également lié au fichier minifié de Google. Cela nous permet d'utiliser jQuery plus tard.

    Imprimer | Email jQuery Plugin       Ceci est une rubrique

  Texte de l'article
 Section d'impression
 | Section Email 
   C'est un titre différent
Texte de l'article
 Plus de texte d'article
 Section d'impression
 | Section Email 
   Ceci est une autre rubrique
Texte de l'article
 Plus de texte d'article
 Section d'impression
 | Section Email 
   C'est encore une rubrique
Texte de l'article
 Plus de texte d'article
 Section d'impression
 | Section Email

Le CSS

Le CSS est assez simple aussi.

 body text-align: center; famille de fontes: Tahoma, Arial, Helvetica, Sans Serif;  h2 color: # d98841; taille de police: 48px; remplissage: 0px; marge: 0px; poids de police: normal;  .page-wrap margin-left: auto; marge droite: auto; largeur: 550px; arrière-plan: # 10222b; rembourrage: 15px; text-align: left;  .printSection p color: # bdd684; taille de police: 12px; text-align: justifier;  p.printControl, p.emailControl, .printControls display: inline; couleur: # f2ece4;  p.printControl, p.emailControl curseur: pointeur;  img margin-left: 35px;

Nous allons également ajouter un peu de CSS pour augmenter la convivialité. Si Javascript est désactivé, nous ne voulons pas de liens morts - nous masquons donc les liens:

Temps de script

Que voulons-nous accomplir lors de l'impression?

ajouter un écouteur pour attendre que l'on clique sur un fichier .printControl ou .emailControl.
modifier l'apparence de la section pour qu'elle soit imprimable
saisir les parties de la page que nous voulons imprimer
ouvrir une fenêtre et la taille.
mettre les parties de la page que nous avons saisies dans la fenêtre
ouvrir la boîte de dialogue d'impression
ferme la fenêtre après l'impression

Comment nous allons accomplir ces choses?

Ajouter l'auditeur:

Nous plaçons l'auditeur d'impression dans la fonction de lecture DOM:

 $ (document) .ready (function () $ ('. printControl'). click (function () // Nous mettrons ici le code d'impression););

Changer l'apparence

Nous devons changer les couleurs du schéma coloré au noir et blanc. Nous pouvons accomplir cette tâche de plusieurs manières. La méthode que nous allons utiliser consiste à ajouter temporairement une classe à la section concernée, à prendre le code à imprimer, puis à supprimer immédiatement la classe à nouveau. Nous ajoutons la classe en utilisant le sélecteur CSS de jQuery pour sélectionner les divs, puis nous ajoutons une classe à tous les éléments qu'il contient à l'aide de la commande children ()..

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

Nous devons également ajouter un peu plus de style pour les éléments avec printversion:

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

Saisir la section

Nous allons maintenant saisir la section et la mettre dans une variable. Nous allons mettre ceci après avoir ajouté la classe, mais avant de la supprimer, de sorte que la version de la variable soit avec la classe ajoutée. Nous saisissons le code HTML dans la tête pour obtenir les informations de style et les concaténer avec le code HTML de la section. Le "ceci" nous permet de sélectionner uniquement la section sur laquelle vous avez cliqué à la place de toutes. Ensuite, nous montons aux niveaux à partir du bouton d’impression et saisissons cela.

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

Ouvrir la fenêtre

Nous devons maintenant mettre la variable quelque part. Mais d’abord, nous devons ouvrir une nouvelle fenêtre. Ces lignes ne sont pas très importantes et sont simplement du code JavaScript - pas de jQuery dans cette étape. Fondamentalement, nous ouvrons une fenêtre, attribuons un nom unique et lui donnons quelques paramètres de 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 ');););

Remplir la fenêtre

Nous devons maintenant remplir la fenêtre avec ce que nous avons saisi précédemment. Nous écrivons simplement à la fenêtre la valeur de la variable.

 $ (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);););

Imprimer et fermer

Nous devons ajouter quelques lignes de plus avant de terminer. Nous devons d’abord concentrer la fenêtre, puis ouvrir la boîte de dialogue Imprimer. Puis on ferme la fenêtre après la fermeture de la boîte de dialogue.

 $ (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 ();););

C'est tout. Nous devrions maintenant avoir un bouton d'impression fonctionnel après chaque article. Bon travail, mais nous n'avons pas encore fini. Maintenant, nous devons faire fonctionner le bouton email correctement.

Que devons-nous accomplir en envoyant un email??

ajouter un écouteur pour attendre que l'on clique sur un fichier .printControl ou .emailControl.
Nous avons besoin de l'adresse email à laquelle ils l'envoient.
Nous avons besoin de leur nom.
Nous avons besoin de leur email.
Nous avons besoin d'un message court pour être envoyé avec.
mettre toutes ces informations dans des variables à l'aide d'invites.
changer l'apparence de la section pour qu'elle soit compatible avec les emails
Nous avons besoin de l'URL de la page, y compris une balise d'ancrage pour passer directement à l'article.
mettre toutes ces informations dans une variable.
mettre cela dans une nouvelle fenêtre.

Choses que nous avons déjà faites lors de l'impression

Il n'est pas nécessaire de répéter toutes ces étapes. Nous pouvons ignorer ceux que nous avons couverts d’impression:

 $ (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 ();););

Obtenir l'information

Pour cet exemple, nous n'avons besoin de rien d'extraordinaire pour récupérer les informations requises. Nous allons simplement soulever plusieurs invites qui stockent les informations dans des variables.

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = prompt ('Merci de taper à qui vous voulez envoyer ceci'); var fromWho = prompt (' Et quel est votre nom? '); Var fromWhoEmail = prompt (' Et quel est votre email? '); Var fromMessage = prompt (' Avez-vous un message? '); $ ('. PrintSection '). Children () .addClass ('printversion'); $ ('. printSection'). children (). removeClass ('printversion'); var windowUrl = 'about: blank'; var uniqueName = nouvelle 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 ();););

Obtenir l'URL et le tag d'ancrage

Maintenant, nous devons stocker l'URL actuelle et le numéro d'article (via la balise d'ancrage) dans des variables. Nous les combinerons plus tard.

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = prompt ('Merci de taper à qui vous voulez envoyer ceci'); var fromWho = prompt (' Et quel est votre nom? '); Var fromWhoEmail = prompt (' Et quel est votre email? '); Var fromMessage = prompt (' Avez-vous un message? '); $ ('. 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 nom unique = nouvelle Date (); var nomName =' emailSection '+ nom unique.getTime (); var emailWindow = window .open (windowUrl, windowName, 'left = 500, top = 000, width = 600'); emailWindow.document.write (printContent); emailWindow.document.close (); emailWindow.focus (););) ;

Tout mettre ensemble

Tout d'abord, nous combinons l'URL avec la balise anchor et le plaçons dans une belle chaîne de texte. Ensuite, nous combinons cela avec tout ce dont nous avons besoin dans une variable appelée emailContent.

 $ (document) .ready (function () $ ('. emailControl'). click (function () var sendTo = prompt ('Merci de taper à qui vous voulez envoyer ceci'); var fromWho = prompt (' Et quel est votre nom? '); Var fromWhoEmail = prompt (' Et quel est votre email? '); Var fromMessage = prompt (' Avez-vous un message? '); $ ('. PrintSection '). Children () .addClass ('printversion'); var emailID = $ (this) .parent (). parent (). find ('a'). attr ('name'); var currentURL = window.location.href; var emailLink = "La source: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('tête'). html () + 'À:'+ sendTo +'
'+'De (Nom):'+ fromQui +'
'+'De l'email):'+ fromWhoEmail +'
'+'Message:'+ fromMessage +'
'+ emailLink +'
'+ $ (this) .parent (). parent (). html (); $ ('. 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 (); ); );

Code terminé

 $ (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 ('Merci de taper à qui vous voulez envoyer ceci'); var fromWho = prompt ('Et quel est votre nom?'); var fromWhoEmail = prompt ('Et quelle est votre Email? '); Var fromMessage = prompt (' Avez-vous un message? '); $ ('. PrintSection '). Children (). AddClass (' printversion '); var emailID = $ (this) .parent () .parent (). find ('a'). attr ('name'); var currentURL = window.location.href; var emailLink = "La source: '+ currentURL +' # '+ emailID +'
'; var emailContent = $ ('tête'). html () + 'À:'+ sendTo +'
'+'De (Nom):'+ fromQui +'
'+'De l'email):'+ fromWhoEmail +'
'+'Message:'+ fromMessage +'
'+ emailLink +'
'+ $ (this) .parent (). parent (). html (); $ ('. 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 (emailContent); emailWindow.document.close (); emailWindow.focus (); ); );

Avaient fini

Nous disposons désormais d’un moyen automatique d’imprimer et d’envoyer par courrier électronique des sections d’un site Web qui se dégradent lorsque JavaScript est désactivé. Bon travail! Si vous avez apprécié ce tutoriel, restez à l'écoute. Dans un prochain tutoriel, nous verrons comment transformer cela en un plugin jQuery. En attendant, si vous avez des questions ou des commentaires, veillez à les laisser ci-dessous. J'adorerais avoir de vos nouvelles!

Code