動(dòng)態(tài)加載圖片路徑 保持JavaScript控件的相對(duì)獨(dú)立性
更新時(shí)間：2010年09月03日 15:36:41 作者：
根據(jù)新界面的要求，需要一部分圖片來增強(qiáng)日期控件的美觀性?？紤]到既要實(shí)現(xiàn)加載圖表的目標(biāo)，又要保持控件的獨(dú)立性以便將來的移植。
當(dāng)時(shí)考慮有三種方法：
1.直接把路徑寫在js文件里，但如果引用頁面路徑層級(jí)改變就沒轍了。
2.寫個(gè)class，放在主題包里的css文件或者單獨(dú)創(chuàng)建一個(gè)css文件給日期控件專用。但是控件中的其他元素并沒有使用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)目圖片文件夾命名固定，所以沒有設(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.直接把路徑寫在js文件里，但如果引用頁面路徑層級(jí)改變就沒轍了。
2.寫個(gè)class，放在主題包里的css文件或者單獨(dú)創(chuàng)建一個(gè)css文件給日期控件專用。但是控件中的其他元素并沒有使用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)目圖片文件夾命名固定，所以沒有設(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)QQ圖片一閃一閃的效果小例子，有需要的朋友可以參考一下2013-07-07
近幾天在做百度地圖時(shí),需要轉(zhuǎn)換時(shí)間格式并做顯示,下面這篇文章主要給大家介紹了關(guān)于js中各種時(shí)間格式的轉(zhuǎn)換方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
一文詳解如何在項(xiàng)目中和平時(shí)練習(xí)中應(yīng)用es6語法
ES6是JavaScript的一個(gè)版本,因?yàn)槲覀兦懊嬗玫降膙ue默認(rèn)使用ES6語法開發(fā),所以我們?cè)谶@一節(jié)補(bǔ)充ES6的知識(shí)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于如何在項(xiàng)目中和平時(shí)練習(xí)中應(yīng)用es6語法的相關(guān)資料,需要的朋友可以參考下2022-11-11
Javascript日期時(shí)間函數(shù)的使用方法舉例
在JavaScript中日期時(shí)間函數(shù)是一組用于操作和處理日期和時(shí)間的函數(shù),這些函數(shù)可以用于獲取當(dāng)前日期和時(shí)間、格式化日期和時(shí)間、計(jì)算日期和時(shí)間的差異、轉(zhuǎn)換日期和時(shí)間的格式等,這篇文章主要給大家介紹了關(guān)于Javascript日期時(shí)間函數(shù)的使用方法,需要的朋友可以參考下2024-02-02
輸入自動(dòng)提示搜索提示功能的使用說明:sugggestion.txt
該js文件中的代碼實(shí)現(xiàn)了[輸入自動(dòng)搜索提示]功能,如百度、google搜索框中輸入一些字符會(huì)以下拉列表形式給出一些提示，提高了用戶體驗(yàn)2013-09-09
JS常見問題在開發(fā)過程中會(huì)經(jīng)常遇到過，本文整理了一些實(shí)際開發(fā)中存在的問題，曬出來與大家一起分享，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
JavaScript省市區(qū)三級(jí)聯(lián)動(dòng)菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript省市區(qū)三級(jí)聯(lián)動(dòng)菜單效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
javascript 鼠標(biāo)拖動(dòng)圖標(biāo)技術(shù)
剛剛學(xué)習(xí)了個(gè)js的小技術(shù)，還蠻好玩的，以后會(huì)把做的一些小例子貼上來，方便自己也可以跟大家一起分享學(xué)習(xí)成果，哈哈~~2010-02-02
微信小程序?qū)崿F(xiàn)點(diǎn)餐小程序左側(cè)滑動(dòng)菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)餐小程序左側(cè)滑動(dòng)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
想象一下，你把一個(gè)重要內(nèi)容放在一個(gè)彈出窗口，又不聚集到這個(gè)窗口。讓使用屏幕閱讀器的同學(xué)情何以堪，只有當(dāng)他們 tab 到這頁面結(jié)束，還繼續(xù) tab，才可能找到這個(gè)彈窗2011-10-10