簡體   English   中英

jQuery glDatePicker插件無法在IE上正確呈現

[英]jQuery glDatePicker plugin not rendering correctly on IE

我正在使用glDatePicker插件

頁面加載后,日歷被隱藏(帶有右側的框)。 單擊switch-view ,重新渲染和顯示日歷。 Chrome, FF, Safari都可以。 IE ,不是很多。 看起來好像在渲染日歷時, width並未得到應有的應用。

element.style {
  z-index: 1000;
  width: 382px;
  top: 259px;
  left: 766.5px;
  display: block;

IE

在此處輸入圖片說明

如果我在IE 382px寬度更改為382px ,它將按382px顯示。

<article id="events" class="clearfix hidden-xs">
    <header class="clearfix header-title">
        <h2 class="row col-sm-8">Upcoming Events</h2>
        <a href="/resource-center/calendar-of-events" class="arrow-link gray-medium col-sm-4">All Events <span class="glyphicon glyphicon-arrow-right"></span></a>
    </header>
    <div class="row">
        <section class="col-md-6 col-sm-6">
            <div id="calendar"></div>
        </section>
        <aside id="event-description" class="col-md-6  col-sm-6 gray-light">
            <img src="/content/images/events-backsplash.jpg" class="img-responsive" />
            <div id="event-data">
                ....HTML here - not relevant
            </div>
        </aside>
    </div>
</article>

$('#switch-view').click(function (e) {
    var $this = $(this);
    if ($this.hasClass('list-view')) {
        $('#event-description').hide();

        var $cal = $('#calendar').glDatePicker(true);
        $.extend($cal.options, {
            showAlways: false
        });

        $cal.render();
        $cal.hide();

        $('#calendar-list').fadeIn();
        $this.removeClass('list-view').find('span').text('Calendar View');
    }
    else {
        $this.addClass('list-view').find('span').text('List View');
        $('#calendar-list').hide();
        $('#event-description').fadeIn(function () {
            var $cal = $('#calendar').glDatePicker(true);
            $.extend($cal.options, {
                showAlways: true
            });

            $cal.render();
            $cal.show();
        });
    }

    e.preventDefault();
});

我發現我必須extend選項並更改showAlways屬性才能在IE上正確隱藏/顯示。 如果刪除這些內容,則調用$cal.hide()函數時日歷永遠不會隱藏。

您可能以為我可以hide #calendar或它的容器,但是此插件的運行方式是在結尾的<body>標記之前創建了一個全新的<div>並進行了“定位魔術”。

鉻

在此處輸入圖片說明

可能不是為什么這樣做的問題的答案,但是IE 11僅以某種方式沒有在page load正確地收集outerWidth()offSet()方法。

我最后要做的是確定瀏覽器是否實際上是IE 11 ,然后在日歷的初始設置之前將timeout設置為1000ms

如果有人有更好的答案,我很想聽聽。

Apprec!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM