jquery.print-preview.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. /*!
  2. * jQuery Print Previw Plugin v1.0.1
  3. *
  4. * Copyright 2011, Tim Connell
  5. * Licensed under the GPL Version 2 license
  6. * http://www.gnu.org/licenses/gpl-2.0.html
  7. *
  8. * Date: Wed Jan 25 00:00:00 2012 -000
  9. */
  10. (function($) {
  11. // Initialization
  12. $.fn.printPreview = function() {
  13. this.each(function() {
  14. $(this).bind('click', function(e) {
  15. e.preventDefault();
  16. if (!$('#print-modal').length) {
  17. $.printPreview.loadPrintPreview();
  18. }
  19. });
  20. });
  21. return this;
  22. };
  23. // Private functions
  24. var mask, size, print_modal, print_controls;
  25. $.printPreview = {
  26. loadPrintPreview: function() {
  27. // Declare DOM objects
  28. print_modal = $('<div id="print-modal"></div>');
  29. print_controls = $('<div id="print-modal-controls">' +
  30. '<a href="#" class="print" title="打印">打印</a>' +
  31. '<a href="#" class="close" title="取消">取消</a>').hide();
  32. var print_frame = $('<iframe id="print-modal-content" scrolling="no" border="0" frameborder="0" name="print-frame" />');
  33. // Raise print preview window from the dead, zooooooombies
  34. print_modal
  35. .hide()
  36. .append(print_controls)
  37. .append(print_frame)
  38. .appendTo('body');
  39. // The frame lives
  40. for (var i=0; i < window.frames.length; i++) {
  41. if (window.frames[i].name == "print-frame") {
  42. var print_frame_ref = window.frames[i].document;
  43. break;
  44. }
  45. }
  46. print_frame_ref.open();
  47. print_frame_ref.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' +
  48. '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">' +
  49. '<head><title>' + document.title + '</title></head>' +
  50. '<body></body>' +
  51. '</html>');
  52. print_frame_ref.close();
  53. // Grab contents and apply stylesheet
  54. var $iframe_head = $('head link[media*=print], head link, head style').clone(),
  55. //$iframe_body = $('body > *:not(#print-modal):not(script)').clone();
  56. $iframe_body = $('#Print').clone();
  57. $iframe_head.each(function() {
  58. $(this).attr('media', 'all');
  59. });
  60. if (!$.browser.msie && !($.browser.version < 7) ) {
  61. $('head', print_frame_ref).append($iframe_head);
  62. $('body', print_frame_ref).append($iframe_body);
  63. }
  64. else {
  65. $('body > *:not(#print-modal):not(script)').clone().each(function() {
  66. $('body', print_frame_ref).append(this.outerHTML);
  67. });
  68. $('head link[media*=print], head link[media=all]').each(function() {
  69. $('head', print_frame_ref).append($(this).clone().attr('media', 'all')[0].outerHTML);
  70. });
  71. }
  72. // Disable all links
  73. $('a', print_frame_ref).bind('click.printPreview', function(e) {
  74. e.preventDefault();
  75. });
  76. // Introduce print styles
  77. $('head').append('<style type="text/css">' +
  78. '@media print {' +
  79. '/* -- Print Preview --*/' +
  80. '#print-modal-mask,' +
  81. '#print-modal {' +
  82. 'display: none !important;' +
  83. '}' +
  84. '}' +
  85. '</style>'
  86. );
  87. // Load mask
  88. $.printPreview.loadMask();
  89. // Disable scrolling
  90. $('body').css({overflowY: 'hidden', height: '100%'});
  91. $('img', print_frame_ref).load(function() {
  92. print_frame.height($('body', print_frame.contents())[0].scrollHeight);
  93. });
  94. // Position modal
  95. starting_position = $(window).height() + $(window).scrollTop();
  96. var css = {
  97. top: starting_position,
  98. height: '100%',
  99. overflowY: 'auto',
  100. zIndex: 10000,
  101. display: 'block'
  102. }
  103. print_modal
  104. .css(css)
  105. .animate({ top: $(window).scrollTop()}, 400, 'linear', function() {
  106. print_controls.fadeIn('slow').focus();
  107. });
  108. print_frame.height($('body', print_frame.contents())[0].scrollHeight);
  109. // Bind closure
  110. $('a', print_controls).bind('click', function(e) {
  111. e.preventDefault();
  112. if ($(this).hasClass('print')) { window.print(); }
  113. else { $.printPreview.distroyPrintPreview(); }
  114. });
  115. },
  116. distroyPrintPreview: function() {
  117. print_controls.fadeOut(100);
  118. print_modal.animate({ top: $(window).scrollTop() - $(window).height(), opacity: 1}, 400, 'linear', function(){
  119. print_modal.remove();
  120. $('body').css({overflowY: 'auto', height: 'auto'});
  121. });
  122. mask.fadeOut('slow', function() {
  123. mask.remove();
  124. });
  125. $(document).unbind("keydown.printPreview.mask");
  126. mask.unbind("click.printPreview.mask");
  127. $(window).unbind("resize.printPreview.mask");
  128. },
  129. /* -- Mask Functions --*/
  130. loadMask: function() {
  131. size = $.printPreview.sizeUpMask();
  132. mask = $('<div id="print-modal-mask" />').appendTo($('body'));
  133. mask.css({
  134. position: 'absolute',
  135. top: 0,
  136. left: 0,
  137. width: size[0],
  138. height: size[1],
  139. display: 'none',
  140. opacity: 0,
  141. zIndex: 9999,
  142. backgroundColor: '#000'
  143. });
  144. mask.css({display: 'block'}).fadeTo('400', 0.75);
  145. $(window).bind("resize..printPreview.mask", function() {
  146. $.printPreview.updateMaskSize();
  147. });
  148. mask.bind("click.printPreview.mask", function(e) {
  149. $.printPreview.distroyPrintPreview();
  150. });
  151. $(document).bind("keydown.printPreview.mask", function(e) {
  152. if (e.keyCode == 27) { $.printPreview.distroyPrintPreview(); }
  153. });
  154. },
  155. sizeUpMask: function() {
  156. if ($.browser.msie) {
  157. // if there are no scrollbars then use window.height
  158. var d = $(document).height(), w = $(window).height();
  159. return [
  160. window.innerWidth || // ie7+
  161. document.documentElement.clientWidth || // ie6
  162. document.body.clientWidth, // ie6 quirks mode
  163. d - w < 20 ? w : d
  164. ];
  165. } else { return [$(document).width(), $(document).height()]; }
  166. },
  167. updateMaskSize: function() {
  168. var size = $.printPreview.sizeUpMask();
  169. mask.css({width: size[0], height: size[1]});
  170. }
  171. }
  172. })(jQuery);