動態(tài)加載圖片路徑 保持JavaScript控件的相對獨立性
更新時間：2010年09月06日 12:07:45 作者：
根據(jù)新界面的要求，需要一部分圖片來增強日期控件的美觀性?？紤]到既要實現(xiàn)加載圖表的目標，又要保持控件的獨立性以便將來的移植。
當時考慮有三種方法：
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ù)，但仍然保存可擴展性。
加圖后，控件效果是相當美觀了：
順便附上所有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)鍵代碼如下：
復制代碼 代碼如下:
//創(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ù)，但仍然保存可擴展性。
加圖后，控件效果是相當美觀了：
順便附上所有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 實現(xiàn)簡單的table排序及table操作練習
在這個列子中，練習了table的操作，主要有：tBodies、rows、cells，還有有關(guān)數(shù)組的排序方法：sort,按興趣的朋友可以研究下2012-12-12
利用webpack理解CommonJS和ES Modules的差異區(qū)別
這篇文章主要介紹了利用webpack理解CommonJS和ES Modules的差異區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要給大家介紹了關(guān)于ES7中javascript修飾器的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用ES7具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
這篇文章主要介紹了JS對象與json字符串格式轉(zhuǎn)換方法,以實例的形式詳細講述了js對象與json字符串格式轉(zhuǎn)換的技巧,需要的朋友可以參考下2014-10-10
根據(jù)經(jīng)緯度計算地球上兩點之間的距離js實現(xiàn)代碼
最近用到了根據(jù)經(jīng)緯度計算地球表面兩點間距離的公式，然后就用JS實現(xiàn)了一下，根據(jù)地球是一個光滑的球面以及并不是一個真正的圓球體，而是橢球延伸出兩種方法，感興趣的你可以參考下2013-03-03
angular bootstrap timepicker TypeError提示怎么辦
這篇文章主要介紹了angular bootstrap timepicker TypeError提示的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
基于JavaScript FileReader上傳圖片顯示本地鏈接
這篇文章主要為大家詳細介紹了基于JavaScript FileReader上傳圖片顯示本地鏈接的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
什么是閉包呢？閉包就是函數(shù)實例執(zhí)行過程中動態(tài)產(chǎn)生一個沒有被釋放資源的棧區(qū)，也是一個預執(zhí)行的過程。2011-01-01
JavaScript中全局變量、函數(shù)內(nèi)變量以及常量表達式的效率測試
直接用字符串常量要比利用全局變量快，但創(chuàng)建正則表達式就比起用全局變量要慢上很多了。2009-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)前端界面導航欄下拉列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08