0
인쇄 미리보기를 표시하고 싶기 때문에 this plugin을 선택했습니다. 나는 내 코드에 추가 한인쇄 미리보기를 표시하고 싶습니다.
:
나는이 한UserControl에서
<%@ Page language="c#" AutoEventWireup="false" Inherits="System.Web.UI.Page" %>
<%@ Register TagPrefix="CP" TagName="TitleBar" Src="WebUserControl.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>MyPage</title>
<link href="css/print-preview.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script src="jquery.print-preview.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
/*
* Initialise print preview plugin
*/
// Add link for print preview and intialise
$('#aside').prepend('<a class="print-preview">Print this page</a>');
$('a.print-preview').printPreview();
// Add keybinding (not recommended for production use)
$(document).bind('keydown', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 80 && !$('#print-modal').length) {
$.printPreview.loadPrintPreview();
return false;
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<CP:TitleBar Title="User Control Test" TextColor="green" Padding="10" runat="server" />
<div id="aside"></div>
</form>
</body>
</html>
: 나는 UserControl에 스크립트를 추가 할 때
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
<p>Not loaded yet.</p>
<table>
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
문제는,이다는 Print-Preview-Plugin가 작동하지 않습니다.
UserControl에서 스크립트를 제거하면 print-preview-plugin이 정상적으로 작동합니다.
제 질문은 왜 플러그인이 UserControl에 스크립트를 추가 할 때 작동하지 않는 것입니까? 인쇄 미리보기 플러그인 파일 코드는 어떻게 호출해야합니까?
/*!
* jQuery Print Previw Plugin v1.0.1
*
* Copyright 2011, Tim Connell
* Licensed under the GPL Version 2 license
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Date: Wed Jan 25 00:00:00 2012 -000
*/
(function($) {
// Initialization
$.fn.printPreview = function() {
this.each(function() {
$(this).bind('click', function(e) {
e.preventDefault();
if (!$('#print-modal').length) {
$.printPreview.loadPrintPreview();
}
});
});
return this;
};
// Private functions
var mask, size, print_modal, print_controls;
$.printPreview = {
loadPrintPreview: function() {
// Declare DOM objects
print_modal = $('<div id="print-modal"></div>');
print_controls = $('<div id="print-modal-controls">' +
'<a href="#" class="print" title="Print page">Print page</a>' +
'<a href="#" class="close" title="Close print preview">Close</a>').hide();
var print_frame = $('<iframe id="print-modal-content" scrolling="no" border="0" frameborder="0" name="print-frame" />');
// Raise print preview window from the dead, zooooooombies
print_modal
.hide()
.append(print_controls)
.append(print_frame)
.appendTo('body');
// The frame lives
for (var i=0; i < window.frames.length; i++) {
if (window.frames[i].name == "print-frame") {
var print_frame_ref = window.frames[i].document;
break;
}
}
print_frame_ref.open();
print_frame_ref.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' +
'<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">' +
'<head><title>' + document.title + '</title></head>' +
'<body></body>' +
'</html>');
print_frame_ref.close();
// Grab contents and apply stylesheet
var $iframe_head = $('head link[media*=print], head link[media=all]').clone(),
$iframe_body = $('body > *:not(#print-modal):not(script)').clone();
$iframe_head.each(function() {
$(this).attr('media', 'all');
});
if (!$.browser.msie && !($.browser.version < 7)) {
$('head', print_frame_ref).append($iframe_head);
$('body', print_frame_ref).append($iframe_body);
}
else {
$('body > *:not(#print-modal):not(script)').clone().each(function() {
$('body', print_frame_ref).append(this.outerHTML);
});
$('head link[media*=print], head link[media=all]').each(function() {
$('head', print_frame_ref).append($(this).clone().attr('media', 'all')[0].outerHTML);
});
}
// Disable all links
$('a', print_frame_ref).bind('click.printPreview', function(e) {
e.preventDefault();
});
// Introduce print styles
$('head').append('<style type="text/css">' +
'@media print {' +
'/* -- Print Preview --*/' +
'#print-modal-mask,' +
'#print-modal {' +
'display: none !important;' +
'}' +
'}' +
'</style>'
);
// Load mask
$.printPreview.loadMask();
// Disable scrolling
$('body').css({overflowY: 'hidden', height: '100%'});
$('img', print_frame_ref).load(function() {
print_frame.height($('body', print_frame.contents())[0].scrollHeight);
});
// Position modal
starting_position = $(window).height() + $(window).scrollTop();
var css = {
top: starting_position,
height: '100%',
overflowY: 'auto',
zIndex: 10000,
display: 'block'
}
print_modal
.css(css)
.animate({ top: $(window).scrollTop()}, 400, 'linear', function() {
print_controls.fadeIn('slow').focus();
});
print_frame.height($('body', print_frame.contents())[0].scrollHeight);
// Bind closure
$('a', print_controls).bind('click', function(e) {
e.preventDefault();
if ($(this).hasClass('print')) { window.print(); }
else { $.printPreview.distroyPrintPreview(); }
});
},
distroyPrintPreview: function() {
print_controls.fadeOut(100);
print_modal.animate({ top: $(window).scrollTop() - $(window).height(), opacity: 1}, 400, 'linear', function(){
print_modal.remove();
$('body').css({overflowY: 'auto', height: 'auto'});
});
mask.fadeOut('slow', function() {
mask.remove();
});
$(document).unbind("keydown.printPreview.mask");
mask.unbind("click.printPreview.mask");
$(window).unbind("resize.printPreview.mask");
},
/* -- Mask Functions --*/
loadMask: function() {
size = $.printPreview.sizeUpMask();
mask = $('<div id="print-modal-mask" />').appendTo($('body'));
mask.css({
position: 'absolute',
top: 0,
left: 0,
width: size[0],
height: size[1],
display: 'none',
opacity: 0,
zIndex: 9999,
backgroundColor: '#000'
});
mask.css({display: 'block'}).fadeTo('400', 0.75);
$(window).bind("resize..printPreview.mask", function() {
$.printPreview.updateMaskSize();
});
mask.bind("click.printPreview.mask", function(e) {
$.printPreview.distroyPrintPreview();
});
$(document).bind("keydown.printPreview.mask", function(e) {
if (e.keyCode == 27) { $.printPreview.distroyPrintPreview(); }
});
},
sizeUpMask: function() {
if ($.browser.msie) {
// if there are no scrollbars then use window.height
var d = $(document).height(), w = $(window).height();
return [
window.innerWidth || // ie7+
document.documentElement.clientWidth || // ie6
document.body.clientWidth, // ie6 quirks mode
d - w < 20 ? w : d
];
} else { return [$(document).width(), $(document).height()]; }
},
updateMaskSize: function() {
var size = $.printPreview.sizeUpMask();
mask.css({width: size[0], height: size[1]});
}
}
})(jQuery);
위의 코드는 –
작동하지 않습니다 나는 그것이 작동해야 말을하지 않았다. 그것은 단지 아이디어 일뿐입니다. 올바른'onClick' 문법을 직접 찾아보십시오. – Thevs
사실, 그 일을 할 수있는 js 라이브러리가 있습니다. URL : http://www.jqueryscript.net/other/jQuery-Plugin-For-Html-Print-Preview-printPreview.html –