jQuery-Plugin jqPrint - activer / désactiver la visibilité de l'impression-contrôle
j'utilise le Plugin jQuery jqPrint pour imprimer uniquement un conteneur de contrôle sur la page(dans mon cas, un Tableau). Cette "impression" conteneur doit être invisible par défaut (display:none
).
Donc j'ai essayé d'activer /désactiver la visibilité avec les Fonctions jQuery show/hide
ou toggle
.
Mais le contrôle ne sera imprimé lorsqu'elle est visible par défaut.
C'est le bouton imprimer, j'ai essayé sans succès:
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" />
Comme je l'ai déjà mentionné, la table ne sera imprimé lors de son abord visible. Sinon show()
ou toggle()
va le rendre visible, la boîte de dialogue d'impression s'affiche, mais il ne sera pas imprimé.
Vous en remercie d'avance.
Mise à JOUR:
La solution était - grâce à waxolunist - définir une impression média css. Sur ce chemin, je l'événement n'avez pas besoin d'activer /désactiver la visibilité de l'imprimables de contrôle. Il peut être invisible(display:none) par défaut.
C'est la fonction jQuery pour imprimer le contrôle:
<input type="button" style="width:120px" onclick="javascript:$('#TblPrinterView').jqprint(); return false;" value="Print" title="Print" />
et c'est la feuille de style:
@media print
{
.TblPrinterView{display:block;}
}
Ici est la Plugin:
//-----------------------------------------------------------------------
//Eros Fratini - [email protected]
//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);
- Heureux de vous a aidé à en sortir.
Vous devez vous connecter pour publier un commentaire.
Avez-vous déjà essayer de faire de votre conteneur uniquement visible dans printMode avec CSS?
Je veux dire avec les css media=imprimer visible et avec les médias=écran invisible?
Cela signifie, la première instruction est exécutée seulement lors de l'impression, la dernière pour l'impression et l'écran. Une liste des types de support est disponible http://www.w3.org/TR/CSS2/media.html.
De cette façon, vous pouvez contrôler votre css en fonction de l'appareil, il est montré.