Question

我的页面的作用：

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

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

当显示PDF（在IE中）时，日期选择器被阻止。如果对象显示一个简单的HTML文件，则datepicker覆盖就好了。因此，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的一节。自定义。我在

中将z-index更改为10的datepicker的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*/

}/*

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

适用于Chrome（使用自己的PDF查看器）

IE8和IE9在隐藏datepicker弹出窗口的下半部分时做了同样的事情

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

非常感谢任何帮助！

jQuery datepicker;在Internet Explorer中由PDF Viewer隐藏

0 个答案: