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 <[email protected]> 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();            }

        );

    }

);
 
时间： 2024-10-13 12:40:00

Jquery 等待ajax返回数据loading控件ShowLoading组件的相关文章

jquery输出ajax返回数据中的时间戳转化为日期时间的函数

//第一种 function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' '); } alert(getLocalTime(1293072805)); //结果是2010年12月23日 10:53 //第二种 function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocal

jquery 或ajax返回的中文数据总是乱码解决方案

要将Servlet中的 response.setContentType("text/html;charset=utf-8")这行代码放在 PrintWriter out = response.getWriter()之前. jquery 或ajax返回的中文数据总是乱码解决方案,布布扣,bubuko.com

jquery实现ajax,返回json数据

jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback是回调函数,而type是返回数据的类型.type有xml,html,json,text等. 首先,页面引用jquery.js 在页面写ajax处理的js函数 1 2 3 4 5 6 7 8 9 10 11 12 13 function initMeeting() {             $.ge

jquery ui autocomplete ajax返回数据自定义显示

1.body里面的内容 <input type="text" class="inputTxt" id="txtJigou" autocomplete="off"/> 2.引入jquery.ui.min.js和他的样式 3.js代码如下<script type="text/javascript"> $(function(){ $("#txtJigou").autoc

jQuery 中 ajax 请求数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名和文件图片路径问题 ... ajax01.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ajax小例子 </title> </head> <body> <!--

.net 数据表格显示控件

1. GridView 控件 GridView 控件用于显示表中的数据.通过使用 GridView控件,您可以显示.编辑.删除.排序和翻阅多种不同的数据源(包括数据库.XML 文件和公开数据的业务对象)中的表格数据. 显示表格数据是软件开发中的一个周期性任务.ASP.NET 提供了许多工具来在网格中显示表格数据,例如 GridView 控件.通过使用GridView 控件,您可以显示.编辑和删除多种不同的数据源(例如数据库.XML 文件和公开数据的业务对象)中的数据. 可以使用 GridView

【干货】再上数据分页控件 ━ 更加灵活，更加实用-提供源码

再上数据分页控件-更加灵活,更加实用 关于数据分页的文章太多了,各有各的一套方案,但大多都很类似,要么使用存储过程,要么直接使用代码进行分页.各种方案分页的效率也不尽相同,我们不一定要找一个最高效的(根据实际的项目情况),找一个最合适的就OK了.下面我要谈的分页控件非常灵活,可以支持任意类型的数据库,同时可以支持存储过程或代码分页(会自动判断),也支持多表的分页,非常的方便.对于数据分页的相关文章,在我的博客中可以找到很多,下面我做一个简单的汇总,方便大家查阅. 1. 原创企业级控件库之大数据量

关于easyui中数据型控件使用的一些总结

easyui是个非常棒的jquery插件,不管从性能到美观,兼容性上都比较屌,一般的数据控件(如datagrid,tabs,tree)操作时最好将初始化和数据绑定分开做.先想想为什么? 我们先来谈谈坏处是什么: 1.前台最常见的就是增删改查操作,试想下如果初始化和绑定数据一起操作岂不是初始化重复了. 2.像tabs这种切换控件一般里面还要嵌套其他数据型控件,每次切换都要初始化嵌套的控件,效率低更重要的是消耗不必要的浏览器内存. ps:我做过一个实时刷新的项目,tabs内嵌套datagrid,在实

Android开源载入视图(loading)控件分享

http://www.see-source.com/androidwidget/list.html?type=7 AndroidProgressLayout 可根据加载情况显示提示信息的控件 GoogleProgressBar 用Android实现了google中几种风格的进度条 Titanic 实现动态波浪形动画逐渐填充TextView,可以用在加载 BounceProgressBar 跳跃波浪动画效果的ProgressBar,类似与桌面 CircularProgress 一个模仿androi