Fancybox – 添加打印function
是的，我知道这里存在关于如何向fancybox添加打印按钮的问题。 我在fancybox上添加了一个按钮（http://sofzh.miximages.com/jquery/2wfvn7r.jpg），但我不知道如何添加一个将要实现的function： http ： //www.thatagency.com/design -Studio-博客/ 2010/04 /添加打印能力到的fancybox – jQuery的插件/
任何人都可以帮助和写这个按钮的function？
我将非常感激
我的代码： http ： //www.filehosting.org/file/details/360044/fancybox-print.zip
demo / MY.htm
我打算把你的问题投票关闭，但我明白找到办法可能有点棘手（你不会问你是否知道它，不是吗？），但我同意@JamWaffles你的意见不应该要求人们“ 为我做这件事 ”，而是要展示你的代码并描述你的尝试。 我想最合乎逻辑的是（至少）查看找到的任何示例的源文件。
无论如何，您可以实现打印function， 如您在onComplete fancybox的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(''); // 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
您可以将打印function（ .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('') // 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 .on() +
请参阅http://www.picssel.com/playground/jquery/addPrintButtonV2_14jul13.html上的演示