动态加载图片路径 保持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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
vue+element实现表单校验功能
May 20 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 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单例模式实现(对象只被创建一次)
2012/12/05 PHP
对xmlHttp对象的理解
2011/01/17 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
Python3处理文件中每个词的方法
2015/05/22 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
python执行使用shell命令方法分享
2017/11/08 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python安装scipy的步骤解析
2019/09/28 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
班主任对学生的评语
2014/04/26 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
研讨会通知
2015/04/27 职场文书
2016中秋节广告语
2016/01/28 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS