jQuery datepicker; скрытый просмотрщиком PDF в Internet Explorer - PullRequest
Новая
       15

jQuery datepicker; скрытый просмотрщиком PDF в Internet Explorer

3 голосов
/ 17 мая 2011

Что делает моя страница:

Пользователь выбирает отчет, выбирает некоторые параметры и затем нажимает кнопку предварительного просмотра, которая вызывает Crystal Reports для запуска отчета и экспорта результата в 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.Настраиваемый.Css для средства выбора даты, которое я изменил z-index на 10 в 

/* 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)

Любая помощь будетс благодарностью!

...