动态加载图片路径 保持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系列(3) 全面解析Module模式
Jan 15 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 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与javascript对多项选择的处理
2006/10/09 PHP
PHPMailer安装方法及简单实例
2008/11/25 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
js+css在交互上的应用
2010/07/18 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
angularJS 入门基础
2015/02/09 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
Vue3为什么这么快
2020/09/23 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python中常见的数据类型小结
2015/08/29 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
Django web框架使用url path name详解
2019/04/29 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
营业员个人总结的自我评价
2013/10/25 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
化验室安全管理制度
2015/08/06 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python