动态加载图片路径 保持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匿名函数用法分析
Feb 13 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
react 生命周期实例分析
May 18 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
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
php5.2时间相差8小时
2007/01/15 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP类的特性实例分析
2016/09/28 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
javascript基本语法分析说明
2008/06/15 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python基础教程项目四之新闻聚合
2018/04/02 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
工业自动化毕业生自荐信范文
2014/01/04 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
求职意向书范文
2014/04/01 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
无房证明样本
2015/06/17 职场文书
校长新学期致辞
2015/07/30 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python