本人是第一次发布jquery插件,还请大家多多支持,做的不够好的地方,请大家也不要喷,请大家在留言里提出来我会改正,发现插件bug或者有新的功能性建议,都可以在留言区提出来,我会继续完善.
插件主要功能是:为页面的ajax加载时提供加载效果,支持iframe加载效果,
在jquery1.2上进行的开发,不过在其他版本应该也没问题.jquery都是向下兼容的
在ie8,ie9,firefox11,opera11,chrome18测试显示效果一致,因为这款插件的测试需要服务器,我的工作项目只支持到ie8,我就偷懒在自己项目上截了几张图,没有专门做个项目在所有浏览器上做测试,不过大家在使用的过程中发现不兼容问题,随时回复,我会尽快更新我的插件.
下面是两张效果图:
ajax加载效果图
iframe加载效果图
下面简单介绍一下如何使用,只需简单几个步骤.
1.下载插件,这里下载.
2.如果你需要改变文件结构,也就是说把图片文件,css,js文件分开的话,需要更改css文件里面的图片文件地址代码如下:
.ui_loading_progressBar { border: solid 2px #86A5AD; background: white url(ui.loading.gif) no-repeat 10px 10px; } 需要把 url(ui.loading.gif) 换称你自己的文件地址3.在你的jsp文件 或者html文件等引入css文件和js文件,需要先引入jquery文件,引入时最好使用绝对路径,避免出现问题.例如:
<link rel="stylesheet" href="${_contextPath}/resource/css/ui.loading.css" type="text/css" media="screen" charset="utf-8" /> <script type="text/javascript" src="${_contextPath}/resource/js/ui.loading.js"></script>
4.第四部,最后一步,感觉前面也都是废话,不过我感觉有废话的必要.
jQuery(function($) { $(document).ui_loading({ overlay:true,//这里个参数是是否使用遮挡效果. 默认为false opacity:0.2,//这个是遮挡布的透明度, 当overlay为false或者opacity为0是遮挡效果失效 默认0.2 supportIframe:true, //是否支持iframe加载效果,默认是支持. message:'custom string' // 这里是加载提示信息. }); }) 我很笨还不知道怎么给iframe添加一个自动触发事件,iframe的效果触发处了初始化的参数supportIframe为true之外 在你更改完iframe的src之后需要手动触发一个事件: Iframe.trigger('beforeload'); 这样插件就可以工作了,最后再来一张自定义参数的效果图.参数是:$(document).ui_loading({ message:'主人,我在努力的为您加载...', //自定义了 opacity:0.8//透明效果变小了 是不是比我上面那张颜色深了很多那. }); 下载地址:http://download.csdn.net/detail/qq413041153/4278817
大家发现哪个浏览器不兼容的,或者bug之类的,可以浏览回复,我会尽快修复完善.
欢迎大家多多批评指点,我会劲量完善.打完收功!
更新日志2012-05-05:
修复了几个bug:
1,iframe在没有指定宽和高时默认全屏的bug
2,当iframe隐藏时的错误显示效果
3,当iframe以tab标签的方式显示时,由于tab标签切换执行也需要一段时间,造成的获取的iframe的高和宽不是最终的高和宽
4,其他细微调整。
草草增加了一个例子。和新版本打包在一起。
遗留问题:
1,不支持多个iframe同时异步加载,
2,不支持自定义加载效果图片
3,ajax不支持指定对象加载效果。
已更新下载地址