jQuery 日期选择器；被 Internet Explorer 中的 PDF 查看器隐藏

发布于 2024-11-07 10:45:11 字数 4966 浏览 4 评论 0原文

我的页面的作用：

用户选择一个报告，选择一些参数，然后单击预览按钮，这会调用水晶报告来运行报告并将结果导出为 PDF。我有一个 DIV，它有一个对象标签来显示 PDF 文件。

然后，他们可以设置一个计划来自动运行报告。此计划部分使用日期选择器来选择计划的开始和结束日期。

当显示 PDF（在 IE 中）时，日期选择器被阻止。如果对象显示一个简单的 HTML 文件，则日期选择器会覆盖它。因此，PDF 查看器要求它成为最顶层的元素。

这是我正在使用的一个简单测试：

<html>
    <head>

        <link href="styles/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
        <link href="styles/timepicker.css" rel="stylesheet" type="text/css" />

        <script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
        <script src="scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
        <script src="scripts/jquery-timepicker.js" type="text/javascript"></script>
        <!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.js"></script><![endif]-->

        <script type="text/javascript">

            $(document).ready(function() {
                $('#txtStartDate').datepicker({minDate: new Date()});
                $('#txtEndDate').datepicker({minDate: new Date()});
                $('#txtTime').timepicker();
            });

        </script>        
    </head>
    <body>
        <form id="mainForm">
            <div id="divSchedule" style="z-index:2;font-family:Arial;font-size:8.5pt">
                <table cellpadding="3px" cellspacing="0" style="width:600px;display:block;padding: 0px 3px 0px 0px">
                    <tr><td colspan="7"><div style="width:100%;border-bottom:1px solid #F3C13D;color:#0067AC">Schedule automated report delivery</div></td></tr>
                    <tr>
                        <td><span>Start Date:</span></td>
                        <td><input id="txtStartDate" type="text" style="width:70px"/></td>
                        <td><span>End Date:</span></td>
                        <td><input id="txtEndDate" type="text" style="width:70px"/></td>
                        <td><span>Time:</span></td>
                        <td><input type="text" id="txtTime" style="width:70px"/></td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span>via:</span>
                            <input type="radio" name="rdoScheduleVia" value="Printer">Printer&nbsp;
                            <input type="radio" name="rdoScheduleVia" value="Email">Email
                        </td>
                        <td><span id="lblViaText">Printer Name:</span></td>
                        <td colspan="3"><input id="txtViaText" style="width:235px"/></td>
                        <td> 
                            <input type="button" ID="btnPrinterName"  value="Select Printer" Class="LoginButton" Width="115px" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                             <div style="widht:100%;align:right"><input type="button" ID="btnSaveSchedule"  Class="LoginButton" value="Save" /></div>
                        </td>
                        <td>
                             <input type="button" ID="btnCancel"  Class="LoginButton" value="Cancel" />
                        </td>
                    </tr>
                </table>
            </div>
            <div id="divPDFView" style="z-index:1;height:300px;witdh:400px;border:1px solid blue">
                <object ID="objPrevReport" data="test.pdf" type="application/pdf" style="position:relative;z-index:-1;width:100%;height:100%">
                    alt : <a href="test.pdf">test.pdf</a>
                </object>
            </div>
        </form>
    </body>    
</html>

jQuery-ui-1.8.12 的部分。风俗。我在 Firefox 4 中将 z-index 更改为 10 的日期选择器的 Css

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */

