动态加载图片路径 保持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 相关文章推荐
jquery nth-child()选择器的简单应用
Jul 10 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
js实现数字滚动特效
Dec 16 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
python主线程捕获子线程的方法
2018/06/17 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
PyQt QMainWindow的使用示例
2021/03/24 Python
关于旷工的检讨书
2014/02/02 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
科学育儿宣传标语
2014/10/08 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书