Jquery遮罩ShowLoading组件

1、意义

开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此时需要在加载数据中将前台进行提示在加载数据中,利用jquery的遮罩组件可以完成这个功能需求。

2、实现步骤

(1)、下载showLoading.css
   jquery.showLoading.min.js 两个文件。

(2)、在jsp中引入这两个文件

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

(3)、在异步请求中使用这个组件

function showloading(url,data){
	$("body").showLoading();
	$.ajax({
		url:url,
		data:data,
		dataType:"json",
		success:function(obj){
			$("body").hideLoading();
		}
	});
}
时间: 2024-10-10 12:15:15

Jquery遮罩ShowLoading组件的相关文章

Jquery 等待ajax返回数据loading控件ShowLoading组件

1.意义 开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此时需要在加载数据中将前台进行提示在加载数据中,利用jquery的遮罩组件可以完成这个功能需求. 2.实现步骤 (1).下载 showLoading.css    jquery.showLoading.min.js  两个文件. (2).在jsp中引入这两个文件 <link href="styl

基于jQuery的TreeGrid组件详解

一.TreeGrid组件相关的类 1.TreeGrid(_config) _config:json格式的数据,组件所需要的数据都通过该参数提供. 2.TreeGridItem(_root, _rowId, _rowIndex, _rowData) _root:显示组件实例的目标容器对象. _rowId:选中行的id. _rowIndex:选中行的索引. _rowData:json格式的行数据. 二._config参数详解 id:组件实例的id. width:组件实例的宽度. renderTo:用

封装jQuery下载文件组件

使用jQuery导出文档文件 jQuery添加download组件 jQuery.download = function(url, data, method){ if( url && data ){ data = typeof data == 'string' ? data : jQuery.param(data); var inputs = ''; jQuery.each(data.split('&'), function(i,el){ var pair = this.split

jQuery EasyUI Datagrid组件的完整的基础DOM结构

该日志由 世纪之光 于2年前发表在datagrid分类下 转载: jQuery EasyUI Datagrid组件的完整的基础DOM结构 | WebUI框架使用参考+ http://www.easyui.info/archives/1157.html 关键字: datagrid源码分析, datagrid结构, easyui源码分析 标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会

Jquery遮罩插件,想罩哪就罩哪!

原文:Jquery遮罩插件,想罩哪就罩哪! 一  前言 在项目开发时发现没有一个用起来 爽一点的遮罩插件,看起来觉得不难 好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下, 需要的功能如下 1 可以全屏遮 用于提交数据时 2  局部遮,用于重复提交,只遮提交按钮,此功能当时在CSDN的登录中看到过,当时觉得还不错 3  遮罩上的提示文字可自己配置,因为操作的业务场景不一样,提示的信息肯定也会不一样 4  遮罩图片可配置, 5 信息提示层大小可配置 大致功能就如上几点,然后就是折

基于jQuery遮罩图片hover翻转效果

基于jQuery遮罩图片hover翻转效果.这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="index_hd"> <div class="fr hd_r major-list-outer"> <ul class="major-list"> <li class="major-item&qu

jQuery表格排序组件-tablesorter

一.引入文件 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <link href=

网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它嵌入到网页的任何位置. 基础用法: <div id="p" class="easyui-panel" title="面板-标题" data-options="iconCls:'icon-save',closable:true,coll

jQuery遮罩层插件

在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =