Question

是的，我知道这里存在关于如何将打印按钮添加到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

demo / MY.htm

Answer 1

我准备将你的问题投票结束但我明白找到办法可能有点棘手（你不会问你是否知道它，不是吗？），但我同意@ JamWaffles你不应该让人们“为我做这个”，而是展示你的代码并描述你的尝试。我认为最合乎逻辑的是（至少）查看找到的任何示例的源文件。

无论如何，您可以使用onComplete fancybox的API选项获得example you provided的打印功能，打印按钮可以实现一些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 file

注意：此解决方案适用于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事件绑定到 print 按钮，以便将来使用库中的元素。另外通知现在我们正在使用afterShow回调来获取我们要打印的图像的正确index。

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

请参阅http://www.picssel.com/playground/jquery/addPrintButtonV2_14jul13.html

上的演示

Fancybox - 添加打印功能

1 个答案: