jQuery遮罩插件jQuery.blockUI.js简介

jQuery BlockUI Plugin概述:

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

使用jQuery BlockUI,首先需要添加插件js源码的引用:

<script type="text/javascript" src="http://malsup.github.io/min/jquery.blockUI.min.js"></script>

用法很简单,阻止用户对页面的交互:

$.blockUI();

使用自定义信息阻塞UI:

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

使用自定义样式阻塞UI:

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

解除对页面的遮罩:

$.unblockUI();

如果你想要使用缺省设置对所有的ajax请求都使用UI遮罩,只需添加下面的语句即可:

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

页面遮罩示例:

下面演示了几种阻塞页面的方式,点击下面的按钮激活blockUI

上例使用了下面的代码:

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

页面元素遮罩示例:

下面的例子演示了使用blockUI如何对页面中的元素进行遮罩,而非遮罩整个页面。点击下面的按钮查看效果:

Test link - click me!

lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo Test link - click me! lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet

This text will not be blocked. Test link - click me!

上例使用了下面的代码:

<script type="text/javascript">
    $(document).ready(function() {

        $('#blockButton').click(function() {
            $('div.test').block({ message: null });
        });

        $('#blockButton2').click(function() {
            $('div.test').block({
                message: '<h1>Processing</h1>',
                css: { border: '3px solid #a00' }
            });
        });

        $('#unblockButton').click(function() {
            $('div.test').unblock();
        });

        $('a.test').click(function() {
            alert('link clicked');
            return false;
        });
    });
</script>

简单模态框示例:

下面的例子展示了如何显示一个简单的模态对话框。下面的按钮使用自定义消息调用blockUI。根据用户反馈是或者否,当页面被遮罩时,会发送ajax请求。

...

使用了下面的源码:

<script type="text/javascript">
    $(document).ready(function() {

        $('#test').click(function() {
            $.blockUI({ message: $('#question'), css: { width: '275px' } });
        });

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

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

        $('#no').click(function() {
            $.unblockUI();
            return false;
        });

    });
</script>

...

<input id="test" type="submit" value="Show Dialog" />

...

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

选项:

BlockUI的缺省选项如下所示:

// override these in your code to change the default behavior and style
$.blockUI.defaults = {
    // message displayed when blocking (use null for no message)
    message:  '<h1>Please wait...</h1>',

    title: null,        // title string; only used when theme == true
    draggable: true,    // only used when theme == true (requires jquery-ui.js to be loaded)

    theme: false, // set to true to use with jQuery UI themes

    // styles for the message when blocking; if you wish to disable
    // these and use an external stylesheet then do this in your code:
    // $.blockUI.defaults.css = {};
    css: {
        padding:        0,
        margin:         0,
        width:          '30%',
        top:            '40%',
        left:           '35%',
        textAlign:      'center',
        color:          '#000',
        border:         '3px solid #aaa',
        backgroundColor:'#fff',
        cursor:         'wait'
    },

    // minimal style set used when themes are used
    themedCSS: {
        width:  '30%',
        top:    '40%',
        left:   '35%'
    },

    // styles for the overlay
    overlayCSS:  {
        backgroundColor: '#000',
        opacity:         0.6,
        cursor:          'wait'
    },

    // style to replace wait cursor before unblocking to correct issue
    // of lingering wait cursor
    cursorReset: 'default',

    // styles applied when using $.growlUI
    growlCSS: {
        width:    '350px',
        top:      '10px',
        left:     '',
        right:    '10px',
        border:   'none',
        padding:  '5px',
        opacity:   0.6,
        cursor:    null,
        color:    '#fff',
        backgroundColor: '#000',
        '-webkit-border-radius': '10px',
        '-moz-border-radius':    '10px'
    },
    
    // IE issues: 'about:blank' fails on HTTPS and javascript:false is s-l-o-w
    // (hat tip to Jorge H. N. de Vasconcelos)
    iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',

    // force usage of iframe in non-IE browsers (handy for blocking applets)
    forceIframe: false,

    // z-index for the blocking overlay
    baseZ: 1000,

    // set these to true to have the message automatically centered
    centerX: true, // <-- only effects element blocking (page block controlled via css above)
    centerY: true,

    // allow body element to be stetched in ie6; this makes blocking look better
    // on "short" pages.  disable if you wish to prevent changes to the body height
    allowBodyStretch: true,

    // enable if you want key and mouse events to be disabled for content that is blocked
    bindEvents: true,

    // be default blockUI will supress tab navigation from leaving blocking content
    // (if bindEvents is true)
    constrainTabKey: true,

    // fadeIn time in millis; set to 0 to disable fadeIn on block
    fadeIn:  200,

    // fadeOut time in millis; set to 0 to disable fadeOut on unblock
    fadeOut:  400,

    // time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
    timeout: 0,

    // disable if you don't want to show the overlay
    showOverlay: true,

    // if true, focus will be placed in the first available input field when
    // page blocking
    focusInput: true,

    // suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity)
    // no longer needed in 2012
    // applyPlatformOpacityRules: true,

    // callback method invoked when fadeIn has completed and blocking message is visible
    onBlock: null,

    // callback method invoked when unblocking has completed; the callback is
    // passed the element that has been unblocked (which is the window object for page
    // blocks) and the options that were passed to the unblock call:
    //   onUnblock(element, options)
    onUnblock: null,

    // don't ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
    quirksmodeOffsetHack: 4,

    // class name of the message block
    blockMsgClass: 'blockMsg',

    // if it is already blocked, then ignore it (don't unblock and reblock)
    ignoreIfBlocked: false
};

更改blockUI的选项很简单,可以采用下面两种方式:

  1. 全局变更,直接覆盖$.blockUI.defaults对象中的值
  2. 局部变更,向blockUI(或者block)函数中传递选项对象

全局覆盖:

对选项声明不同的值即可完成全局变更,例如:

// change message border
$.blockUI.defaults.css.border = '5px solid red';

// make fadeOut effect shorter
$.blockUI.defaults.fadeOut = 200;

局部覆盖:

通过向blockUI, unblockUI, block 或者unblock函数传递对象即可实现局部覆盖,局部选项对象与全局选项完全相同,例如:

// change message border
$.blockUI({ css: { border = '5px solid red'} });

...

// make fadeOut effect shorter
$.unblockUI({ fadeOut: 200 });

...

// use a different message
$.blockUI({ message: 'Hold on!' });

...

// use a different message
$('#myDiv').block({ message: 'Processing...' });

 

本文链接:http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

如果您喜欢这篇博文,欢迎您捐赠书影博客: ,查看支付宝二维码

Pingbacks已关闭。

评论
  1. 书影网友 书影网友 发布于 2017年7月7日 11:05 #

    如果我把弹框放到了iframe里,当弹出的时候显示在父级页面里。这种情况怎么做呢?

张贴您的评论