動(dòng)態(tài)加載圖片路徑 保持JavaScript控件的相對(duì)獨(dú)立性
更新時(shí)間：2010年09月06日 12:07:45 作者：
根據(jù)新界面的要求，需要一部分圖片來(lái)增強(qiáng)日期控件的美觀性。考慮到既要實(shí)現(xiàn)加載圖表的目標(biāo)，又要保持控件的獨(dú)立性以便將來(lái)的移植。
當(dāng)時(shí)考慮有三種方法：
1.直接把路徑寫(xiě)在js文件里，但如果引用頁(yè)面路徑層級(jí)改變就沒(méi)轍了。
2.寫(xiě)個(gè)class，放在主題包里的css文件或者單獨(dú)創(chuàng)建一個(gè)css文件給日期控件專(zhuān)用。但是控件中的其他元素并沒(méi)有使用class的需要，單獨(dú)建立相應(yīng)css文檔似乎小題大做。
3.把以上兩個(gè)方法排除后，自然要采用動(dòng)態(tài)加載圖片路徑的方法咯。
關(guān)鍵代碼如下：
//創(chuàng)建一個(gè)全局變量保存路徑
var imgRootUrl = "";
//獲取圖片路徑所在目錄
var strPath=window.document.location.pathname; //獲取主機(jī)地址之后的目錄部分
var thisUrlCount = strPath.split('/');
var hierarchyOfFolders = thisUrlCount.length-2;//獲取目錄層級(jí)
for(iRoot=0;iRoot<hierarchyOfFolders;iRoot++)
{
imgRootUrl +="../";
}
imgRootUrl +="Images/"; //這個(gè)Images其實(shí)也可設(shè)為參數(shù)，由于所有項(xiàng)目圖片文件夾命名固定，所以沒(méi)有設(shè)立參數(shù)，但仍然保存可擴(kuò)展性。
加圖后，控件效果是相當(dāng)美觀了：
順便附上所有window.document.location其下屬性：
document.location.hash // #號(hào)后的部分 VS window.location.hash
document.location.host // 域名+端口號(hào)
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目錄部分(應(yīng)用程序)
document.location.port // 端口號(hào)
document.location.protocol // 網(wǎng)絡(luò)協(xié)議(http:)
document.location.search // ?號(hào)后的部分
1.直接把路徑寫(xiě)在js文件里，但如果引用頁(yè)面路徑層級(jí)改變就沒(méi)轍了。
2.寫(xiě)個(gè)class，放在主題包里的css文件或者單獨(dú)創(chuàng)建一個(gè)css文件給日期控件專(zhuān)用。但是控件中的其他元素并沒(méi)有使用class的需要，單獨(dú)建立相應(yīng)css文檔似乎小題大做。
3.把以上兩個(gè)方法排除后，自然要采用動(dòng)態(tài)加載圖片路徑的方法咯。
關(guān)鍵代碼如下：
復(fù)制代碼 代碼如下:
//創(chuàng)建一個(gè)全局變量保存路徑
var imgRootUrl = "";
//獲取圖片路徑所在目錄
var strPath=window.document.location.pathname; //獲取主機(jī)地址之后的目錄部分
var thisUrlCount = strPath.split('/');
var hierarchyOfFolders = thisUrlCount.length-2;//獲取目錄層級(jí)
for(iRoot=0;iRoot<hierarchyOfFolders;iRoot++)
{
imgRootUrl +="../";
}
imgRootUrl +="Images/"; //這個(gè)Images其實(shí)也可設(shè)為參數(shù)，由于所有項(xiàng)目圖片文件夾命名固定，所以沒(méi)有設(shè)立參數(shù)，但仍然保存可擴(kuò)展性。
加圖后，控件效果是相當(dāng)美觀了：
順便附上所有window.document.location其下屬性：
document.location.hash // #號(hào)后的部分 VS window.location.hash
document.location.host // 域名+端口號(hào)
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目錄部分(應(yīng)用程序)
document.location.port // 端口號(hào)
document.location.protocol // 網(wǎng)絡(luò)協(xié)議(http:)
document.location.search // ?號(hào)后的部分
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了JS實(shí)現(xiàn)圖片局部放大或縮小的方法,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
JavaScript插件化開(kāi)發(fā)教程 （二）
本系列的開(kāi)篇文章我們一起探討了jQuery如何開(kāi)發(fā)插件，今天這篇文章，我們來(lái)繼續(xù)插件開(kāi)發(fā)之旅，希望大家能夠喜歡。2015-01-01
js滾動(dòng)條回到頂部的代碼，里面的js代碼比較簡(jiǎn)單，很適合學(xué)習(xí)。2011-12-12
JavaScript 函數(shù)節(jié)流詳解及方法總結(jié)
這篇文章主要介紹了JavaScript 函數(shù)節(jié)流詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
JS采用絕對(duì)定位實(shí)現(xiàn)回到頂部效果完整實(shí)例
這篇文章主要介紹了JS采用絕對(duì)定位實(shí)現(xiàn)回到頂部效果,以完整實(shí)例形式分析了JS定位到頁(yè)面頂部功能的實(shí)現(xiàn)方法,涉及javascript動(dòng)態(tài)操作頁(yè)面元素與屬性的相關(guān)技巧,需要的朋友可以參考下2016-06-06
js數(shù)組反轉(zhuǎn)的幾種常見(jiàn)方法舉例
最近學(xué)到了數(shù)組的使用方法,給大家分享一下,這篇文章主要給大家介紹了關(guān)于js數(shù)組反轉(zhuǎn)的幾種常見(jiàn)方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Javascript 數(shù)組去重的方法（四種）詳解及實(shí)例代碼
這篇文章主要介紹了Javascript 數(shù)組去重的方法（四種）詳解及實(shí)例代碼的相關(guān)資料,這里對(duì)四種去重方法進(jìn)行了詳細(xì)介紹，并附代碼實(shí)例，需要的朋友可以參考下2016-11-11
JavaScript中調(diào)用函數(shù)的4種方式代碼實(shí)例
這篇文章主要介紹了JavaScript中調(diào)用函數(shù)的4種方式代碼實(shí)例,本文分別給出方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造器調(diào)用模式、apply調(diào)用模式4種方式的代碼實(shí)例,需要的朋友可以參考下2015-07-07
利用Javascript實(shí)現(xiàn)BMI計(jì)算器
BMI指數(shù)計(jì)算器相信大家都用過(guò)，那用JavaScript怎么實(shí)現(xiàn)呢？其實(shí)很簡(jiǎn)單，這篇文章給出了實(shí)例代碼，有需要的可以參考學(xué)習(xí)。2016-08-08
詳解webpack3如何正確引用并使用jQuery庫(kù)
本篇文章主要介紹了詳解webpack3如何正確引用并使用jQuery庫(kù)，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08