THE HAM MEDIA BLOG

[mixi] jQuery.js | しつもん 162

Thickboxで表示したコンテンツだけを印刷できるようにするテクニックというのはあるのでしょうか？
[mixi] jQuery.js | しつもん 162

Thickboxで表示させた部分だけ印刷できるようになんてできるんだろうか・・・？なんて思ったけど、印刷ボタンつけてそこであれこれしたらできそうだなーなんて思ったので実践！！

Thickbox部分のみ印刷できるようにする

早速実践！

※とりあえずブラウザでのプレビュー確認報告。Firefox3.6、IE7、IE8は大丈夫な様子。ChromeはデモのThickbox表示がおかしい状況･･･Opera微妙？

■デモ

上記の画像表示中は、その部分のみが印刷される（ハズ）です。

尚、今回の内容はFirefox3.6で動作確認済み。他ブラウザ、時間の関係で未確認です＞＜

カスタマイズ箇所

■プリント用のCSS用意

中身は下記のような感じに

@media print{
#wrap{display:none;}
#TB_window{display:block;}
}

※上記２行目の#wrap部分は、サイト全体を包括している枠全体を指定。各自のサイトの作りに合わせて下さい。

■thickbox.js本体

9行目あたりに以下追加

var tb_printCss = "プリント用CSS(例:css/print.css)";

130行目あたりに以下追加

var style = document.createElement("link"),
    head = document.getElementsByTagName('head')[0];
style.type = "text/css";
style.rel = "stylesheet";
style.media = "print"
style.href = tb_printCss;
head.appendChild( style );

280行目あたりに以下追加

$("link:last-child","head").remove();

各所$("#TB_window").append()の中にボタン追加

<a href='#' id='printBtn'>print</a>

今回のサンプルではcloseの前に改行をして入れました。

プリントボタンの機能をつける

function tb_print(){
    window.print();
    return false;
}

自分はthickbox.jsの最後に追加しました

ちょっとした説明

上記のカスタマイズポイントは３点。

１：media="print"にしたCSSをThickbox表示中のみに適用させることと、２：Thickboxが非表示中や表示後の消された後にはThickbox用のCSSを削除する点です。それと３：プリントボタンと機能を追加する。

原理としては、Thickbox表示中の印刷は、メインコンテンツを非表示させているだけです。

今回のCSSだと、プリントした際に紙の中央に印刷されると思われます。その辺は印刷用CSSの#TB_windowのmargin-topやmargin-leftを調整して下さい。

ちょっと説明省きすぎて簡単に説明書いてしましましたが･･･伝わるでしょうか。時間のできた時にでも他ブラウザの確認などしてみようと思います。