jquery UI Datepicker時(shí)間控件沖突問(wèn)題解決
公司里的項(xiàng)目由于發(fā)展較快,很多東西都沒(méi)有好好梳理一下,以至于有很多的潛在的問(wèn)題。
最近就遇到了一個(gè)比較坑的問(wèn)題。datepicker
有兩個(gè)插件庫(kù)中的datepicker插件比較有名。一個(gè)是jQuery-UI,一個(gè)是bootstrap。兩個(gè)的api網(wǎng)址分別是
然而在項(xiàng)目中很不巧的兩個(gè)庫(kù)都用到了。然后就出現(xiàn)了以下情況:http://jqueryui.com/datepicker/ 和 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html
平時(shí)根本不知道我自己用的到底是哪個(gè)組件。
主要的問(wèn)題是,要是你們兩個(gè)組件能一樣的話,我也就沒(méi)什么問(wèn)題了。兩個(gè)組件在各種細(xì)節(jié)處完全不同。
這次的問(wèn)題是 我的datepicker框被遮住了,具體如下圖(上面的年份切換不見(jiàn)了):
找了一下發(fā)現(xiàn)是在渲染組件的時(shí)候,給自動(dòng)的加上了z-index:10,然后就被上面fixed的頂部條給遮住了。然而這種情況并不是必現(xiàn)的,在每個(gè)人電腦上出現(xiàn)的情況不同,在我看來(lái)就是先加載的是誰(shuí)的組件造成的。(按理來(lái)說(shuō)項(xiàng)目打包后是按照index.html文件中引用的順序排的,應(yīng)該也是相同的調(diào)用順序,但是就是在一部分電腦上會(huì)出現(xiàn)順序反過(guò)來(lái)。有大神能解答么?)
于是為了確定加載的是哪個(gè),我寫(xiě)了下面的代碼進(jìn)行試驗(yàn):
// 初始化日期控件 var $buyDate = $("input#abc"); var buyDateDatepicker = $buyDate.datepicker({ language: "zh-CN", format: "yyyymm", minViewMode: "months", autoclose: true, onSelect: function() { console.log("a"); }, onClose: function() { console.log("b"); } }); $buyDate.on("show", function() { $(".datepicker.datepicker-dropdown.dropdown-menu").css("z-index", 1000); });
這其中大多數(shù)都是公用的,其中onSelect、onClose是jQuery-UI的,on綁定的show事件是bootstrap的。
但是跑了一下之后,讓我比較吃驚,一個(gè)都沒(méi)有執(zhí)行,全都沒(méi)有用。然后靜下來(lái)仔細(xì)考慮了一下,應(yīng)該是這樣。
1、先執(zhí)行的是bootstrap的組件,先渲染了一遍。
2、然后又讓jQuery-UI渲染了一遍,但是并沒(méi)有覆蓋之前的組件。
3、再執(zhí)行了show事件的綁定。然而這個(gè)時(shí)候被jQuery-UI重新渲染過(guò)了,是讀取不到監(jiān)聽(tīng)事件的,隨意也失效了。
我估計(jì),在別人的電腦上,情況反了過(guò)來(lái),他們先執(zhí)行的是jQuery-UI的組件就是可以的。
我在網(wǎng)上都沒(méi)有查到過(guò)其他的人寫(xiě)過(guò)相關(guān)的沖突的情況。有沒(méi)有人遇到過(guò),提供一下坑。以后避免踩坑。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Laravel admin實(shí)現(xiàn)消息提醒、播放音頻功能
這篇文章主要介紹了Laravel admin實(shí)現(xiàn)消息提醒、播放音頻功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07jQuery+Ajax+js實(shí)現(xiàn)請(qǐng)求json格式數(shù)據(jù)并渲染到html頁(yè)面操作示例
這篇文章主要介紹了jQuery+Ajax+js實(shí)現(xiàn)請(qǐng)求json格式數(shù)據(jù)并渲染到html頁(yè)面操作,結(jié)合實(shí)例形式分析了jQuery+Ajax請(qǐng)求json格式數(shù)據(jù)并渲染到html頁(yè)面相關(guān)步驟與操作技巧,需要的朋友可以參考下2020-06-06jQuery插件HighCharts繪制簡(jiǎn)單2D折線圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡(jiǎn)單2D折線圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制折線圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03JQuery通過(guò)AJAX從后臺(tái)獲取信息顯示在表格上并支持行選中
這篇文章主要介紹了JQuery通過(guò)AJAX從后臺(tái)獲取信息顯示在表格上并支持行選中的相關(guān)資料,需要的朋友可以參考下2015-09-09jquery網(wǎng)頁(yè)日歷顯示控件calendar3.1使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery網(wǎng)頁(yè)日歷顯示控件calendar3.1使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11騰訊與新浪的通過(guò)IP地址獲取當(dāng)前地理位置(省份)的接口
通過(guò)IP地址獲取當(dāng)前地理位置(省份)的接口,方便大家可以直接使用結(jié)合自己的系統(tǒng)。2010-07-07jQuery學(xué)習(xí)筆記之Ajax用法實(shí)例詳解
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之Ajax用法,結(jié)合實(shí)例形式較為詳細(xì)的分析總結(jié)了jQuery中ajax的相關(guān)使用技巧,包括ajax請(qǐng)求、載入、處理、傳遞等,需要的朋友可以參考下2015-12-12

使用jquery的jsonp如何發(fā)起跨域請(qǐng)求及其原理詳解