Egy honlap kinyomtatásnál néha szükséges, hogy csak bizonyos blokkok vagy egy cikk kerüljenek fel a papírra ne az egész honlap. Ez a megoldás erre ad lehetőséget egy sor scriptel és 2 db css-el. A honlap képernyőre szánt template-je is újrafelhasználható, nem szükséges külön nyomtatásra szánt verzióval bajlódni.
1. A headerbe két style-t kerül, az egyik univerzális (képernyőre, nyomtatásra) a másikat csak nyomtatásra. A headerben így legyen a sorrend:
<link href="style.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="print.css" media="print" rel="stylesheet" type="text/css"></link>
2. A kinyomtatni való tartalmi blokkokat a print css-ben láthatóvá kell tenni, illetve a nem kívánatosokat elrejteni mint pl a nyomtatáson a copyright jelzés. A következő elemek kerülnek a class-okra:
style.css-be:
@media screen {
.printable { display: none; visibility: hidden;}
}
print.css-be:
.printable { display: yes; visibility: visible;}
.noprint { visibility: hidden;}
Azokat az elemeket amik a layout tartásához sem szükségesek külön ki lehet iktatni a print.css-ben, másképp üres felület látszódik a helyükön a nyomtatáson, így még a .noprint classra sincs szükség ezeken az elemeken.
#menu, #header {
display: none;
visibility: hidden;
}
3. A nyomtatás gombra rákerül az adott oldal URL-elje és egy változó, pl &print=yes aminek irányítania kell a headerben, hogy megjelenjen-e a script. JQuery is szükséges hozzá.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready( function() { window.print(); });
</script>
Tehát, ha rákattintanak a nyomtatás gombra akkor az oldal saját magát behívja újra a window.print javascriptel a headerben ami azonnal megnyitja a print ablakot és kinyomtatja a print.css szerint beállított blokkokat.
Nincsenek megjegyzések:
Megjegyzés küldése