2

はい、印刷ボタンを fancybox に追加する方法について質問があることは知っています。fancybox (http://oi50.tinypic.com/2wfvn7r.jpg) にボタンを追加しましたが、次のように実装される機能を追加する方法がわかりません: http://www.thatagency.com/design -studio-blog/2010/04/add-print-ability-to-fancybox-jquery-plugin/

誰でもこのボタンの機能を助けて書くことができますか?

とても感謝しています

マイコード: http://www.filehosting.org/file/details/360044/fancybox-print.zip

デモ / MY.htm

4

1 に答える 1

13

私はあなたの質問に投票しようとしていましたが、それを行う方法を見つけるのが少し難しいかもしれないことを理解しています (あなたはそれを知っているかどうか尋ねませんよね?), しかし、@JamWaffles に同意します.人々に「これをやってくれ」と頼むのではなく、自分のコードを見せて自分の試みを説明してください。最も論理的なのは (少なくとも) 見つかった例のソース ファイルを調べることだと思います。

とにかく、fancyboxのAPIオプションで提供した例のように印刷機能を実現し、次のような印刷ボタン用にいくつかを実現できます。onCompletecss

「印刷」ボタンの css プロパティを設定します (セレクターを使用します#fancy_print)。

div#fancy_print {
  /* set proper path for your print image */
    background: url("images/print2.jpg") no-repeat scroll left top transparent;
    cursor: pointer;
    width: 58px; /* the size of your print image */
    height: 60px;
    left: -15px;
    position: absolute;
    top: -12px;
    z-index: 9999;
    display: block;
}

次に、fancybox js コード:

$(document).ready(function() {
 $('.fancybox').fancybox({
  'onComplete': function(){ // for v2.0.6+ use : 'beforeShow' 
    var win=null;
    var content = $('#fancybox-content'); // for v2.x use : var content = $('.fancybox-inner');
    $('#fancybox-outer').append('<div id="fancy_print"></div>'); // for v2.x use : $('.fancybox-wrap').append(...
    $('#fancy_print').bind("click", function(){
      win = window.open("width=200,height=200");
      self.focus();
      win.document.open();
      win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
      win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
      win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
      win.document.write(content.html());
      win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
      win.document.close();
      win.print();
      win.close();
    }); // bind
  } //onComplete
 }); // fancybox
}); //  ready

印刷機能 (.bind()メソッド) を別の関数に配置して呼び出すことができonCompleteます。

デモファイル

注: このソリューションは Fancybox v1.3.4 用です (fancybox v2.x では、適切なセレクターと API オプションのコードを微調整する必要があります)。

編集 #1 : fancybox v2.x のオプションとセレクターにコメントしました

編集 #2 (2013 年 7 月 15 日) : 上記のコードは、fancybox に表示される単一のアイテムに対しては正常に機能しますが、fancybox ギャラリーを使用すると失敗します。

以下は、fancybox 2 (今日の v2.1.5) と画像ギャラリーの作業コードです。

$(document).ready(function() {
 $('.fancybox').attr("rel","gallery").fancybox({
  afterShow: function(){
    var win=null;
    var content = $('.fancybox-inner');
    $('.fancybox-wrap')
    // append print button
    .append('<div id="fancy_print"></div>')
    // use .on() in its delegated form to bind a click to the print button event for future elements
    .on("click", "#fancy_print", function(){
      win = window.open("width=200,height=200");
      self.focus();
      win.document.open();
      win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
      win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
      win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
      win.document.write(content.html());
      win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
      win.document.close();
      win.print();
      win.close();
    }); // on
  } //  afterShow
 }); // fancybox
}); //  ready

このコードは、委任された形式でメソッドを使用して、ギャラリー内の将来の要素の印刷ボタンにイベントを.on()バインドします。また、コールバックを使用して、印刷したい正しい画像を取得していることにも注意してください。clickafterShowindex

注：.on()jQuery v1.7+が必要です

http://www.picssel.com/playground/jquery/addPrintButtonV2_14jul13.htmlでデモを参照してください。

于 2012-07-14T17:38:09.130 に答える