动态加载图片路径 保持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 相关文章推荐
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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
对盗链说再见...
2006/10/09 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
python异步任务队列示例
2014/04/01 Python
详解Python中的动态属性和特性
2018/04/07 Python
浅析python的优势和不足之处
2018/11/20 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
亿企通软件测试面试题
2012/04/10 面试题
迟到检讨书800字
2014/01/13 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
阅兵口号
2014/06/19 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
房屋租赁协议书
2014/10/18 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python