This page demonstrates several ways to block the page. Each button below activates blockUI and then makes a remote call to the server.

The following code is used on this page:

<script type="text/javascript"> 

    // unblock when ajax activity stops
$(document).ajaxStop($.unblockUI); function test() {
$.ajax({ url: 'wait.php', cache: false });
} $(document).ready(function() {
$('#pageDemo1').click(function() {
$.blockUI();
test();
});
$('#pageDemo2').click(function() {
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
test();
});
$('#pageDemo3').click(function() {
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff' } });
test();
}); $('#pageDemo4').click(function() {
$.blockUI({ message: $('#domMessage') });
test();
});
}); </script> ... <div id="domMessage" style="display:none;">
<h1>We are processing your request. Please be patient.</h1>
</div>

参考:http://malsup.com/jquery/block/#overview

jQuery BlockUI Plugin Demo 3(Page Blocking Examples)的更多相关文章

  1. jQuery BlockUI Plugin Demo 4(Element Blocking Examples)

    Element Blocking Examples This page demonstrates how to block selected elements on the page rather t ...

  2. jQuery BlockUI Plugin Demo 6(Options)

    Options BlockUI's default options look (exactly) like this: // override these in your code to change ...

  3. jQuery BlockUI Plugin Demo 5(Simple Modal Dialog Example)

    Simple Modal Dialog Example This page demonstrates how to display a simple modal dialog. The button ...

  4. jQuery BlockUI Plugin Demo 2

    Overview The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without l ...

  5. jQuery BlockUI Plugin Demo

    1.Login Form $(document).ready(function() { $('#demo1').click(function() { $.blockUI({ message: $('# ...

  6. 基于jQuery的移动轮播图(支持触屏)

    移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...

  7. jquery-2 jQuery原理和核心方法(多看学习视频)

    jquery-2  jQuery原理和核心方法(多看学习视频) 一.总结 一句话总结:jQuery就是普通的js对象,只不过方法比较多而已,属性就length一个. 1.jquery的链式操作的底层原 ...

  8. jQuery实现三级联动菜单(鼠标悬停联动)

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> < ...

  9. Selenium的PO模式(Page Object Model)|(Selenium Webdriver For Python)

            研究Selenium + python 自动化测试有近两个月了,不能说非常熟练,起码对selenium自动化的执行有了深入的认识. 从最初无结构的代码,到类的使用,方法封装,从原始函数 ...

随机推荐

  1. 一、XML DOM、XMLDocument

    一.XML DOM概述 XML 文档大小写敏感.属性用引号括起来,每一个标记都要闭合. DOM是XML文档的内存中树状的表示形式. 继承关系图: XmlNode;//XML节点 ......XmlDo ...

  2. 【CCF CSP】 20171203 行车路线 Java(有问题)80分

    问题描述 小明和小芳出去乡村玩,小明负责开车,小芳来导航. 小芳将可能的道路分为大道和小道.大道比较好走,每走1公里小明会增加1的疲劳度.小道不好走,如果连续走小道,小明的疲劳值会快速增加,连续走s公 ...

  3. Hdu 4312-Meeting point-2——哈夫曼距离与切比雪夫距离

    题意 从 $n$ 个点中选择一点,使得其他点到其的切比雪夫距离最小($0 < n \leq 1e5$). 分析 定理:$(x_1, y_1)$ 与 $(x_2, y_2)$ 的曼哈顿距离等于 $ ...

  4. javax.persistence.TransactionRequiredException: Executing an update/delete query

    最近在springboot中整合jpa的时候碰到一个异常,异常如下 javax.persistence.TransactionRequiredException: Executing an updat ...

  5. Oracle 与 postgreSQL 事务处理区别(多版本与undo区别)

    2015年左右,因为工作需要用MongoDB.CouchBase这两种文档型数据库,时不时到这两个数据库官网上查资料.报BUG.时常可以在MongoDB官网上看到这样一些新闻,“某某企业成功将MySQ ...

  6. MongoDB 查看集合是否分片

    MongoDB会把分片过的集合保存在config.collection集合中,若需要查看分片键,则需要根据该集合进行查找.官方的其他很多分片快捷命令也都处于config库 三种方式 1.去config ...

  7. 四十.创建Redis集群 管理集群

    环境准备 准备 6台(51-56) redis服务器  以默认配置运行redis服务即可  一.创建Redis集群 1.启用集群功能( 51-56 都要配置) ]#  netstat -antupl ...

  8. web+文件夹上传

    一. 大文件上传基础描述: 各种WEB框架中,对于浏览器上传文件的请求,都有自己的处理对象负责对Http MultiPart协议内容进行解析,并供开发人员调用请求的表单内容. 比如: Spring 框 ...

  9. Redis学习之一--基础知识

    一.定义 REmote DIctionary Server(Redis) 是一个以字典结构存储数据的key-value存储系统:使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化 ...

  10. VTK 简单点云数据显示绘制

    基于vtkPolyData,绘制时除了输入点坐标,还需要通过setVerts指定点绘制信息. simplePoints.txt的内容为简单的 xyz,如: 20 20 20 20 20 30 20 2 ...