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

问题描述

是的，我知道这里存在关于如何将打印按钮添加到fancybox的问题.我在fancybox (http://oi50.tinypic.com/2wfvn7r.jpg) 中添加了一个按钮，但我不知道如何添加这样一个函数: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?

我将不胜感激

我的代码:http://www.filehosting.org/file/details/360044/fancybox-print.zip

演示/MY.htm

推荐答案

我正要投票结束你的问题，但我明白找到解决方案可能有点棘手(你不会问你知道吗?)，但是我同意 @JamWaffles 的观点，即你不应该要求人们为我做这件事"，而是展示你的代码并描述你的尝试.我想最合乎逻辑的是(至少)查看找到的任何示例的源文件.

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.

无论如何，您可以像示例中那样实现打印功能提供onCompletefancybox 的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;
}

然后是fancybox js代码:

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

您可以将打印功能(.bind() 方法)放在一个单独的函数中并调用它onComplete.

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

演示文件

注意:此解决方案适用于 Fancybox v1.3.4(fancybox v2.x 需要调整代码以获得正确的选择器和 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)

EDIT #1:我评论了fancybox v2.x 的选项和选择器

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

EDIT #2(2013 年 7 月 15 日):上面的代码适用于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.

以下是fancybox 2(今天的v2.1.5)和图片库的工作代码:

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

此代码使用委托形式的 .on() 方法将 click 事件绑定到 print 按钮，以便画廊.另外注意，现在我们正在使用afterShow回调来获取我们想要打印的图像的正确index.

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.

注意 : .on() 需要 jQuery v1.7+

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

在 http://www.picssel.com/playground/jquery/addPrintButtonV2_14jul13 上查看演示.html

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