动态加载图片路径 保持JavaScript控件的相对独立性


Posted in Javascript onSeptember 03, 2010

当时考虑有三种方法:
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其实也可设为参数,由于所有项目图片文件夹命名固定,所以没有设立参数,但仍然保存可扩展性。

加图后,控件效果是相当美观了:
动态加载图片路径 保持JavaScript控件的相对独立性
顺便附上所有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 // ?号后的部分
Javascript 相关文章推荐
JS的千分位算法实现思路
Jul 31 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
Dojo 学习要点
Sep 03 #Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 #Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 #Javascript
Jquery中dialog属性小记
Sep 03 #Javascript
javascript中使用css需要注意的地方小结
Sep 01 #Javascript
js截取函数(indexOf,join等)
Sep 01 #Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 #Javascript
You might like
php4的彩蛋
2006/10/09 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
Python构造函数及解构函数介绍
2015/02/26 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Python关于反射的实例代码分享
2020/02/20 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
园长自我鉴定
2013/10/06 职场文书
人事助理岗位职责
2013/11/18 职场文书
小区门卫岗位职责
2013/12/31 职场文书
毕业自我鉴定书
2014/03/24 职场文书
四议两公开实施方案
2014/03/28 职场文书
迎国庆横幅标语
2014/10/08 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
简爱电影观后感
2015/06/10 职场文书
篮球拉拉队口号
2015/12/25 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL