动态加载图片路径 保持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 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
JSON格式化输出
Nov 10 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
构建一个JavaScript插件系统
Oct 20 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
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
图片完美缩放
2006/09/07 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
.net笔试题
2014/03/03 面试题
销售自我评价
2013/10/22 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
大雁塔导游词
2015/02/04 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
邹越演讲观后感
2015/06/15 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL