• かちびと.net

    Webページの印刷プレビューを見やすく素早く表示させるjQueryプラグイン・Print Previewのご紹介です。なかなかいいんですけど、若干使いにくいかも。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

Webページの印刷プレビューを見やすく素早く表示させるjQueryプラグイン・Print Preview

スポンサーリンク

Webページの印刷プレビューを、
その場で見やすく素早く表示
させるjQueryプラグインです。
地味だけど結構良かったです。
IEには対応して無い様ですが、
印刷が必要なページに導入する
と良いユーザービリティになるかも。

この手のライブラリは個人的に初見だったので備忘録的にご紹介します。

Print Preview


このようにその場で直ぐにプレビューを表示させる事が出来ます。プラグインを導入すると、プレビュー用のボタンが指定した箇所に表示されます。また、ショートカット(WinならCtrl+P)でも同じエフェクトでプレビューが表示されます。


通常のブラウザの機能の印刷プレビューでも確認したところ、確かに別途用意したprint.cssを読み込んでくれているようでした。

ご覧いただいたほうが早そうです。右サイドバーの最上部にプレビューボタンがあります。※IEは対応していませんでした

Sample

【追記】
対応していないのはIE7だけでした。確認不足でした・・すみません。
教えていただいたkawasakiさん、有難う御座いました!

コード

    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
    <script src="jquery.print-preview.js" type="text/javascript" charset="utf-8"></script>

普通の本体ではなく、jquery.tools.min.jsという、複数のプラグインを含んだCDNを用いていました。これだけの為に使うのは若干微妙かもですが・・

    <script type="text/javascript">
        $(function() {
            $('#aside').prepend('<a class="print-preview">Print this page</a>');
            $('a.print-preview').printPreview();

            $(document).bind('keydown', function(e) {
                var code = (e.keyCode ? e.keyCode : e.which);
                if (code == 80 && !$('#print-modal').length) {
                    $.printPreview.loadPrintPreview();
                    return false;
                }
            });
        });
    </script>

専用のボタンやキーボードのショートカットへの対応などをすればセッティング完了です。

導入の際はもう少し使い勝手を良くしたいところです。

Print Preview

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services