動態(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)文章
這篇文章介紹了JS實現(xiàn)QQ圖片一閃一閃的效果小例子，有需要的朋友可以參考一下2013-07-07
近幾天在做百度地圖時,需要轉(zhuǎn)換時間格式并做顯示,下面這篇文章主要給大家介紹了關(guān)于js中各種時間格式的轉(zhuǎn)換方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
一文詳解如何在項目中和平時練習(xí)中應(yīng)用es6語法
ES6是JavaScript的一個版本,因為我們前面用到的vue默認(rèn)使用ES6語法開發(fā),所以我們在這一節(jié)補充ES6的知識點,下面這篇文章主要給大家介紹了關(guān)于如何在項目中和平時練習(xí)中應(yīng)用es6語法的相關(guān)資料,需要的朋友可以參考下2022-11-11
在JavaScript中日期時間函數(shù)是一組用于操作和處理日期和時間的函數(shù),這些函數(shù)可以用于獲取當(dāng)前日期和時間、格式化日期和時間、計算日期和時間的差異、轉(zhuǎn)換日期和時間的格式等,這篇文章主要給大家介紹了關(guān)于Javascript日期時間函數(shù)的使用方法,需要的朋友可以參考下2024-02-02
輸入自動提示搜索提示功能的使用說明:sugggestion.txt
該js文件中的代碼實現(xiàn)了[輸入自動搜索提示]功能,如百度、google搜索框中輸入一些字符會以下拉列表形式給出一些提示，提高了用戶體驗2013-09-09
JS常見問題在開發(fā)過程中會經(jīng)常遇到過，本文整理了一些實際開發(fā)中存在的問題，曬出來與大家一起分享，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
JavaScript省市區(qū)三級聯(lián)動菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript省市區(qū)三級聯(lián)動菜單效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
javascript 鼠標(biāo)拖動圖標(biāo)技術(shù)
剛剛學(xué)習(xí)了個js的小技術(shù)，還蠻好玩的，以后會把做的一些小例子貼上來，方便自己也可以跟大家一起分享學(xué)習(xí)成果，哈哈~~2010-02-02
微信小程序?qū)崿F(xiàn)點餐小程序左側(cè)滑動菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點餐小程序左側(cè)滑動菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
想象一下，你把一個重要內(nèi)容放在一個彈出窗口，又不聚集到這個窗口。讓使用屏幕閱讀器的同學(xué)情何以堪，只有當(dāng)他們 tab 到這頁面結(jié)束，還繼續(xù) tab，才可能找到這個彈窗2011-10-10