jquery.print-preview.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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. $.fn.printPreview = function () {
  12. this.each(function () {
  13. $(this).bind('click',
  14. function (e) {
  15. e.preventDefault();
  16. if (!$('#print-modal').length) {
  17. $.printPreview.loadPrintPreview();
  18. }
  19. });
  20. });
  21. return this;
  22. };
  23. var mask, size, print_modal, print_controls;
  24. $.printPreview = {
  25. loadPrintPreview: function () {
  26. print_modal = $('<div id="print-modal"></div>');
  27. 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();
  28. var print_frame = $('<iframe id="print-modal-content" scrolling="no" border="0" frameborder="0" name="print-frame" />');
  29. print_modal.hide().append(print_controls).append(print_frame).appendTo('body');
  30. for (var i = 0; i < window.frames.length; i++) {
  31. if (window.frames[i].name == "print-frame") {
  32. var print_frame_ref = window.frames[i].document;
  33. break;
  34. }
  35. }
  36. print_frame_ref.open();
  37. 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>');
  38. print_frame_ref.close();
  39. var $iframe_head = $('head link[media*=print], head link[media=all]').clone(),
  40. $iframe_body = $('body > *:not(#print-modal):not(script)').clone();
  41. $iframe_head.each(function () {
  42. $(this).attr('media', 'all');
  43. });
  44. if (!$.browser.msie && !($.browser.version < 7)) {
  45. $('head', print_frame_ref).append($iframe_head);
  46. $('body', print_frame_ref).append($iframe_body);
  47. } else {
  48. $('body > *:not(#print-modal):not(script)').clone().each(function () {
  49. $('body', print_frame_ref).append(this.outerHTML);
  50. });
  51. $('head link[media*=print], head link[media=all]').each(function () {
  52. $('head', print_frame_ref).append($(this).clone().attr('media', 'all')[0].outerHTML);
  53. });
  54. }
  55. $('a', print_frame_ref).bind('click.printPreview',
  56. function (e) {
  57. e.preventDefault();
  58. });
  59. $('head').append('<style type="text/css">' + '@media print {' + '/* -- Print Preview --*/' + '#print-modal-mask,' + '#print-modal {' + 'display: none !important;' + '}' + '}' + '</style>');
  60. $.printPreview.loadMask();
  61. $('body').css({
  62. overflowY: 'hidden',
  63. height: '100%'
  64. });
  65. $('img', print_frame_ref).load(function () {
  66. print_frame.height($('body', print_frame.contents())[0].scrollHeight);
  67. });
  68. starting_position = $(window).height() + $(window).scrollTop();
  69. var css = {
  70. top: starting_position,
  71. height: '100%',
  72. overflowY: 'auto',
  73. zIndex: 10000,
  74. display: 'block'
  75. }
  76. print_modal.css(css).animate({
  77. top: $(window).scrollTop()
  78. },
  79. 400, 'linear',
  80. function () {
  81. print_controls.fadeIn('slow').focus();
  82. });
  83. print_frame.height($('body', print_frame.contents())[0].scrollHeight);
  84. $('a', print_controls).bind('click',
  85. function (e) {
  86. e.preventDefault();
  87. if ($(this).hasClass('print')) {
  88. window.print();
  89. } else {
  90. $.printPreview.distroyPrintPreview();
  91. }
  92. });
  93. },
  94. distroyPrintPreview: function () {
  95. print_controls.fadeOut(100);
  96. print_modal.animate({
  97. top: $(window).scrollTop() - $(window).height(),
  98. opacity: 1
  99. },
  100. 400, 'linear',
  101. function () {
  102. print_modal.remove();
  103. $('body').css({
  104. overflowY: 'auto',
  105. height: 'auto'
  106. });
  107. });
  108. mask.fadeOut('slow',
  109. function () {
  110. mask.remove();
  111. });
  112. $(document).unbind("keydown.printPreview.mask");
  113. mask.unbind("click.printPreview.mask");
  114. $(window).unbind("resize.printPreview.mask");
  115. },
  116. loadMask: function () {
  117. size = $.printPreview.sizeUpMask();
  118. mask = $('<div id="print-modal-mask" />').appendTo($('body'));
  119. mask.css({
  120. position: 'absolute',
  121. top: 0,
  122. left: 0,
  123. width: size[0],
  124. height: size[1],
  125. display: 'none',
  126. opacity: 0,
  127. zIndex: 9999,
  128. backgroundColor: '#000'
  129. });
  130. mask.css({
  131. display: 'block'
  132. }).fadeTo('400', 0.75);
  133. $(window).bind("resize..printPreview.mask",
  134. function () {
  135. $.printPreview.updateMaskSize();
  136. });
  137. mask.bind("click.printPreview.mask",
  138. function (e) {
  139. $.printPreview.distroyPrintPreview();
  140. });
  141. $(document).bind("keydown.printPreview.mask",
  142. function (e) {
  143. if (e.keyCode == 27) {
  144. $.printPreview.distroyPrintPreview();
  145. }
  146. });
  147. },
  148. sizeUpMask: function () {
  149. if ($.browser.msie) {
  150. var d = $(document).height(),
  151. w = $(window).height();
  152. return [window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, d - w < 20 ? w : d];
  153. } else {
  154. return [$(document).width(), $(document).height()];
  155. }
  156. },
  157. updateMaskSize: function () {
  158. var size = $.printPreview.sizeUpMask();
  159. mask.css({
  160. width: size[0],
  161. height: size[1]
  162. });
  163. }
  164. }
  165. })(jQuery);