发布jquery加载效果插件1.0版(更新到1.1版)
来源:互联网 发布:淘宝客服接单流程 编辑:程序博客网 时间:2024/06/11 05:57
本人是第一次发布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不支持指定对象加载效果。
已更新下载地址- 发布jquery加载效果插件1.0版(更新到1.1版)
- 发布自己写的jQuery自动完成的插件(AutoComplete)(28日更新)
- SouceInsight跳转到文件夹插件更新到1.2.1版
- 基于jQuery的图片加载loading效果插件
- JQuery Tree插件——zTree v3.5.16 版 发布
- JQuery Tree插件——zTree v3.5.16 版 发布
- 2、jQuery插件之cxSelect城市选择(三级级联效果国际版和国内版)
- jquery手风琴效果插件
- jquery插件手风琴效果
- jquery插件面板效果
- jquery插件-手风琴效果
- jquery面板效果插件
- jQuery插件--dialog效果
- jquery插件手风琴效果
- jquery插件面板效果
- jquery放大镜效果插件
- jQuery 显示效果插件
- jquery插件效果
- 基于WEB的BPMN建模工具R0.02发布!
- flex_状态组使用浅析;
- 关于Ubuntu无法启动的一点注記-grub修复
- 7-framework--详解
- apache 2.4.1 无法解析shtml中的expr指令
- 发布jquery加载效果插件1.0版(更新到1.1版)
- redhat字符界面及xwindow切换
- .NET应用程序是如何执行的
- cannot be resolved to a type
- Cookies,SSL,httpclient的多线程处理,HTTP方法
- [转]Datagridview 实现二维表头
- glpixelstorei
- 算法研究之排列组合公式
- 江苏外逃银行行长举家外逃 逃跑线路系精心准备