Jquery之ShowLoading遮罩组件

一、遮罩用途及效果

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

推荐一个开发的网盘搜索引擎，360盘搜（www.360panso.com）

转载于:https://www.cnblogs.com/ChineseMoonGod/p/6003657.html

Jquery之ShowLoading遮罩组件相关推荐

7个jquery easy ui 基本组件图解
下面给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head><meta charset=&q ...
基于jquery的php分页,基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
[jQuery] jQuery UI怎样自定义组件？
[jQuery] jQuery UI怎样自定义组件? 又是第一次,现在的感受是jQueryUI Widget能让你代码组织得更好,风格更一致. 如何开始使用首先用$.widget()方法开始定义你的组 ...
用jQuery实现页面遮罩弹出框
页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: <div id="main"> ...
jquery 弹出遮罩层
jquery 弹出遮罩层点击层关闭转载于:https://blog.51cto.com/ming358721/423505
mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解，mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
使用vue创建一个遮罩组件_用于输入遮罩的另一个Vue组件
使用vue创建一个遮罩组件语音输入蒙版 (vue-input-mask) Yet another Vue component for input masking. Based on react-in ...
js ajax 点击遮罩层,jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...

Jquery之ShowLoading遮罩组件

Jquery之ShowLoading遮罩组件相关推荐

最新文章

热门文章