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 你不应该要求人们“为我做这件事”，而是展示你的代码并描述你的尝试。我想最合乎逻辑的是（至少）查看找到的任何示例的源文件。

无论如何，您可以实现打印功能，如您使用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。

演示文件

注意：此解决方案适用于 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上的演示

于 2012-07-14T17:38:09.130 回答