動態(tài)加載圖片路徑 保持JavaScript控件的相對獨立性
更新時間：2010年09月03日 15:36:41 作者：
根據(jù)新界面的要求，需要一部分圖片來增強日期控件的美觀性。考慮到既要實現(xiàn)加載圖表的目標，又要保持控件的獨立性以便將來的移植。
當時考慮有三種方法：
1.直接把路徑寫在js文件里，但如果引用頁面路徑層級改變就沒轍了。
2.寫個class，放在主題包里的css文件或者單獨創(chuàng)建一個css文件給日期控件專用。但是控件中的其他元素并沒有使用class的需要，單獨建立相應css文檔似乎小題大做。
3.把以上兩個方法排除后，自然要采用動態(tài)加載圖片路徑的方法咯。
關鍵代碼如下：
//創(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ù)，但仍然保存可擴展性。
加圖后，控件效果是相當美觀了：
順便附上所有window.document.location其下屬性：
document.location.hash // #號后的部分 VS window.location.hash
document.location.host // 域名+端口號
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目錄部分(應用程序)
document.location.port // 端口號
document.location.protocol // 網(wǎng)絡協(xié)議(http:)
document.location.search // ?號后的部分
1.直接把路徑寫在js文件里，但如果引用頁面路徑層級改變就沒轍了。
2.寫個class，放在主題包里的css文件或者單獨創(chuàng)建一個css文件給日期控件專用。但是控件中的其他元素并沒有使用class的需要，單獨建立相應css文檔似乎小題大做。
3.把以上兩個方法排除后，自然要采用動態(tài)加載圖片路徑的方法咯。
關鍵代碼如下：
復制代碼 代碼如下:
//創(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ù)，但仍然保存可擴展性。
加圖后，控件效果是相當美觀了：
順便附上所有window.document.location其下屬性：
document.location.hash // #號后的部分 VS window.location.hash
document.location.host // 域名+端口號
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目錄部分(應用程序)
document.location.port // 端口號
document.location.protocol // 網(wǎng)絡協(xié)議(http:)
document.location.search // ?號后的部分
相關文章
這篇文章介紹了JS實現(xiàn)QQ圖片一閃一閃的效果小例子，有需要的朋友可以參考一下2013-07-07
近幾天在做百度地圖時,需要轉(zhuǎn)換時間格式并做顯示,下面這篇文章主要給大家介紹了關于js中各種時間格式的轉(zhuǎn)換方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
ES6是JavaScript的一個版本,因為我們前面用到的vue默認使用ES6語法開發(fā),所以我們在這一節(jié)補充ES6的知識點,下面這篇文章主要給大家介紹了關于如何在項目中和平時練習中應用es6語法的相關資料,需要的朋友可以參考下2022-11-11
在JavaScript中日期時間函數(shù)是一組用于操作和處理日期和時間的函數(shù),這些函數(shù)可以用于獲取當前日期和時間、格式化日期和時間、計算日期和時間的差異、轉(zhuǎ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)動菜單效果
這篇文章主要為大家詳細介紹了JavaScript省市區(qū)三級聯(lián)動菜單效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
剛剛學習了個js的小技術，還蠻好玩的，以后會把做的一些小例子貼上來，方便自己也可以跟大家一起分享學習成果，哈哈~~2010-02-02
微信小程序?qū)崿F(xiàn)點餐小程序左側(cè)滑動菜單
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)點餐小程序左側(cè)滑動菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
想象一下，你把一個重要內(nèi)容放在一個彈出窗口，又不聚集到這個窗口。讓使用屏幕閱讀器的同學情何以堪，只有當他們 tab 到這頁面結束，還繼續(xù) tab，才可能找到這個彈窗2011-10-10