. Ui-datepicker-cover {

    display: none; /*sorry for IE5*/

    display/**/: block; /*sorry for IE5*/

    position: relative; /*must have*/

    z-index: 10; /*must have*/

    filter: mask(); /*must have*/

    top: -4px; /*must have*/

    left: -4px; /*must have*/

    width: 200px; /*must have*/

    height: 200px; /*must have*/

}/*

，加载 IE 使用的相同查看器。日期选择器的下半部分显示有延迟，就好像 FF 正在考虑它然后决定这样做一样。

在 Chrome 中工作（使用它自己的 PDF 查看器）

IE8 和 IE9 在隐藏日期选择器弹出窗口的下半部分中执行相同的操作

此外，无论查看器是 Adobe 还是 PDF-Xchanger（非常好的 PDF 查看器替代品），我都有相同的结果

任何帮助将不胜感激！

原文

What my page does:

The user selects a report, selects some parameters and then click the preview button, which calls crystal reports to run the report and export the result as a PDF. I have a DIV that has an object tag to display the PDF file.

They can then setup a schedule to run the report automatically for them. This schedule section uses the datepicker to select start and end dates for the schedule.

When displaying a PDF (in IE) the datepicker is blocked. If the object displays a simple HTML file the datepicker overlays just fine. So it is something about the PDF viewer that is demanding it be the top most element.

Here is a simple test I am using:

<html>
    <head>

        <link href="styles/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
        <link href="styles/timepicker.css" rel="stylesheet" type="text/css" />

        <script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
        <script src="scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
        <script src="scripts/jquery-timepicker.js" type="text/javascript"></script>
        <!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.js"></script><![endif]-->

        <script type="text/javascript">

            $(document).ready(function() {
                $('#txtStartDate').datepicker({minDate: new Date()});
                $('#txtEndDate').datepicker({minDate: new Date()});
                $('#txtTime').timepicker();
            });

        </script>        
    </head>
    <body>
        <form id="mainForm">
            <div id="divSchedule" style="z-index:2;font-family:Arial;font-size:8.5pt">
                <table cellpadding="3px" cellspacing="0" style="width:600px;display:block;padding: 0px 3px 0px 0px">
                    <tr><td colspan="7"><div style="width:100%;border-bottom:1px solid #F3C13D;color:#0067AC">Schedule automated report delivery</div></td></tr>
                    <tr>
                        <td><span>Start Date:</span></td>
                        <td><input id="txtStartDate" type="text" style="width:70px"/></td>
                        <td><span>End Date:</span></td>
                        <td><input id="txtEndDate" type="text" style="width:70px"/></td>
                        <td><span>Time:</span></td>
                        <td><input type="text" id="txtTime" style="width:70px"/></td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span>via:</span>
                            <input type="radio" name="rdoScheduleVia" value="Printer">Printer 
                            <input type="radio" name="rdoScheduleVia" value="Email">Email
                        </td>
                        <td><span id="lblViaText">Printer Name:</span></td>
                        <td colspan="3"><input id="txtViaText" style="width:235px"/></td>
                        <td> 
                            <input type="button" ID="btnPrinterName"  value="Select Printer" Class="LoginButton" Width="115px" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                             <div style="widht:100%;align:right"><input type="button" ID="btnSaveSchedule"  Class="LoginButton" value="Save" /></div>
                        </td>
                        <td>
                             <input type="button" ID="btnCancel"  Class="LoginButton" value="Cancel" />
                        </td>
                    </tr>
                </table>
            </div>
            <div id="divPDFView" style="z-index:1;height:300px;witdh:400px;border:1px solid blue">
                <object ID="objPrevReport" data="test.pdf" type="application/pdf" style="position:relative;z-index:-1;width:100%;height:100%">
                    alt : <a href="test.pdf">test.pdf</a>
                </object>
            </div>
        </form>
    </body>    
</html>

Section of jQuery-ui-1.8.12. Custom. Css for the datepicker that I changed the z-index to 10 in

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */

. Ui-datepicker-cover {

    display: none; /*sorry for IE5*/

    display/**/: block; /*sorry for IE5*/

    position: relative; /*must have*/

    z-index: 10; /*must have*/

    filter: mask(); /*must have*/

    top: -4px; /*must have*/

    left: -4px; /*must have*/

    width: 200px; /*must have*/

    height: 200px; /*must have*/

}/*

This works in Firefox 4, loading the same viewer that IE uses. There is a delay displaying the lower part of the datepicker as if FF is thinking about it and then decides to do it.

Works in Chrome (uses it's own PDF viewer)

IE8 and IE9 do the same thing in hiding the lower part of the datepicker popup

Also I have the same result whether the viewer is Adobe or PDF-Xchanger (really nice PDF viewer alternative)

Any assistance would be greatly appreciated!

分享到QQ

分享到微博