动态加载图片路径 保持JavaScript控件的相对独立性
更新时间：2010年09月03日 15:36:41 作者：
根据新界面的要求，需要一部分图片来增强日期控件的美观性。考虑到既要实现加载图表的目标，又要保持控件的独立性以便将来的移植。
当时考虑有三种方法：
1.直接把路径写在js文件里，但如果引用页面路径层级改变就没辙了。
2.写个class，放在主题包里的css文件或者单独创建一个css文件给日期控件专用。但是控件中的其他元素并没有使用class的需要，单独建立相应css文档似乎小题大做。
3.把以上两个方法排除后，自然要采用动态加载图片路径的方法咯。
关键代码如下：
//创建一个全局变量保存路径
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其实也可设为参数，由于所有项目图片文件夹命名固定，所以没有设立参数，但仍然保存可扩展性。
加图后，控件效果是相当美观了：
顺便附上所有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 // 网络协议(http:)
document.location.search // ?号后的部分
1.直接把路径写在js文件里，但如果引用页面路径层级改变就没辙了。
2.写个class，放在主题包里的css文件或者单独创建一个css文件给日期控件专用。但是控件中的其他元素并没有使用class的需要，单独建立相应css文档似乎小题大做。
3.把以上两个方法排除后，自然要采用动态加载图片路径的方法咯。
关键代码如下：
复制代码 代码如下:
//创建一个全局变量保存路径
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其实也可设为参数，由于所有项目图片文件夹命名固定，所以没有设立参数，但仍然保存可扩展性。
加图后，控件效果是相当美观了：
顺便附上所有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 // 网络协议(http:)
document.location.search // ?号后的部分
相关文章
这篇文章介绍了JS实现QQ图片一闪一闪的效果小例子，有需要的朋友可以参考一下2013-07-07
近几天在做百度地图时,需要转换时间格式并做显示,下面这篇文章主要给大家介绍了关于js中各种时间格式的转换方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
ES6是JavaScript的一个版本,因为我们前面用到的vue默认使用ES6语法开发,所以我们在这一节补充ES6的知识点,下面这篇文章主要给大家介绍了关于如何在项目中和平时练习中应用es6语法的相关资料,需要的朋友可以参考下2022-11-11
在JavaScript中日期时间函数是一组用于操作和处理日期和时间的函数,这些函数可以用于获取当前日期和时间、格式化日期和时间、计算日期和时间的差异、转换日期和时间的格式等,这篇文章主要给大家介绍了关于Javascript日期时间函数的使用方法,需要的朋友可以参考下2024-02-02
输入自动提示搜索提示功能的使用说明:sugggestion.txt
该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示，提高了用户体验2013-09-09
JS常见问题在开发过程中会经常遇到过，本文整理了一些实际开发中存在的问题，晒出来与大家一起分享，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要为大家详细介绍了JavaScript省市区三级联动菜单效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
刚刚学习了个js的小技术，还蛮好玩的，以后会把做的一些小例子贴上来，方便自己也可以跟大家一起分享学习成果，哈哈~~2010-02-02
这篇文章主要为大家详细介绍了微信小程序实现点餐小程序左侧滑动菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
想象一下，你把一个重要内容放在一个弹出窗口，又不聚集到这个窗口。让使用屏幕阅读器的同学情何以堪，只有当他们 tab 到这页面结束，还继续 tab，才可能找到这个弹窗2011-10-10
最新评论