动态加载图片路径 保持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 相关文章推荐
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
对python列表里的字典元素去重方法详解
2019/01/21 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
最新创业融资计划书
2014/01/19 职场文书
老人祝寿主持词
2014/03/28 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
难忘的一天教学反思
2014/04/30 职场文书
无传销社区工作方案
2014/05/13 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
房屋产权证明书
2014/10/15 职场文书
六一文艺汇演主持词
2015/06/30 职场文书