Fatal编程技术网
  • jquery/
  • Jquery 更改Colorbox界面以生成打印按钮

Jquery 更改Colorbox界面以生成打印按钮

jquery

Jquery 更改Colorbox界面以生成打印按钮,jquery,colorbox,Jquery,Colorbox,Colorbox有许多可控制的区域来帮助导航、标题和结束。我想添加一个用于打印内容的插件，但不知道在不破坏插件的情况下添加插件的最佳方法，我真的不想这样做 看起来该结构是在publicMethod.init（）函数中生成的，所以我想我应该附加一个 $print = $tag(div, "Print"), 指向该函数内的$content变量 当指定colorbox时，有没有关于添加此项的最佳方法的想法？我最终采用了以下方法，并认为这可能会有所帮助 其他希望在Colorbox中设置类似打印功能的用

Colorbox有许多可控制的区域来帮助导航、标题和结束。我想添加一个用于打印内容的插件，但不知道在不破坏插件的情况下添加插件的最佳方法，我真的不想这样做

看起来该结构是在publicMethod.init（）函数中生成的，所以我想我应该附加一个

$print = $tag(div, "Print"),
指向该函数内的$content变量

当指定colorbox时，有没有关于添加此项的最佳方法的想法？

我最终采用了以下方法，并认为这可能会有所帮助 其他希望在Colorbox中设置类似打印功能的用户。 首先，我需要将一些动态信息加载到colorbox中， 然后单击一个按钮并加载新信息，可以 印刷的。打印按钮仅出现在第二个颜色框上

Javascript: 
$（文档）.ready（函数（）{
$（“.intro_modal”）.colorbox({
是的，
内宽：600，
身高：300，
onLoad:function（）{
//如果在ajax之后重新打开打印，请删除打印
$（“#cboxPrint”）.remove（）；
},
});
$（“.checklist_ajax”）.colorbox({
伊夫拉姆：是的，
内宽：800，
身高：“95%”，
onComplete:function（）{
$（“#cboxContent iframe”）.ready（函数（）{
//加载内容后添加打印框
$（“#cboxContent”）.append（'print'）；
$（“#cboxPrint”）。单击（函数（）{
打印准备（）；
});
});
},
});
});
函数printpready（）{
试一试{
var print_frame=document.getElementById（'ifrmPrint'）；
var print_head=$（“#cboxContent iframe”）.contents（）.find（“head”）.html（）；
var print_body=$（“#cboxContent iframe”）.contents（）.find（“body”）.html（）
var print_doc=（print_frame.contentWindow | | print_frame.contentDocument）；
如果（打印单据）打印单据=打印单据；
//编写可打印内容
打印单据，填写（“”）；
打印文件写入（打印头）；
打印文件写入（“”）；
打印单据写入（打印正文）；
打印单据，填写（“”）；
打印文档关闭（）；
}
捕获（e）{
self.print（）；
}
}
我一直在努力处理“$”（“#cboxContent iframe”）.load（function（）”…但ready（）“$”（“#cboxContent iframe”）。ready（function（）”在加载内容后即可工作。 需要将this.focus（）和this.print（）添加到正文中以影响 印刷品

HTML： 
。。。


...
内联内容在这里
CSS然后做了相应的调整。

嗨，很抱歉从2011年开始把这个帖子拖上来，但我希望做一些更类似的事情，但不是让打印按钮出现在第二个颜色框上，而是希望它出现在初始颜色框上，并打印该颜色框窗口中的内容。在过去的几年中，这是否成为可能？ 
$(document).ready(function(){
    $(".intro_modal").colorbox({
            inline:true,
            innerWidth:600,
            height:300,
            onLoad: function() {
                    // Remove print if it is re-opened after ajax
                    $("#cboxPrint").remove();
            },
    });

    $(".checklist_ajax").colorbox({
            iframe:true,
            innerWidth:800,
            height:"95%",
            onComplete: function() {
                    $("#cboxContent iframe").ready(function(){
                            // Add print box once content loaded
                            $("#cboxContent").append('<div id="cboxPrint" style="float: left;">print</div>');
                            $("#cboxPrint").click( function() {
                                    printprepare();
                            });
                    });
            },
    });

});

function printprepare(){
    try{
            var print_frame = document.getElementById('ifrmPrint');
            var print_head = $("#cboxContent iframe").contents().find("head").html();
            var print_body = $("#cboxContent iframe").contents().find("body").html()
            var print_doc = (print_frame.contentWindow || print_frame.contentDocument);
            if (print_doc.document) print_doc = print_doc.document;
            // Write printable content
            print_doc.write("<html><head>");
            print_doc.write(print_head);
            print_doc.write('</head><body onload="this.focus(); this.print();">');
            print_doc.write(print_body);
            print_doc.write("</body></html>");
            print_doc.close();
    }
    catch(e){
            self.print();
    }
}

...
<p><a class='intro_modal' href="#inline_content" title="Checklist">Button</a></p>
...
<div style="display:none">
    <div style="padding:10px; background:#fff;" id="inline_content">
            <p>Inline content here...</p>
            <p><a href="link/to/printable/content" class="checklist_ajax cboxElement" title="Checklist">Click here to load content</a></p>
    </div>
</div>

<iframe id="ifrmPrint" src="#" style="width:0pt; height:0pt; border: none;"></iframe>