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 固定悬浮效果实现思路代码
Aug 02 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
原生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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
Python 解析XML文件
2009/04/15 Python
动态创建类实例代码
2009/10/07 Python
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
Java语言程序设计测试题改错题部分
2014/07/22 面试题
两则小学生的自我评价分享
2013/11/14 职场文书
安全大检查实施方案
2014/02/22 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
七年级作文之秋游
2019/10/21 职场文书