jQuery遮罩插件jQuery.blockUI介绍及使用

原创 2015年11月17日 20:54:21


jQuery BlockUI Plugin概述:

jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<script src="http://www.oschina.net/js/2012/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="http://malsup.github.io/min/jquery.blockUI.min.js"></script>
<title>jquery block ui插件遮罩效果</title>
<style type="text/css">
    #testblock {
    	height: 400px;
	    width: 600px;
	    background-color: #D8D1D1;
    }
</style>
<script>
	// unblock when ajax activity stops
    //$(document).ajaxStop($.unblockUI);


    $(document).ready(function() {
        $('#pageDemo0').click(function() {
            $.blockUI();
        });

        $('#pageDemo1').click(function() {
            $('#testblock').block();
        });

        $('#pageDemo2').click(function() {
            $('#testblock').block({ message: '<h1><img src="http://static.oschina.net/uploads/space/2014/0430/115223_oFLD_1163935_thumb.gif" /> Just a moment...</h1>' });
        });

        $('#pageDemo3').click(function() {
            $('#testblock').block({ css: { backgroundColor: '#f00', color: '#fff' } });
        });

        $('#pageDemo4').click(function() {
            $('#testblock').block({ message: $('#domMessage') });
        });

        $('#showDialog').click(function() {
            $('#testblock').block({ message: $('#question'), css: { width: '275px' } });
        });

        $('#unblockButton').click(function() {
        	$('#testblock').unblock()
        })

        $('#yes').click(function() {
            // update the block message
            $('#testblock').block({ message: "<h1>Remote call in progress...</h1>" });

            $.ajax({
                url: 'wait.php',
                cache: false,
                complete: function() {
                    // unblock when remote call returns
                    $.unblockUI();
                }
            });
        });

        $('#no').click(function() {
            $('#testblock').unblock();
            return false;
        });
    });
</script>
 </head>

 <body>
 	<input class="demo" id="pageDemo0" type="button" value="block hole page">
 	<input class="demo" id="pageDemo1" type="button" value="Default Message">
 	<input class="demo" id="pageDemo2" type="button" value="Custom Message">
 	<input class="demo" id="pageDemo3" type="button" value="Custom Style">
 	<input class="demo" id="pageDemo4" type="button" value="DOM Element as Message">
 	<input id="showDialog" type="button" value="Show Dialog">
 	<input id="unblockButton" type="button" value="Unblock">
</br>
 <div id="domMessage" style="display:none;">
    <h1>We are processing your request.  Please be patient.</h1>
</div>
</br>
<div id='testblock'>
</div>
</br>
<div id="question" style="display:none; cursor: default">
        <h1>Would you like to contine?.</h1>
        <input type="button" id="yes" value="Yes" />
        <input type="button" id="no" value="No" />
</div>
 </body>
</html>

效果图:


更多案例:http://malsup.com/jquery/block/#demos

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

JQuery blockUI 的使用方法

JQueryBlock UI V2 概述 The jQuery BlockUI 插件是用于进行AJAX 操作时模拟同步传输时锁定浏览器操作[1] 。当它被激活时,它会阻止使用者与页面(或页面的一部分)...

jquery.blockUI.js的使用示例

New Document $(function(){ //检测引入的jquery.js是否正确。 alert("jquery 没有问题!"); ...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

Jquery中BlockUI的详解

BlockUI插件需要那个jQuery版本的支持? BlockUI兼容jQuery v1.2.3以上的版本   BlockUI插件的V2版本有那些变化? 解除锁定的时候,用于提示信息的元素不会...

Jquery弹出层BlockUI的用法(包括登陆界面)

例子一:                         $(document).rea...

Jquery.blockUI.Demo //// dialog.js

//////////暂无内容 Jquery.blockUI.Demo.rar (28.4 KB) ...

BlockUI jQuery遮罩插件

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

jQuery遮罩插件jQuery.blockUI介绍及使用

jQuery BlockUI Plugin概述: jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会阻止用户在页面进行的操作,直到插...

jQuery遮罩插件

mask.js //遮罩 ;(function($){ $.fn.mask = function(label, delay, loading, bgcolor){ $(this...
  • fkeai
  • fkeai
  • 2013-12-25 15:43
  • 743

jquery.blockUI添加加载遮罩

jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观...

jQuery遮罩层插件

在网页上经常遇到需要等待很久的操作,比如导出报表等。为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)