建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery网页遮罩层插件blockUI.js

来源:易助科技网浏览量:18收藏

简介


jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起 Ajax 请求的行为。使用 XMLHttpRequest 对象同步模式导致整个浏览器锁定,直到远程调用完成为止。这通常不是一种可取的行为。该插件激活时,会组织用户在页面进行的操作,直到插件被关闭。BlockUI 通过向 DOM 中添加元素实现其外观和组织用户交互的行为。


JQuery网页遮罩层插件blockUI.js-示例图



使用


1.  引入 jquery 和 jquery.blockUI.js 文件


2. 调用


用法很简单,组织用户对页面的交互:


$.blockUI();


使用自定义信息阻塞UI:


$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });


使用自定义样式阻塞UI:


$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });


解除对页面的遮罩


$.unblockUI();


页面阻塞示例


<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/

Github 地址 :https://github.com/malsup/blockui/