[英]jQuery-Plugin jqPrint - toggle visibility of print-control
我正在使用jQuery插件jqPrint在頁面上(在我的情況下是表)僅打印容器控件。 默認情況下,該“打印容器”應該是不可見的( display:none
)。
所以我試圖用jQuery Functions show/hide
或toggle
來切換可見性。 但是控件僅在默認情況下可見時才打印。
這是打印按鈕,我嘗試了以下但未成功:
1。
<input type="button" style="width:120px" onclick="javascript:$('#TblPrinterView').toggle().jqprint().toggle(); return false;" value="Print" title="Print" />
2。
<input type="button" style="width:120px" onclick="javascript:var tblprint=$('#TblPrinterView');tblprint.show();tblprint.jqprint();tblprint.hide(); return false;" value="Print" title="Print" />
正如我已經提到的,該表格僅在其最初可見時才會打印。 否則show()
或toggle()
將使其可見,顯示打印機對話框,但不會打印。
先感謝您。
更新 :該解決方案是-感謝蠟化專家-定義媒體打印CSS。 通過這種方式,我事件不需要切換printable控件的可見性。 默認情況下,它可以不可見(顯示:無)。
這是打印控件的jQuery函數:
<input type="button" style="width:120px" onclick="javascript:$('#TblPrinterView').jqprint(); return false;" value="Print" title="Print" />
這是樣式表:
@media print
{
.TblPrinterView{display:block;}
}
這是插件 :
// -----------------------------------------------------------------------
// Eros Fratini - eros@recoding.it
// jqprint 0.3
//
// - 19/06/2009 - some new implementations, added Opera support
// - 11/05/2009 - first sketch
//
// Printing plug-in for jQuery, evolution of jPrintArea: http://plugins.jquery.com/project/jPrintArea
// requires jQuery 1.3.x
//
// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
//------------------------------------------------------------------------
(function($) {
var opt;
$.fn.jqprint = function (options) {
opt = $.extend({}, $.fn.jqprint.defaults, options);
var $element = (this instanceof jQuery) ? this : $(this);
if (opt.operaSupport && $.browser.opera)
{
var tab = window.open("","jqPrint-preview");
tab.document.open();
var doc = tab.document;
}
else
{
var $iframe = $("<iframe />");
if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); }
$iframe.appendTo("body");
var doc = $iframe[0].contentWindow.document;
}
if (opt.importCSS)
{
if ($("link[media=print]").length > 0)
{
$("link[media=print]").each( function() {
doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");
});
}
else
{
$("link").each( function() {
doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");
});
}
}
if (opt.printContainer) { doc.write($element.outer()); }
else { $element.each( function() { doc.write($(this).html()); }); }
doc.close();
(opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus();
setTimeout( function() { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000);
}
$.fn.jqprint.defaults = {
debug: false,
importCSS: true,
printContainer: true,
operaSupport: true
};
// Thanks to 9__, found at http://users.livejournal.com/9__/380664.html
jQuery.fn.outer = function() {
return $($('<div></div>').html(this.clone())).html();
}
})(jQuery);
您是否已經嘗試過使容器僅在使用CSS的printMode中可見? 我的意思是與CSS媒體=打印可見和媒體=屏幕不可見?
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
這意味着,第一條語句僅在打印時執行,最后一條語句在打印和屏幕上執行。 有關媒體類型的列表,請訪問http://www.w3.org/TR/CSS2/media.html 。
這樣,您可以根據顯示的設備來控制CSS。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.