[英]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.