[置顶]   Jquery之ShowLoading遮罩组件

一、遮罩用途及效果

惠农网站建设公司创新互联公司,惠农网站设计制作,有大型网站制作公司丰富经验。已为惠农1000+提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱,请找那个售后服务好的惠农做网站的公司定做!

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

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

遮罩效果:

[置顶]          Jquery之ShowLoading遮罩组件

二、JQuery遮罩UI实现

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

 

三、使用方法

假设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();                 }             });

新闻标题:[置顶]   Jquery之ShowLoading遮罩组件
网页URL:http://scyanting.com/article/gpesij.html