Fancybox - 添加打印功能

Question

是的,我知道这里存在关于如何向fancybox添加打印按钮的问题.我在fancybox上添加了一个按钮(http://oi50.tinypic.com/2wfvn7r.jpg),但我不知道如何添加一个将要实现的功能:http://www.thatagency.com/design -Studio-博客/ 2010/04 /添加打印能力到的fancybox - jQuery的插件/

任何人都可以帮助和写这个按钮的功能？

我将非常感激

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

demo/MY.htm

Answer 1

我打算把你的问题投票关闭,但我明白找到办法可能有点棘手(你不会问你是否知道它,不是吗？),但我同意@JamWaffles你的意见不应该要求人们" 为我做这件事 ",而是要展示你的代码并描述你的尝试.我想最合乎逻辑的是(至少)查看找到的任何示例的源文件.

无论如何,您可以实现打印功能,如您在onCompletefancybox的API选项中提供的示例,以及一些css打印按钮,如下所示:

设置"打印"按钮的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.

DEMO文件

注意:此解决方案适用于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()其委派形式的方法将click事件绑定到图库中未来元素的打印按钮.另请注意,现在我们正在使用afterShow回调来获取index我们要打印的图像的正确性.

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

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