0

我想显示打印预览,所以我选择使用这个插件

我已将其添加到我的代码中:

<%@ 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>

问题是,当我在中添加脚本时UserControlPrint-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);
4

1 回答 1

0

$('a.print-preview').printPreview() really is not a function, because it doesn't have such.

Try something like:

$('a.print-preview').onClick(printPreview);

于 2012-04-30T08:14:14.483 回答