博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery之ShowLoading遮罩组件
阅读量:5962 次
发布时间:2019-06-19

本文共 1145 字,大约阅读时间需要 3 分钟。

一、遮罩用途及效果

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

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

遮罩效果:

二、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();                }            });

 

推荐一个自己业余时间开发的引擎,()

 

转载地址:http://cpjax.baihongyu.com/

你可能感兴趣的文章
Melody Love Story
查看>>
centos7安装与配置ansible
查看>>
Istio Service Mesh中的授权与鉴权概念详解
查看>>
构建Class
查看>>
ESXI5 中添加共享存储,安装Oracle Rac
查看>>
动态规划之背包问题
查看>>
ASP.NET中的{0:g}
查看>>
L2TP工作过程
查看>>
hbase伪集群搭建
查看>>
Properties
查看>>
parasoft Jtest 使用教程:修改规则与运行简单的用户自定义测试配置
查看>>
使用RPM包离线安装MariaDB 10.0.20 , 基于CentOS 6.6-x86-64
查看>>
MySQL Study之--Index的强制使用和忽略
查看>>
very good
查看>>
手机web——自适应网页设计(html/css控制)
查看>>
VS2010编译错:WIN32_WINNT to be #defined at least to 0x0403...的解决方法
查看>>
Java泛型编程 - 边界
查看>>
个人消费记录软件
查看>>
Java之LinkedList源码浅析
查看>>
CSSOM视图模式(CSSOM View Module)相关整理
查看>>