---- 淘宝优惠券 ----资源下载 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

Jquery之ShowLoading遮罩组件

前端开发 蚂蚁 3526℃ 0评论

一、遮罩用途及效果

ShowLoading这个jQuery插件设计用于当运行Ajax请求时,可以在屏幕某一特殊区域(id,class或者html标签)覆一张正在加载中的图片。

有时候我们页面调用后台程序时间比较长时,前台页面暴露在用户之下,如果用户点击可能会造成逻辑混乱。这时候,遮罩就起到了很好的效果,在触发后台程序时我们将前台页面遮住,不让操作,同时给予一个程序运行请等待的效果。

遮罩效果:

二、JQuery遮罩UI实现

引用文件:(下载地址
showLoading.css
jquery.showLoading.js

<link href="style/showLoading.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.showLoading.min.js"></script>

三、使用方法

假设html页面有有一个class为add_test_img的标签,需要通过ajax访问后台,并在add_test_img标签中显示一些相关内容,在内容显示之前,可对add_test_img标签使用遮罩,防止在数据显示之前,被修改其中的内容

复制代码
//显示遮罩
$(".add_test_img").showLoading();  
//ajax调用
$.ajax({
                type: "GET",
                url: "Api.php",
                data: {ApiTarget: 'TestImage', op: 'paginateByClassId', prj_id: prj_id, class_id:class_id, page: index, per_page: items_per_page, user_id: user_id, start_date:start_date_str, end_date:end_date_str},
                success: function(response){
                   //对返回数据进行处理,并显示
                   //......
                   //去除遮罩
                    $(".add_test_img").hideLoading();
                },
                error: function(xhr) {
                   //显示失败信息
                   //......
                   //去除遮罩
                    $(".add_test_img").hideLoading();
                }
            });

http://www.cnblogs.com/eczhou/archive/2012/12/18/2822788.html

转载请注明:有爱前端 » Jquery之ShowLoading遮罩组件

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情