<%@ 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. 只查看tomcat进程，不包括grep

    ps aux | grep tomcat  | grep -v "grep" | awk '{print $2}'

  2. JS中的运算符和JS中的分支结构

    JS中的运算符 1.算术运算(单目运算符) + .-.*. /. %取余.++自增 .--自减 +:两种作用,链接字符串/加法运算.当+两边全为数字时,进行加法运算:当+两边有任意一边为字符串时,起链 ...

  3. 团队作业8----第二次项目冲刺（Beta阶段） 第五天

    BETA阶段冲刺第五天 1.小会议ing 2.每个人的工作 (1)昨天已完成的工作 文件读取的方式采用按钮的: (2) 今天计划完成的工作 (3) 工作中遇到的困难: 林莹:源代码的部分我们已经初步完 ...

  4. 201521123091 《Java程序设计》第7周学习总结

    Java 第七周总结 第七周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 1.本章学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内 ...

  5. 201521123026 《java程序设计》第七周学习总结

    1. 本章学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 答: public ...

  6. 201521044152<java程序设计>第一周学习总结

    本周学习总结 java开发时间虽然很短,但是发展迅速,已成为现在非常流行的一门语言,很开心能有幸学习java.第一周学习了java的平台,运行环境jdk以及jrt等等新名词,还了解了eclipse的基 ...

  7. .net core 使用Redis的发布订阅

    Redis是一个性能非常强劲的内存数据库,它一般是作为缓存来使用,但是他不仅仅可以用来作为缓存,比如著名的分布式框架dubbo就可以用Redis来做服务注册中心.接下来介绍一下.net core 使用 ...

  8. Install Oracle 12c R2 on CentOS 7 silent

    准备工作 VMware 虚拟机 CentOS 7 17.08 系统安装包镜像 Oracle 12c R2 软件安装包 配置 yum 库并安装如下包 binutils-2.23.52.0.1-12.el ...

  9. 云计算之路-阿里云上：访问阿里云CDN上的图片，自动跳转到百度首页

    昨天有用户向我们反馈一篇博文(一条语句导致CPU持续100%)中的部分图片不能显示,我们的图片访问用的是阿里云CDN,原以为是某个CDN节点不稳定的问题,但在排查时发现这些图片不能显示竟然是因为请求时 ...

  10. hadoop大事件

    大事件:  Hadoop新一代(2.x)计算平台YARN 一代hadoop存在的问题: 1.Jobtracker单点,容易导致崩溃,节点较多时造成性能瓶颈 2.作业分配基于槽位(slot),分配粒度 ...