动态加载图片路径 保持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 相关文章推荐
jquery关于图形报表的运用实现代码
Jan 06 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
Node.js插件安装图文教程
May 06 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
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的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
在centos7中分布式部署pyspider
2017/05/03 Python
浅谈Python peewee 使用经验
2017/10/20 Python
scrapy爬虫实例分享
2017/12/28 Python
python K近邻算法的kd树实现
2018/09/06 Python
python中class的定义及使用教程
2019/09/18 Python
Python中关于浮点数的冷知识
2019/09/22 Python
python实现手势识别的示例(入门)
2020/04/15 Python
python对execl 处理操作代码
2020/06/22 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
一套PHP的笔试题
2013/05/31 面试题
技校毕业生个人学习的自我评价
2014/02/21 职场文书
冬季安全检查方案
2014/05/23 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
责任书格式
2015/01/29 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python