发布jquery加载效果插件1.0版(跟新到1.1版）

本人是第一次发布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之后需要手动触发一个事件:

<span style="color: #000000;">Iframe.trigger('beforeload');</span>

这样插件就可以工作了,最后再来一张自定义参数的效果图.参数是:

$(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不支持指定对象加载效果。

已更新下载地址