THE HAM MEDIA BLOG

Thickboxで表示したコンテンツだけを印刷するテクニック!

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
Thickbox
Print
CSS

Thickboxで表示したコンテンツだけを印刷するテクニック!

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

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

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

早速実践!

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

■デモ

201002283.jpg

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

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

カスタマイズ箇所

■プリント用のCSS用意

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

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

※上記2行目の#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の最後に追加しました

ちょっとした説明

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

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

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

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

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

参考サイト:
この記事へのコメント
写真を印刷させる目的なら写真の下にある

print
close or Esc Key

の表記もCSSで消した方がいいかもしれないですね。印刷上は必要ない要素ですし。
Posted by Zoorasia at 2010年03月12日
>Zoorasiaさん
ご指摘ありがとうございます!

そうですね、ご指摘通り、不必要な部分も印刷用CSSで
display:none;
を指定しておいて、印刷で表示させなくするのがいいです。

今回はメイン部分の非表示ばかりに気がとられしまい、細かいところまで気が回っていませんでした。
ありがとうございます。
Posted by ハム at 2010年03月13日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。