动态加载图片路径 保持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判断浏览器类型的代码
Nov 05 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
javascript实现tab切换特效
Nov 12 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
js事件触发操作实例分析
Jun 21 Javascript
一起来看看Vue的核心原理剖析
Mar 24 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
php上传图片并压缩的实现方法
2015/12/22 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
python基础教程之字典操作详解
2014/03/25 Python
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Django实现基于类的分页功能
2019/10/31 Python
python 命名规范知识点汇总
2020/02/14 Python
python 实现波浪滤镜特效
2020/12/02 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
社区工作感言
2014/02/21 职场文书
工程项目建议书范文
2014/03/12 职场文书
大学自主招生推荐信
2014/05/10 职场文书
新闻学专业求职信
2014/07/28 职场文书
银行授权委托书样本
2014/10/13 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android