动态加载图片路径 保持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操纵Cookie实现购物车程序
Nov 23 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
react ant Design手动设置表单的值操作
Oct 31 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生成静态文件的多种方法分享
2012/07/17 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
深入理解python中的select模块
2017/04/23 Python
Django 实现下载文件功能的示例
2018/03/06 Python
PyQt5实现拖放功能
2018/04/25 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
flask项目集成swagger的方法
2020/12/09 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
你对IPv6了解程度
2016/02/09 面试题
《梅兰芳学艺》教学反思
2014/02/24 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
入党培养人考察意见
2015/06/08 职场文书
在职证明范本
2015/06/15 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers