jQuery实现按钮点击遮罩加载及处理完后恢复的效果


Posted in Javascript onJune 07, 2016

本文实例讲述了jQuery实现按钮点击遮罩加载及处理完后恢复的效果。分享给大家供大家参考,具体如下:

运行效果图如下:

jQuery实现按钮点击遮罩加载及处理完后恢复的效果

具体代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUiLoad.aspx.cs" Inherits="EasyUiLoad" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>EasyUI加载效果</title>
  <style type="text/css">
  body{font-size:12px}
  .datagrid-mask{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.5;filter:alpha(opacity=30);background-color:#e0ecff;display:none}
  .datagrid-mask-msg{position:absolute;top:50%;margin-top:-20px;padding:10px 15px 10px 15px;width:auto;height:16px;border-width:2px;border-color:#68a5ff;border-style:solid;display:none}
  .img1{vertical-align:middle;}
  </style>
  <script src="JS/jquery-1.9.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //load
    function EasyUILoad() {
      $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: "auto !important" }).appendTo("body");
      $("<div class=\"datagrid-mask-msg\"></div>").html("<img src='images/loading.gif' class='img1' /> 正在运行,请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
    }
    //display Load
    function dispalyEasyUILoad() {
      $(".datagrid-mask").remove();
      $(".datagrid-mask-msg").remove();
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:Button ID="Button1" runat="server" Text="加载效果" OnClientClick="javascript:EasyUILoad();" onclick="Button1_Click" />
  </div>
  </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class EasyUiLoad : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
  }
  protected void Button1_Click(object sender, EventArgs e)
  {
    System.Threading.Thread.Sleep(5000);
    //处理逻辑...
    //完成处理后恢复
    ClientScript.RegisterStartupScript(this.GetType(), "closeLoad", "dispalyEasyUILoad();", true);
  }
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
javascript:以前写的xmlhttp池,代码
May 18 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
jquery 模板的应用示例
Nov 12 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
原生js三级联动的简单实现代码
Jun 07 #Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 #Javascript
模仿password输入框的实现代码
Jun 07 #Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 #Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 #Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 #Javascript
JQuery异步加载PartialView的方法
Jun 07 #Javascript
You might like
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
js运动应用实例解析
2015/12/28 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
Python入门_浅谈for循环、while循环
2017/05/16 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
大学毕业生通用自我评价
2014/01/05 职场文书
培训协议书范本
2014/04/22 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
三方股份合作协议书
2014/10/13 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
无故旷工检讨书
2015/08/15 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android