廢話不多說，請看範例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><img src="images/smilies/default/titter.gif" smilieid="9" border="0" alt="" />rint Friendly</title>
<style type="text/css">
.cContent
{
margin-top: 10px;
margin-left: 10px;
width: 400px;
border: dotted 1px #444444;
}
/* 可以用@media mediaType的方式宣告不同媒體專用樣式 */
@media screen
{
/* 螢幕上是藍底白字 */
.cContent
{
color: White;
background-color: Blue;
}
}
@media print
{
/* 列印時是白紙黑字的 */
.cContent { color: #222222; }
}
</style>
<!-- link, style可用media="mediaType"宣告適用時機 -->
<style type="text/css" media="screen">
/* 顯示時隱藏 */
.cPrint { display: none; }
</style>
<style type="text/css" media="print">
/* 列印時隱藏 */
.cScreen { display: none; }
</style>
</head>
<body>
<div class="cPrint"><img src="images/smilies/default/titter.gif" smilieid="9" border="0" alt="" />rint Header</div>
<div class="cScreen">Display Header</div>
<blockquote class="cContent">
One of the most important features
...
certain media types.
</blockquote>
</body>
</html>
<style type="text/css">
@media print{
.cPrint
{
display: block;
page-break-before: always;
}
#btnPrint { display: none; }
}
@media screen{
.cPrint { display: none; }
}
</style>
<script type="text/javascript">
$(function() {
//DataList的每六列加一個表頭
var $rows = $("#DataList1 > tbody > tr");
$rows.each(function(i) {
//取6的倍數, 排除最後一筆
if ((i + 1) % 6 == 0 && i != $rows.length - 1) {
//加上頁首並設定跳頁
$(this).after("<tr class='cPrintOnly'><td>" +
$("#dvPageHeader").html() + "</td></tr>");
}
});
$("#btnPrint").click(function() {
//列印
window.print();
});
});
</script>
沒有留言:
張貼留言