Jquery中BlockUI的详解

2019独角兽企业重金招聘Python工程师标准>>>

Jquery中BlockUI的详解

 

BlockUI插件需要那个jQuery版本的支持？
BlockUI兼容jQuery v1.2.3以上的版本
 

BlockUI插件的V2版本有那些变化？
解除锁定的时候，用于提示信息的元素不会从DOM中移除
默认的遮罩层为黑色
可用的选项设置进行了统一和清理
设置插件选项的方法改变了
放弃了对Opera 8的支持
提高了源代码的可读性
移除了displayBox功能 (其他 plugins会做的更好)
 

我的原代码中的blockUI插件与新的2.00版兼容么？
不兼容，如果原代码改变了blockUI的默认属性，那么会出现兼容问题。如何设置选项的语法发生了细微的改变。请查看Options页来了解新版本的选项设置方法。
 

BlockUI插件还依赖于其他的插件么？
不依赖
 

我如何使用外部样式表来格式化提示信息？
请查看 demo页.
 

我可以改变页面锁定时默认的提示信息么？
 
可以。默认的提示信息储存在$.blockUI.defaults.message中。你可以以一个新的值来替换它，例如：
$.blockUI.defaults.message = "Please be patient...";

 

我能够改变遮罩层的颜色和透明度么？

可以。默认的遮罩层样式储存在 $.blockUI.defaults.overlayCSS中。你可以指定一个不同的颜色和透明度，

例如
// 使用黄色遮罩层
$.blockUI.defaults.overlayCSS.backgroundColor = '#ff0';
// 使遮罩层更透明
$.blockUI.defaults.overlayCSS.opacity = '.2';

 

BlockUI支持Opera 8么？
不支持
 
在Linux的FF上我为什么看不到遮罩层？

有几个人告诉我，在FF/Linux上整个页面的透明度渲染慢的让人发疯，所以默认情况下，在这些平台上遮罩层不透明。你可以重设applyPlatformOpacityRules值来启用透明度。例如:

// 在FF/Linux下启用遮罩层透明$.blockUI.defaults.applyPlatformOpacityRules = false;

 

BlockUI基本使用
      // 当有ajax请求时，当加载信息较慢时，会显示该等待信息，带来良好的用户体验
        $(document).ajaxStart(function () {
            $.blockUI({

                // $.blockUI.defaults.message = "请稍候";(不写在$.blockUI({})里，写在外面)
                message: '<span style="font-size:13px;font-weight:bolder">请稍候</span>',

              

                // 指的是提示框的css
                css: {
                    width: "45px",   // 宽度小一点
                    top: "50%",
                    left: "50%"
                },

              

                // 遮光罩的css
                // 等价$.blockUI.defaults.overlayCSS.backgroundColor = "#E4E7EC";
                overlayCSS: {
                    backgroundColor: "yellow",
                    opacity:"0.8"
                }
            });
        });

 

下载
新版本的blockUI v2.00可以在这里得到: jquery.blockUI.js.

旧版本的blockUI仍然可以在这里得到： http://jqueryjs.googlecode.com/svn/trunk/plugins/blockUI/jquery.blockUI.js. 旧版本的文档在这里.

 

原帖地址：http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html

转载于:https://my.oschina.net/xiaominmin/blog/1598454