的fancybox - 添加打印功能 [英] Fancybox - add print function

问题描述

是的，我知道这里存在有关如何添加打印按钮问题的fancybox 。
我添加了一个按钮的fancybox（http://oi50.tinypic.com/2wfvn7r.jpg），但我不知道怎么加这将是implented这样的功能：<一href=\"http://www.thatagency.com/design-studio-blog/2010/04/add-print-ability-to-fancybox-jquery-plugin/\" rel=\"nofollow\">http://www.thatagency.com/design-studio-blog/2010/04/add-print-ability-to-fancybox-jquery-plugin/

Yes, I know that here exist questions about how add print button to fancybox. I added a button to fancybox (http://oi50.tinypic.com/2wfvn7r.jpg), but I don't know how add a function which will be implented like this: http://www.thatagency.com/design-studio-blog/2010/04/add-print-ability-to-fancybox-jquery-plugin/

任何人都可以帮助并为此写按钮功能？

can anyone help and write function for this button?

我会非常感激。

我的code： HTTP：//www.filehosting。组织/文件/信息/ 360044 / fancybox-print.zip

演示/ MY.htm

demo / MY.htm

推荐答案

我正要投你的问题关闭，但据我所知，它可能是一个有点棘手找到这样做的方式（你会不会问你知道它，你会吗？），但是我跟@JamWaffles，你不应该问的人同意的为我做这的，而是显示您的code和描述你的尝试。我想最合乎逻辑的是（至少）看发现的任何例子的源文件。

I was about to vote your question closed but I understand that it may be a little bit tricky to find the way to do it (you wouldn't ask if you know it, would you?), however I agree with @JamWaffles that you shouldn't ask people to "do this for me" but rather show your code and describe your attempts. I guess the most logical is (at least) to look at the source files of any example found.

不管怎么说，就可以实现打印功能在比如你提供与的onComplete 的fancybox的API选项，有些 CSS 像这样的打印按钮：

Anyways, you can achieve the print functionality as in the example you provided with the onComplete fancybox's API option and some css for the print button like this :

设置CSS属性的打印按钮（会使用选择 #fancy_print ）

Set the css properties for the "print" button (will use the selector #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;
}

那么JS的fancybox code：

then the fancybox js code :

$(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

您可以将打印功能（ .bi​​nd（）法）的分离作用，并调用它的onComplete

You could place the print functionality (.bind() method) in a separated function and call it onComplete.

DEMO文件

注意：这个解决方案是的fancybox V1.3.4（的fancybox V2.X需要来调整code为正确选择和API选项）

NOTE: this solution is for Fancybox v1.3.4 (fancybox v2.x would require to tweak the code for the proper selectors and API options)

编辑＃1 ：我评论的选项和选择器的fancybox V2.X

EDIT #1 : I commented the options and selectors for fancybox v2.x

编辑＃2 （2013年7月15日）：在code以上工作正常，在显示的fancybox一个单一的项目，但如果使用的fancybox的画廊失败。

EDIT #2 (July 15, 2013) : The code above works fine for a single item displayed in fancybox but it fails if using a fancybox gallery.

以下为2的fancybox（v2.1.5今天）工作code和图片库：

Following is the working code for fancybox 2 (v2.1.5 as today) and an image gallery :

$(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

这code使用。对（）方法在其委托的形式来绑定点击事件中的打印的按钮在画廊未来元素。另外的通知，现在我们使用的是 afterShow 回调来获取的正确指数图像我们要打印。

This code uses the .on() method in its delegated form to bind click events to the print button for future elements in the gallery. Also notice that now we are using the afterShow callback to get the correct index of the image we want to print.

注意：。对（）要求的jQuery V1.7 +

NOTE : .on() requires jQuery v1.7+

请参阅演示在 http://www.picssel.com/playground/jquery/addPrintButtonV2_14jul13 html的

这篇关于的fancybox - 添加打印功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！