Tutoriál: Tvorba tlačiteľných odkazov pomocou pseudotriedy :after a vlastnosti content

Tutoriál: Tvorba tlačiteľných odkazov pomocou pseudotriedy :after a vlastnosti content

CSS sa používa na štýlovanie (grafickú úpravu) existujúcich elementov, ale dokážeme tiež do dokumentov vkladať vlastný obsah. Využitie CSS ako generátora obsahu má využitie napr. pri vložení URL adresy hypertextových odkazov vedľa bežného textu.
Keď si používateľ prezerá webovú stránku na počítači, ukáže myšou na hypertextový odkaz a hneď vidí, kde tento odkaz smeruje. Táto informácia je zobrazovaná v stavovom riedku internetového prehliadača. Problém nastane vtedy, ak sa rozhodne používateľ webovú stránku vytlačiť. Na papieri nemáme vôbec žiadnu informáciu, kam hypertextový odkaz smeruje.
Existuje riešenie, CSS dokáže do dokumentu pridať takú funkcionalitu, ktorá tento malý nedostatok eliminuje. Dokonca vieme, že takéto riešenie funguje v IE8, Firefoxu, Safari a Chrome. Aby všetko správne fungovalo aj v IE7, musíme použiť núdzové riešenie pomocou JavaScript.
Vytvoríme stránku, ktorá bude obsahovať niekoľko hypertextových odkazov:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>tlačiteľné odkazy</title>
<link rel="stylesheet" href="tlac.css">
</head>
<body>
<header>
	<nav>
    	<ul>
        	<li><a href="cestovanie/index.html">Formulár: povolenie k ceste</a></li>
        	<li><a href="cestovanie/vydaje.html">Formulár: cestovné náhrady</a></li>
        	<li><a href="cestovanie/sprievodca.html">Cestovný sprievodca</a></li>
        </ul>
    </nav>
</header>
</body>
</html>

Ak by sme takúto stránku vytlačili, nemali by sme ani potuchy, kam hypertextové odkazy smerujú. Teraz to napravíme. Vytvoríme šablónu a nazveme ju napr. tlac.css. V šablóne vytvoríme jedno pravidlo:

@charset "utf-8";
/* CSS Document */

a:after {
	     content: " (" attr(href) ") ";
}

Na základe tohto pravidla internetový prehliadač za každý text hypertextového odkazu vykreslí navyše aj cestu, resp. hodnotu atribútu href. Ak by sme s chceli pozrieť, ako bude webová stránka vyzerať vytlačená, využijeme funkciu náhľadu tlače:


Núdzové riešenie:
Aby sme mali istotu 100% funkčnosti aj pre nižšie verzie IE, vytvoríme súbor tlac.js. V tomto súbore napíšeme jednoduchý kód:

// JavaScript Document
$(function() {
	
	if(window.onbeforeprint !== undefined) {
		window.onbeforeprint = ukazatOdkazy;
		window.onafterprint = skrytOdkazy;
	   }
});
function UkazatOdkazy() {
	$("a" ).each(function() {
      $(this).data("textOdkazu" , $(this).text());
	  $(this).append(" (" + $(this).attr("href" ) + ")" );   
    });
}
function SkrytOdkazy() {
	$("a" ).each(function() {
	  $(this).text($(this).data("textOdkazu")); 
  
	});
}

Tento skript je potrebné pripojiť na našu webovú stránku. Kód, ktorý sme napísali je určený pre IE vo verziách 6 a 7. Aby kód správne fungoval, potrebuje sa opierať o knižnice jQuery, ktoré taktiež k stránke pripojíme. Kód doplníme do hlavičky www stránky:

<head>
<meta charset="utf-8">
<title>tlačiteľné odkazy</title>
<link rel="stylesheet" href="tlac.css">
<script	charset="utf-8"	src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'
type="text/javascript"> 
</script>
<!--[if lte IE 7]-->
<script type="text/javascript" src="tlac.js"></script>
</head>
Rubriky: