<%@ 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. 自制VTP实验总结

    (packet tracer模拟器) 6.1)实验拓扑 //绿色:通:橙色:不通 //sw0是根桥:全通 Pc0:ip 192.168.1.1 Pc1: ip 192.168.1.2 Pc2:ip 1 ...

  2. [转载]浏览器事件window.onload、onfocus、onblur、ons

    原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...

  3. RDS最佳实践(一)—如何选择你的RDS

    在去年双11之前,为了帮助商家准备天猫双11的大促,让用户更好的使用RDS,把RDS的性能发挥到最佳,保障双11当天面对爆发性增加的压力,不会由于RDS的瓶颈导致系统出现问题,编写了 RDS的最佳实践 ...

  4. java中null的类型匹配

    null作为一个特殊的参数匹配为String对象

  5. 201521123105 第8周Java学习总结

    1.本周学习总结 1.1思维导图 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 1.删除元素的时候从最后一个元素开始,避免删除元素后位置发生变化而导致 ...

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

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1. clone方法 1.1 Object ...

  7. 201521123031《Java程序设计》 第2周学习总结

    1. 本周学习总结 (1)能够更加熟练地使用码云 (2)学习了Arrys和String的用法和一些运用 (3)懂得如何查询函数的源代码,通过查看源代码,能够更深入的了解函数适用情况以及利弊 2. 书面 ...

  8. 201521123103 《java学习笔记》 第十三周学习总结

    一.本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 二.书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.e ...

  9. DAU新解

    写在回归之时 --------------------------- 抱歉,已经超过三年没有回到这里了. 浮躁,虚荣,一颗心没有落到地上,也没有好好总结一下自己.怀念最开始那个时候的状态,安静的做点事 ...

  10. MySql 中文乱码解决办法

    mysql存入的中文数据乱码,可能有这两个原因 原因一 : 数据源配置和mysql字符集编码不符,或数据源配置没有设置字符集 解决方案:在数据源配置添加字符集 useUnicode=true& ...