/**
* author: KingViker mail: kingviker88@gmail.com time: 2012-03-28 只需要导入js和css
* 并在加载完成之后初始化即可 如下:
*
* jQuery(function($) {
* $(document).ui_loading();
* })
* 参数目前支持
*
* overlay:true/false boolean 是否开启全屏遮挡效果,默认true
*
* opacity:0~1.0 number 全屏遮挡透明度,当为0是关闭全屏遮挡效果 默认0.2
*
* supportIframe:true/false boolean 是否支持iframe加载效果,默认true
*
* message String 提示性问题 默认值:'数据加载中,请稍等...'
*
* jQuery(function($) {
* $(document).ui_loading({
* overlay:true,
* opacity:0.2,
* supportIframe:true,
* message:'custom string'
* });
* })
*
*
*若要iframe加载效果也生效,除了supportIframe:true外,每次更改iframe src属性时,需要手动触发 beforeload事件
* 例如:Iframe.trigger('beforeload');
*
* lastupdae:2012-01-10
*/
(function($){
$.ui_loading = function() {}
$.extend($.ui_loading, {
settings: {
overlay: true,
opacity:0.2,
supportIframe:true,
message:'数据加载中,请稍等...'
}});
$.fn.ui_loading = function(settings) {
if ($(this).length == 0) return
init(settings)
}
function init(settings) {
if ($.ui_loading.settings.inited) return true
else $.ui_loading.settings.inited = true
if (settings) $.extend($.ui_loading.settings, settings)
$('<div id="ui_loading_progressBar" class="ui_loading_progressBar" style="display: none; ">'+$.ui_loading.settings.message+'...</div>').appendTo('body');
$("body").append('<div id="ui_loading_overlay" class="ui_loading_hide"></div>');
var $loading = $("#ui_loading_progressBar").hide();
$(document).ajaxStart(function(){
showOverlay();
showLoading();
}).ajaxStop(function(){
hideOverlay();
hideLoading();
});
if($.ui_loading.settings.supportIframe){
$('iframe').each(function(){
$(this).bind('beforeload',function(){
showOverlay(this);
showLoading(this);
});
$(this).load(function(){
hideOverlay();
hideLoading();
});
});
}
}
function skipOverlay() {
return $.ui_loading.settings.overlay == false || $.ui_loading.settings.opacity === null
}
function isVisible(obj)
{
if(obj==null) return false;
return obj.offsetWidth>0&&obj.offsetHeight>0;
}
function showLoading(iframe){
if(iframe){
var pIframe = iframe.getBoundingClientRect();
var left = parseInt((pIframe.left).toFixed(0))+(pIframe.right-pIframe.left)/2+$(document).scrollLeft();
var top = parseInt((pIframe.top).toFixed(0))+(pIframe.bottom-pIframe.top)/2+$(document).scrollTop();
$("#ui_loading_progressBar").css({"left":left,"top":top})
.show();
}else{
$("#ui_loading_progressBar").css({"left":"50%","top":"50%"})
.show();
}
}
function hideLoading(){
$("#ui_loading_progressBar").hide();
}
function showOverlay(iframe) {
if (skipOverlay()) return
if($('#ui_loading_overlay').length == 0)
$("body").append('<div id="ui_loading_overlay" class="ui_loading_hide"></div>');
var $overlay = $("#ui_loading_overlay");
if(iframe){
if(!isVisible(iframe))return;
if(isNaN(iframe.height)){
$overlay.height(iframe.height);
}else{
$overlay.height(iframe.height+"px");
}
if(isNaN(iframe.width)){
$overlay.width(iframe.width)
}else{
$overlay.width(iframe.width+"px");
}
var pIframe = iframe.getBoundingClientRect();
$overlay.css("left",pIframe.left+$(document).scrollLeft()).css("top",pIframe.top+$(document).scrollTop());
}else{
$overlay.height("100%").width("100%").css("top",0).css("left",0);
}
$('#ui_loading_overlay').hide().addClass("ui_loading_overlayBG")
.css('opacity', $.ui_loading.settings.opacity)
.fadeIn(200)
return false
}
function hideOverlay() {
if (skipOverlay()) return
$('#ui_loading_overlay').fadeOut(200, function(){
$("#ui_loading_overlay").removeClass("ui_loading_overlayBG")
$("#ui_loading_overlay").addClass("ui_loading_hide")
$("#ui_loading_overlay").remove()
})
return false
}
})(jQuery)
没有合适的资源?快使用搜索试试~ 我知道了~
jquery插件:ajax和iframe加载提示效果
共3个文件
css:1个
gif:1个
js:1个
5星 · 超过95%的资源 需积分: 11 376 下载量 36 浏览量
2012-03-29
14:50:29
上传
评论 3
收藏 5KB ZIP 举报
温馨提示
这是本人发布的第一个jquery插件,有什么意见可以提,我csdn博客里有使用说明.
资源推荐
资源详情
资源评论
收起资源包目录
ui_loading.zip (3个子文件)
ui_loading
ui.loading.gif 3KB
ui.loading.js 4KB
ui.loading.css 801B
共 3 条
- 1
KingViker
- 粉丝: 140
- 资源: 23
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
- 4
- 5
- 6
前往页