在css加載完畢后自動(dòng)判斷頁(yè)面是否加入css或js文件
更新時(shí)間：2014年09月10日 17:17:55 投稿：whsnow
使用jquery ui中的dialog()來(lái)顯示消息框，為了使方法方便調(diào)用，便加入了自動(dòng)判斷頁(yè)面是否加入了ui.js和ui.css，具體實(shí)現(xiàn)代碼如下
最近在寫(xiě)項(xiàng)目的framework，寫(xiě)個(gè)JQueryMessageBox的類，以使用jquery ui中的dialog()來(lái)顯示消息框，為了使方法方便調(diào)用，便加入了自動(dòng)判斷頁(yè)面是否加入了ui.js和ui.css,代碼如下：
//如果沒(méi)有包含ui.js,則引用
if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{
$(""<script src='/js/jquery-ui-1.8.11.custom.min.js' type='text/javascript' />"").appendTo('head');
}}
//如果沒(méi)有加載css,則加載
if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {{
$('<link href=""/css/jquery-ui-1.8.14.custom.css"" rel=""stylesheet"" type=""text/css"" />').appendTo('head');
//dialog() script
}}
但CSS代碼不會(huì)立即加載下來(lái)，于是在顯示dialog的時(shí)候則不會(huì)有樣式（在IE9下可以，因?yàn)樵贗E9下CSS即使后下載下來(lái)，也會(huì)重新繪制頁(yè)面元素，而IE8則不會(huì)）.解決此問(wèn)題的方法，可以使用ajax，當(dāng)css加載完畢后，再顯示dialog，這樣就可以帶著樣式顯示出來(lái)了，代碼如下：
if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {
$.ajax({
url: '/css/jquery-ui-1.8.14.custom.css',
success: function(data) {
//創(chuàng)建一個(gè)style元素，并追加到head中
//替換其中images的路徑
$('<style type="text/css">' + data.replace(/url\(images/g, 'url(/css/images') + '</style>').appendTo('head');
//dialog() script;
}
});
}
else {
//dialog() script;
}
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jQuery創(chuàng)建折疊式菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
jquery的相對(duì)父元素和相對(duì)文檔定位示例代碼
在開(kāi)發(fā)jquery時(shí)候經(jīng)常需要用到定位,有相對(duì)父元素定位和相對(duì)文檔定位，本文為此總結(jié)下，有需要的朋友可以參考下2013-08-08
jquery 表單驗(yàn)證之通過(guò) class驗(yàn)證表單不為空
在開(kāi)發(fā)系統(tǒng)時(shí)，往往都有某些表單數(shù)據(jù)為必填項(xiàng)，若用jQuery通過(guò)ID去驗(yàn)證，不僅會(huì)影響效率，還會(huì)有所遺漏，不易于后期維護(hù)。 本章將介紹如何利用jQuery，通過(guò)為表單配置class進(jìn)行統(tǒng)一驗(yàn)證。2015-11-11
jQuery easyui的validatebox校驗(yàn)規(guī)則擴(kuò)展及easyui校驗(yàn)框validatebox用法
這篇文章主要介紹了jQuery easyui的validatebox校驗(yàn)規(guī)則擴(kuò)展及easyui校驗(yàn)框validatebox用法的相關(guān)資料,需要的朋友可以參考下2016-01-01
如何基于jQuery實(shí)現(xiàn)五角星評(píng)分
這篇文章主要介紹了如何基于jQuery實(shí)現(xiàn)五角星評(píng)分,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
animate用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)，這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫(huà)形式及結(jié)果樣式屬性對(duì)象，接下來(lái)為大家介紹下它的使用方法，感興趣的朋友可以參考下哈2013-03-03
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-04-04
默認(rèn)設(shè)置下，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行2011-10-10
這篇文章主要介紹了JQuery EasyUI 數(shù)字格式化處理方法,需要的朋友可以參考下2014-05-05
jQuery實(shí)現(xiàn)可編輯的表格實(shí)例講解（2）
這篇文章主要內(nèi)容是JQuery實(shí)現(xiàn)可編輯的表格實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-09-09