動態(tài)加載圖片路徑 保持JavaScript控件的相對獨立性
更新時間：2010年09月06日 12:07:45 作者：
根據(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)文章
這篇文章主要介紹了JS實現(xiàn)圖片局部放大或縮小的方法,涉及javascript事件響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
本系列的開篇文章我們一起探討了jQuery如何開發(fā)插件，今天這篇文章，我們來繼續(xù)插件開發(fā)之旅，希望大家能夠喜歡。2015-01-01
js滾動條回到頂部的代碼，里面的js代碼比較簡單，很適合學(xué)習(xí)。2011-12-12
JavaScript 函數(shù)節(jié)流詳解及方法總結(jié)
這篇文章主要介紹了JavaScript 函數(shù)節(jié)流詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS采用絕對定位實現(xiàn)回到頂部效果,以完整實例形式分析了JS定位到頁面頂部功能的實現(xiàn)方法,涉及javascript動態(tài)操作頁面元素與屬性的相關(guān)技巧,需要的朋友可以參考下2016-06-06
最近學(xué)到了數(shù)組的使用方法,給大家分享一下,這篇文章主要給大家介紹了關(guān)于js數(shù)組反轉(zhuǎn)的幾種常見方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
Javascript 數(shù)組去重的方法（四種）詳解及實例代碼
這篇文章主要介紹了Javascript 數(shù)組去重的方法（四種）詳解及實例代碼的相關(guān)資料,這里對四種去重方法進行了詳細介紹，并附代碼實例，需要的朋友可以參考下2016-11-11
JavaScript中調(diào)用函數(shù)的4種方式代碼實例
這篇文章主要介紹了JavaScript中調(diào)用函數(shù)的4種方式代碼實例,本文分別給出方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造器調(diào)用模式、apply調(diào)用模式4種方式的代碼實例,需要的朋友可以參考下2015-07-07
BMI指數(shù)計算器相信大家都用過，那用JavaScript怎么實現(xiàn)呢？其實很簡單，這篇文章給出了實例代碼，有需要的可以參考學(xué)習(xí)。2016-08-08
本篇文章主要介紹了詳解webpack3如何正確引用并使用jQuery庫，具有一定的參考價值，有興趣的可以了解一下2017-08-08