Jquery 等待ajax返回数据loading控件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(); } }); }----------showLoading.css 代码----------------
a { color: blue; cursor:pointer; text-decoration: underline;} div.instructions_container { float: left; width: 350px; margin-right: 50px; } div#activity_pane { float:left; width: 350px; height: 200px; border: 1px solid #CCCCCC; font-weight:bold;">#EEEEEE; padding-top: 200px; text-align: center; } div.example_links.link_category { margin-bottom: 15px;} .loading-indicator-bars { background-image: url('https://raw.githubusercontent.com/riverbed/flyscript-portal/master/thirdparty/showLoading/images/loading-bars.gif'); width: 150px;} .loading-indicator { height: 80px; width: 80px; background: url( 'https://raw.githubusercontent.com/riverbed/flyscript-portal/master/thirdparty/showLoading/images/loading.gif' ); background-repeat: no-repeat; background-position: center center;} .loading-indicator-overlay { font-weight:bold;">#FFFFFF; opacity: 0.6; filter: alpha(opacity = 60);}
-------------------jquery.showLoading.js-----------------------------
/* * jQuery showLoading plugin v1.0 * * Copyright (c) 2009 Jim Keller * Context - http://www.contextllc.com * * Dual licensed under the MIT and GPL licenses. * * Modified by <cwhite@riverbed.com> to support displaying * percentage complete. */ jQuery.fn.setLoading = function(pct) { var indicatorID = jQuery(this).attr('id'); $('#loading-indicator-' + indicatorID).html(pct + '%');}; jQuery.fn.showLoading = function(options) { var indicatorID; var settings = { 'addClass': '', 'beforeShow': '', 'afterShow': '', 'hPos': 'center', 'vPos': 'center', 'indicatorZIndex' : 5001, 'overlayZIndex': 5000, 'parent': '', 'marginTop': 0, 'marginLeft': 0, 'overlayWidth': null, 'overlayHeight': null }; jQuery.extend(settings, options); var loadingDiv = jQuery('<div style="text-align:center"></div>'); var overlayDiv = jQuery('<div></div>'); // // Set up ID and classes // if ( settings.indicatorID ) { indicatorID = settings.indicatorID; } else { indicatorID = jQuery(this).attr('id'); } //jQuery(this).resize(function(e) { // alert("Change event"); //}); jQuery(loadingDiv).attr('id', 'loading-indicator-' + indicatorID ); jQuery(loadingDiv).addClass('loading-indicator'); if ( settings.addClass ){ jQuery(loadingDiv).addClass(settings.addClass); } // // Create the overlay // jQuery(overlayDiv).css('display', 'none'); // Append to body, otherwise position() doesn't work on Webkit-based browsers jQuery(document.body).append(overlayDiv); // // Set overlay classes // jQuery(overlayDiv).attr('id', 'loading-indicator-' + indicatorID + '-overlay'); jQuery(overlayDiv).addClass('loading-indicator-overlay'); if ( settings.addClass ){ jQuery(overlayDiv).addClass(settings.addClass + '-overlay'); } // // Set overlay position // var overlay_width; var overlay_height; var border_top_width = jQuery(this).css('border-top-width'); var border_left_width = jQuery(this).css('border-left-width'); // // IE will return values like 'medium' as the default border, // but we need a number // border_top_width = isNaN(parseInt(border_top_width)) ? 0 : border_top_width; border_left_width = isNaN(parseInt(border_left_width)) ? 0 : border_left_width; var overlay_left_pos = jQuery(this).offset().left + parseInt(border_left_width);// + $(document.body).css( "border-left" ); var overlay_top_pos = jQuery(this).offset().top + parseInt(border_top_width); if ( settings.overlayWidth !== null ) { overlay_width = settings.overlayWidth; } else { overlay_width = parseInt(jQuery(this).width()) + parseInt(jQuery(this).css('padding-right')) + parseInt(jQuery(this).css('padding-left')); } if ( settings.overlayHeight !== null ) { overlay_height = settings.overlayWidth; } else { overlay_height = parseInt(jQuery(this).height()) + parseInt(jQuery(this).css('padding-top')) + parseInt(jQuery(this).css('padding-bottom')); } jQuery(overlayDiv).css('width', overlay_width.toString() + 'px'); jQuery(overlayDiv).css('height', overlay_height.toString() + 'px'); jQuery(overlayDiv).css('left', overlay_left_pos.toString() + 'px'); jQuery(overlayDiv).css('position', 'absolute'); jQuery(overlayDiv).css('top', overlay_top_pos.toString() + 'px' ); jQuery(overlayDiv).css('z-index', settings.overlayZIndex); // // Set any custom overlay CSS // if ( settings.overlayCSS ) { jQuery(overlayDiv).css ( settings.overlayCSS ); } // // We have to append the element to the body first // or .width() won't work in Webkit-based browsers (e.g. Chrome, Safari) // jQuery(loadingDiv).css('display', 'none'); jQuery(document.body).append(loadingDiv); jQuery(loadingDiv).css('position', 'absolute'); jQuery(loadingDiv).css('z-index', settings.indicatorZIndex); // // Set top margin // var indicatorTop = overlay_top_pos; if ( settings.marginTop ) { indicatorTop += parseInt(settings.marginTop); } var indicatorLeft = overlay_left_pos; if ( settings.marginLeft ) { indicatorLeft += parseInt(settings.marginTop); } // // set horizontal position // if ( settings.hPos.toString().toLowerCase() == 'center' ) { jQuery(loadingDiv).css('left', (indicatorLeft + ((jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width())) / 2)).toString() + 'px'); } else if ( settings.hPos.toString().toLowerCase() == 'left' ) { jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(jQuery(overlayDiv).css('margin-left'))).toString() + 'px'); } else if ( settings.hPos.toString().toLowerCase() == 'right' ) { jQuery(loadingDiv).css('left', (indicatorLeft + (jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width()))).toString() + 'px'); } else { jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(settings.hPos)).toString() + 'px'); } // // set vertical position // if ( settings.vPos.toString().toLowerCase() == 'center' ) { jQuery(loadingDiv).css('top', (indicatorTop + ((jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height())) / 2)).toString() + 'px'); } else if ( settings.vPos.toString().toLowerCase() == 'top' ) { jQuery(loadingDiv).css('top', indicatorTop.toString() + 'px'); } else if ( settings.vPos.toString().toLowerCase() == 'bottom' ) { jQuery(loadingDiv).css('top', (indicatorTop + (jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height()))).toString() + 'px'); } else { jQuery(loadingDiv).css('top', (indicatorTop + parseInt(settings.vPos)).toString() + 'px' ); } // // Set any custom css for loading indicator // if ( settings.css ) { jQuery(loadingDiv).css ( settings.css ); } // // Set up callback options // var callback_options = { 'overlay': overlayDiv, 'indicator': loadingDiv, 'element': this }; // // beforeShow callback // if ( typeof(settings.beforeShow) == 'function' ) { settings.beforeShow( callback_options ); } // // Show the overlay // jQuery(overlayDiv).show(); // // Show the loading indicator // jQuery(loadingDiv).show(); // // afterShow callback // if ( typeof(settings.afterShow) == 'function' ) { settings.afterShow( callback_options ); } return this;}; jQuery.fn.hideLoading = function(options) { var settings = {}; jQuery.extend(settings, options); if ( settings.indicatorID ) { indicatorID = settings.indicatorID; } else { indicatorID = jQuery(this).attr('id'); } jQuery(document.body).find('#loading-indicator-' + indicatorID ).remove(); jQuery(document.body).find('#loading-indicator-' + indicatorID + '-overlay' ).remove(); return this;}; jQuery(document).ready( function() { // // When a user clicks the 'loading-default' link, // call showLoading on the activity pane // with default options // jQuery('a.loading-default').click( function() { jQuery('#activity_pane').showLoading(); } ); // // When a user clicks the 'loading-ajax' link, // call showLoading, sleep, then call hide loading // with default options // jQuery('a.loading-ajax').click( function() { jQuery('#activity_pane').showLoading( { 'afterShow': function() { setTimeout( "jQuery('#activity_pane').hideLoading()", 1000 ); } } ); } ); // // When a user clicks the 'loading-bars' link, // call showLoading with addClass specified // jQuery('a.loading-bars').click( function() { jQuery('#activity_pane').showLoading( { 'addClass': 'loading-indicator-bars' } ); } ); // // When a user clicks the 'loading-hide' link, // call hideLoading on the activity pane // jQuery('a.loading-hide').click( function() { jQuery('#activity_pane').hideLoading(); } ); } );
Jquery 等待ajax返回数据loading控件ShowLoading组件的更多相关文章
- jquery输出ajax返回数据中的时间戳转化为日期时间的函数
//第一种 function getLocalTime(nS) { ).toLocaleString().replace(/:\d{,}$/,' '); } alert(getLocalTime()) ...
- 自己实现的数据表格控件(dataTable),支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义
一.前言 也没什么好说的嘛,用了蛮多github上开源的能够实现dataTable功能的表格插件,不过都默认绑定样式啊,数据格式也设定的比较死,所以忍不住自己实现了一个简单的可自定义样式和自定义数据返 ...
- jquery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件
习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...
- jQ效果:jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- jquery去重复 如何去除select控件重复的option
#1.去除select控件重复的option <select id="companyId" onchange="getContract()" name=& ...
- .NET各大平台数据列表控件绑定原理及比较(WebForm、Winform、WPF)
说说WebForm: 数据列表控件: WebForm 下的列表绑定控件基本就是GridView.DataList.Repeater:当然还有其它DropDownList.ListBox等. 它们的共同 ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.3.创建控件
像jQuery提供 fn.extend() 方法从而可以简单地创建插件一样,jQuery UI也提供了机制使得创造插件变得简单,也确保了公共API功能在新的插件中被保留. 1.首先,创建一个名为 j ...
- 数据表格控件 DataGridControl
数据表格控件 书154页 <?xml version="1.0" encoding="utf-8"?> <s:Application xmln ...
随机推荐
- 观察者模式最佳案例实现[JAVA][原创]
/** * American Stock Exchange market(ASE) has a list of stocks.A stock object has two perspective in ...
- hibernate学习笔记6--Criteria查询方式、完整小练习(开发步骤)
一.Criteria查询方式没有sql语了,因此更加面向对象一些.Criteria是一种比HQL更面向对象的查询方式:Criteria的创建方式: Criteria c = s.createCrite ...
- iconv字符编码转换
转自 http://blog.csdn.net/langresser_king/article/details/7459367 iconv(http://www.gnu.org/software/li ...
- [Android] Android开发优化之——使用软引用和弱引用
Java从JDK1.2版本开始,就把对象的引用分为四种级别,从而使程序能更加灵活的控制对象的生命周期.这四种级别由高到低依次为:强引用.软引用.弱引用和虚引用. 这里重点介绍一下软引用和弱引用. ...
- C#判断字符串为空的几种方法和效率判断
C#判断字符串为空的几种方法和效率判断 string定义 1.1 string str1="":会定义指针(栈),并在内存里划一块值为空的存储空间(堆),指针指向这个空间.1.2 ...
- 8皇后以及N皇后算法探究,回溯算法的JAVA实现,递归方案
八皇后问题,是一个古老而著名的问题,是回溯算法的典型案例.该问题是国际西洋棋棋手马克斯·贝瑟尔于1848年提出:在8×8格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行.同 ...
- POI刷新数据后的函数(公式)更新问题
使用POI将Excel模板中的数据进行更新,这应该是很常见的操作 下面就贴上我的一小段代码 public class ModifyExcel { /** * @param fileName Excel ...
- 解决mysql中文乱码(总)
转自:http://hi.baidu.com/cnvienna/blog/item/2e99efdfd94fc61862279801.html MySQL会出现中文乱码的原因不外乎下列几点: .ser ...
- Heritrix源码分析(四) 各个类说明(转)
Heritrix的类的确很繁琐,往往继承了一层又一层,最多的继承好像有7层.下面就一个包一个包的说明每个类的作用,由于里面Heritrix组件分明,很多组件没用到的同时该组件的类我也没怎么接触,所以这 ...
- JS面向对象组件(四) -- 面向对象的继承
什么是继承 •在原有对象的基础上,略作修改,得到一个新的对象 •不影响原有对象的功能 //父类 createPerson function createPerson(name,sex){ this.n ...