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


Posted in Javascript onSeptember 06, 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 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
Document对象内容集合(比较全)
Sep 06 #Javascript
Jquery优化效率 提升性能解决方案
Sep 06 #Javascript
jquery中this的使用说明
Sep 06 #Javascript
firefox下frameset取不到值的解决方法
Sep 06 #Javascript
js过滤数组重复元素的方法
Sep 05 #Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 #Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 #Javascript
You might like
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
jquery中attr和prop的区别分析
2015/03/16 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
对python函数签名的方法详解
2019/01/22 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
python函数定义和调用过程详解
2020/02/09 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
学生操行评语大全
2014/04/24 职场文书
大学生求职信
2014/06/17 职场文书
七年级地理教学计划
2015/01/22 职场文书
工作自我评价范文
2015/03/05 职场文书
服务员岗位职责范本
2015/04/09 职场文书
毕业论文致谢范文
2015/05/14 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
市级三好生竞选稿
2015/11/21 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python