2011年5月10日 星期二

jQuery UI datepicker 1.8.12 顯示問題

jQuery datepicker 1.8.12 使用發現一個問題 就是 z-index 每次都會被自動設成 1,如果畫面上有 z-index 大於1的,就有可能被蓋住。

解決方法:一種是設一個很大的數字,另一方式,就是找出目前頁面中z-index 最大的element 然後再設比它大一點。
看起來後者是比較完善的解決方法。要做到此點,請參考下列步驟:



setp 1:
定一義一個 jQuery function 此function 的作用是讓呼叫該function的element z-index 設為目前頁面中z-index最的那個元素再加 10
$.maxZIndex = $.fn.maxZIndex = function(opt) {
    /// 
    /// Returns the max zOrder in the document (no parameter)
    /// Sets max zOrder by passing a non-zero number
    /// which gets added to the highest zOrder.
    ///     
    /// /// inc: increment value, 
    /// group: selector for zIndex elements to find max for
    /// /// 
    var def = { inc: 10, group: "*" };
    $.extend(def, opt);
    var zmax = 0;
    $(def.group).each(function() {
        var cur = parseInt($(this).css('z-index'));
        zmax = cur > zmax ? cur : zmax;
    });
    if (!this.jquery)
        return zmax;

    return this.each(function() {
        zmax += def.inc;
        $(this).css("z-index", zmax);
    });
}
step2:
把 datapicker 中的 ,
inst.dpDiv.zIndex($(input).zIndex()+1);
行mark 掉, 這一行就是造成 calendar 的z-index 總是在一的原兇(至少在 1.8.12 還是這樣)

step3:
在beforeShow 加上 設定此datepicker 為最大z-index 的設定
jQuery('#txtDate').datepicker({ 
    showButtonPanel: true, 
    showOn: 'button', 
    buttonImageOnly: true, 
    buttonImage: '/wconnect/images/calendar.gif', 
    beforeShow: function() {$('#ui-datepicker-div').maxZIndex(); },
    dateFormat: 'mm/dd/yy' }).attachDatepickerInputKeys();
  });

reference :
http://www.west-wind.com/weblog/posts/2009/Sep/12/jQuery-UI-Datepicker-and-zIndex
http://forum.jquery.com/topic/z-index-1-datepicker-1-8

沒有留言: