Jquery中BlockUI的遮罩效果详解

    xiaoxiao2021-03-25  95

    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. 旧版本的文档在这里.

    转载请注明原文地址: https://ju.6miu.com/read-11786.html

    最新回复(0)