jQuery遮罩插件 jquery.blockUI.js

前端之家收集整理的这篇文章主要介绍了jQuery遮罩插件 jquery.blockUI.js前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Overview

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

使用jQuery BlockUI,首先需要在jQuery后面引用 jquery.blockUI.js

jquery.blockUI.js插件下载地址:http://jquery.malsup.com/block/

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

使用自定义信息阻塞UI

 Just a moment...' });

使用自定义样式阻塞UI

解除对页面的遮罩

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


使用例子:

页面遮罩示例:

The following code is used on this page:

 
 
         
            PHP', cache:     } 
 
                                    test(); 
        }); 
                     Just a moment...' }); 
            test(); 
        }); 
                                test(); 
        }); 
 
                                test(); 
        }); 
    }); 
 
 
 
... 
 
 
    We are processing your request.  Please be patient. 
 

页面元素遮罩示例:

 

 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  lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet