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 相关文章推荐
Javascript 兼容firefox的一些问题
May 21 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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 selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Django获取应用下的所有models的例子
2019/08/30 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
教师学习培训邀请函
2014/02/04 职场文书
鲜花方阵解说词
2014/02/13 职场文书
会计岗位职责范本
2014/03/07 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
2015年组织部工作总结
2015/04/03 职场文书
新生开学寄语大全
2015/05/28 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