<%@ 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实现按钮点击遮罩加载，处理完后恢复的更多相关文章

  1. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  2. 使用jquery的load方法设计动态加载，并解决浏览器前进、后退、刷新等问题

    继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后 ...

  3. 基于jquery响应式网站图片无限加载瀑布流布局

    分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览   源码下载 实 ...

  4. PHP+Ajax点击加载更多内容 －这个效果好，速度快，只能点击更多加载，不能滚动自动加载

    这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...

  5. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  6. Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子

    Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子 procedure TForm1.Button1Click(Sender: TObject); ...

  7. 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点

    jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...

  8. js和jquery触发按钮点击事件

    js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...

  9. 基于jquery鼠标或者移动端滚动加载数据

    基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...

随机推荐

  1. 性能测试中vmstat命令的常见使用。

    vmstat是Linux中常用的一个命令,尤其是在进行性能测试时,使用该命令,往往能辅助我们进行性能问题定位. 我们先看一下这个命令执行得到的数据. [root@xxx ~]# vmstat 1 10 ...

  2. tomcat配置单项HTTPS协议

    1.进入到jdk下的bin目录     1)进入cmd窗口,cd进入目录: 2)找到JDK安装bin目录,shift+右击打开命令窗口: 3)如果配置类环境变量,在任意cmd命令窗口都可以: 2.输入 ...

  3. 设置为互斥按钮的一组Radio按钮的用法

    设置为互斥按钮的一组Radio,只需要将第一个Radio的Group属性设置为True,并为之映射变量(DDX),其余radio的Group属性设置为False,不需要映射变量. 否则会出现不是互斥按 ...

  4. 团队作业2——需求分析&原型设计

    Deadline: 2017-4-14 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的三个方面 需求分析 原型设计 编码规范 晚交 - 0分 迟交两周以上 - ...

  5. 团队作业8——第二次项目冲刺（Bata版本）--第二天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 学号 成员 贡献比 201421123001 廖婷婷 15% 201421123002 翁珊 17% 201421123004 ...

  6. 201521123053《Java程序设计》第1周学习总结

    1. 本周学习总结 第一次接触Java,让我感到很吃力,有些困难.但我知道接触所有新事物都会困难,慢慢来就好. 下面是我这周的学习总结: one  第一节课 老师上课太快了,而且我没预习,根本跟不上 ...

  7. update:我的Emacs配置文件

    ;;设置字体用的  防止中文变成无法识别的框框 (set-default-font "Consolas-11") (set-fontset-font "fontset-d ...

  8. 201521123017 《Java程序设计》第12周学习总结

    1. 本周学习总结 2. 书面作业 Q1.字符流与文本文件:使用 PrintWriter(写),BufferedReader(读) 1.1 生成的三个学生对象,使用PrintWriter的printl ...

  9. 201521123100 《java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  10. 201521123038 《Java程序设计》 第十二周学习总结

    201521123038 <Java程序设计> 第十二周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student ...