<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<script language="javascript" src="jquery-1.4.1.js"></script>
<script language="javascript" src="ui.loading.js"></script>
<link rel="stylesheet" type="text/css" href="ui.loading.css" />
<link rel="stylesheet"
href="ui.selectExt.css"
type="text/css" media="screen" charset="utf-8" />
<script>
$(document).ready(function() {
$(document).ui_loading({
message:"我在加载..."
})
$("#demo1").attr("src","http://www.baidu.com").trigger("beforeload");
$("#demo2").attr("src","http://www.google.com.hk").trigger("beforeload");
$("#ajaxbtn").click(function(){
$.ajax({
url : "http://code.jquery.com/jquery-1.7.2.min.js",
type : "get",
dataType : "html",
cache: false,
success :function(data) {
$("#ajaxRs").html(data);
}})
})
});
</script>
<html>
<BODY>
<div><div>iframe例子1 第一个iframe没有指定高和宽 <br>
刷新iframe这里是通过重新赋值src来实现的，src改变iframe会自动重新加载，这时需要加上这么一句：<br>
$("#demo1").trigger("beforeload");
也就是手动的提iframe触发beforeload事件，由于浏览器的兼容性问题，iframe没有很好的加载前事件。<br>
<input type="button" value="刷新" onclick='javascript: $("#demo1").attr("src","http://www.baidu.com").trigger("beforeload");'/>
<iframe id="demo1" src="" ></iframe><br>
iframe例子2 第二个是指定了高和宽的<br><input type="button" value="刷新" onclick='javascript:$("#demo2").attr("src","http://www.google.com.hk").trigger("beforeload");'/>
<iframe id="demo2" src="" width="300" height="200"></iframe></div>
<div>ajax例子 ajax其实没什么好说的，只要初始化插件，就会有ajax加载效果，效果默认全屏。 <br>我没有找到很好的ajax素材，这个例子在ie下是有效果的 不知道问什么在chrome上ajax获取不到东西。<div>
<input type="button" value="jquery 1.72" id="ajaxbtn"/></div></div>
<div id="ajaxRs" width="600" height="600"></div>
</BODY></html>
jquery插件:ajax和iframe加载提示效果1.1版
5星 · 超过95%的资源 需积分: 34 70 浏览量
2012-05-05
18:12:50
上传
评论 4
收藏 52KB ZIP 举报 
ui.loading.zip （5个子文件） 
jquery-1.4.1.js 165KB
ui.loading.gif 3KB
examples.html 2KB ui.loading.js 4KB ui.loading.css 801B
评论30
最新资源