動態(tài)加載圖片路徑 保持JavaScript控件的相對獨立性
更新時間：2010年09月03日 15:36:41 作者：
根據(jù)新界面的要求，需要一部分圖片來增強日期控件的美觀性?？紤]到既要實現(xiàn)加載圖表的目標(biāo)，又要保持控件的獨立性以便將來的移植。
當(dāng)時考慮有三種方法：
1.直接把路徑寫在js文件里，但如果引用頁面路徑層級改變就沒轍了。
2.寫個class，放在主題包里的css文件或者單獨創(chuàng)建一個css文件給日期控件專用。但是控件中的其他元素并沒有使用class的需要，單獨建立相應(yīng)css文檔似乎小題大做。
3.把以上兩個方法排除后，自然要采用動態(tài)加載圖片路徑的方法咯。
關(guān)鍵代碼如下：
//創(chuàng)建一個全局變量保存路徑
var imgRootUrl = "";
//獲取圖片路徑所在目錄
var strPath=window.document.location.pathname; //獲取主機地址之后的目錄部分
var thisUrlCount = strPath.split('/');
var hierarchyOfFolders = thisUrlCount.length-2;//獲取目錄層級
for(iRoot=0;iRoot<hierarchyOfFolders;iRoot++)
{
imgRootUrl +="../";
}
imgRootUrl +="Images/"; //這個Images其實也可設(shè)為參數(shù)，由于所有項目圖片文件夾命名固定，所以沒有設(shè)立參數(shù)，但仍然保存可擴展性。
加圖后，控件效果是相當(dāng)美觀了：
順便附上所有window.document.location其下屬性：
document.location.hash // #號后的部分 VS window.location.hash
document.location.host // 域名+端口號
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目錄部分(應(yīng)用程序)
document.location.port // 端口號
document.location.protocol // 網(wǎng)絡(luò)協(xié)議(http:)
document.location.search // ?號后的部分
1.直接把路徑寫在js文件里，但如果引用頁面路徑層級改變就沒轍了。
2.寫個class，放在主題包里的css文件或者單獨創(chuàng)建一個css文件給日期控件專用。但是控件中的其他元素并沒有使用class的需要，單獨建立相應(yīng)css文檔似乎小題大做。
3.把以上兩個方法排除后，自然要采用動態(tài)加載圖片路徑的方法咯。
關(guān)鍵代碼如下：
復(fù)制代碼 代碼如下:
//創(chuàng)建一個全局變量保存路徑
var imgRootUrl = "";
//獲取圖片路徑所在目錄
var strPath=window.document.location.pathname; //獲取主機地址之后的目錄部分
var thisUrlCount = strPath.split('/');
var hierarchyOfFolders = thisUrlCount.length-2;//獲取目錄層級
for(iRoot=0;iRoot<hierarchyOfFolders;iRoot++)
{
imgRootUrl +="../";
}
imgRootUrl +="Images/"; //這個Images其實也可設(shè)為參數(shù)，由于所有項目圖片文件夾命名固定，所以沒有設(shè)立參數(shù)，但仍然保存可擴展性。
加圖后，控件效果是相當(dāng)美觀了：
順便附上所有window.document.location其下屬性：
document.location.hash // #號后的部分 VS window.location.hash
document.location.host // 域名+端口號
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目錄部分(應(yīng)用程序)
document.location.port // 端口號
document.location.protocol // 網(wǎng)絡(luò)協(xié)議(http:)
document.location.search // ?號后的部分
相關(guān)文章
使用 JavaScript 創(chuàng)建并下載文件(模擬點擊)
本文將介紹如何使用 JavaScript 創(chuàng)建文件，并自動/手動將文件下載，這在導(dǎo)出原始數(shù)據(jù)時會比較方便2019-10-10
本篇文章主要介紹了JS數(shù)組交集、并集、差集的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
2008年有啊第一次性能優(yōu)化時，我們曾用textarea來存貯需要懶惰渲染的節(jié)點2012-01-01
JavaScript 小型打飛機游戲?qū)崿F(xiàn)原理說明
這次為大家?guī)淼男∮螒蚴牵捍蝻w機。呃。。。我本人就寫不出什么驚天大作的游戲的了，只能寫寫小游戲，代碼量小，又可以學(xué)習(xí)，主要是想法思路，代碼量大，估計也沒啥人會去研究學(xué)習(xí)。。。2010-10-10
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)手機web圖片左右滑動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
全面兼容的javascript時間格式化函數(shù)(比較實用)
這篇文章主要介紹了全面兼容比較實用的javascript時間格式化函數(shù),需要的朋友可以參考下2014-05-05
用JavaScript來美化HTML的select標(biāo)簽的下拉列表效果
這篇文章主要介紹了用JavaScript來美化HTML的select標(biāo)簽的下拉列表效果的方法,而且在多瀏覽器下的兼容效果也得到提升,需要的朋友可以參考下2015-11-11
本篇文章主要介紹了js輪播圖透明度切換（帶上下頁和底部圓點切換）的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了理解JavaScript中的狀態(tài)模式及適配器模式,適配器模式即Adapter Pattern，是作為兩個不兼容的接口之間的橋梁。這種類型的設(shè)計模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-12-12
JavaScript使用function定義對象并調(diào)用的方法
這篇文章主要介紹了JavaScript使用function定義對象并調(diào)用的方法,實例分析了javascript中function定義及使用對象與方法的相關(guān)技巧,需要的朋友可以參考下2015-03-03