`
m635674608
  • 浏览: 5027876 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    jquery.blockUI.js

    《jQuery.blockUI.js插件详解:打造高效用户体验》 在Web开发中,提供良好的用户体验是至关重要的。当网站或应用程序正在进行耗时的操作时,如数据加载、提交表单或进行后台处理,用户可能会尝试进行其他操作,这...

    jquery.blockui遮罩插件

    **jQuery BlockUI 插件详解** 在前端开发中,我们经常需要在进行异步操作(如Ajax请求)时,防止用户交互对正在进行的过程造成干扰。这时,就需要用到一种称为“遮罩”或“锁定”的功能,使得用户界面在特定时段内...

    Jquery的blockUI使用

    **jQuery的BlockUI插件详解** 在Web开发中,我们经常需要实现页面部分或整体的加载效果,例如在用户点击按钮后,防止用户在后台处理完成前进行其他操作。这时,BlockUI插件就能派上用场。BlockUI是jQuery的一个扩展...

    jquery.blockUI

    《jQuery BlockUI插件详解与应用》 在Web开发中,用户体验是至关重要的,尤其是在进行异步操作(如Ajax请求)时,为了防止用户在数据处理完成前误操作,我们通常需要一种机制来暂时禁用页面上的交互。jQuery ...

    JQuery.BlockUI 弹出层

    **jQuery.BlockUI 插件详解** 在Web开发中,弹出层是一种常见的用户交互元素,用于显示警告、提示、确认信息或加载等待等场景。jQuery.BlockUI是一个专门为jQuery设计的弹出层插件,它以其小巧的体积、易用性和强大...

    锁屏 jQuery插件 blockUI

    **jQuery BlockUI 插件详解** 在Web开发中,用户界面的交互体验是至关重要的,尤其是在进行异步操作或者页面加载时,为了防止用户误操作,我们常常需要对页面进行部分或全部锁定,这就是锁屏功能。jQuery BlockUI ...

    Jquery 等待弹出框插件jquery.blockUI(遮罩蒙板)

    **jQuery BlockUI 插件详解** 在Web开发中,我们经常需要在页面处理异步请求或执行长时间操作时,向用户展示一个等待提示或者加载指示器,以告知用户页面正在处理事务并防止用户在此期间进行其他操作。jQuery ...

    JQuery Blockui遮罩功能

    《JQuery Blockui 遮罩功能详解及应用实践》 在Web开发中,我们经常需要在用户进行某些操作(如提交表单、加载数据)时显示一个加载提示或者阻止用户交互,这时JQuery Blockui插件就派上了用场。Blockui允许我们在...

    Jquery BlockUI

    **jQuery BlockUI 插件详解** BlockUI 是一个流行的 jQuery 插件,它允许开发者轻松地在网页上创建页面或元素级别的遮罩效果,也就是在页面或特定元素上添加一个覆盖层,通常用于模拟页面加载状态或者阻止用户交互...

    jquery遮罩

    **jQuery遮罩插件详解** 在网页开发中,有时候我们需要在页面执行某些操作时,比如加载数据或提交表单,防止用户在等待过程中误操作,这时我们通常会使用到遮罩层(Mask)。jQuery作为一款强大的JavaScript库,提供...

    jquery-ui-eazyui-api

    **jQuery UI EasyUI API 知识点详解** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面组件集合,它提供了一套完整的、可自定义的、跨浏览器的界面元素,包括对话框、拖放功能、日期选择器、进度条等。EasyUI...

    jquery插件

    在本文中,我们将深入探讨jQuery插件的开发过程,了解如何创建一个基本的jQuery插件,以及如何通过插件实现特定功能,例如"blockui",这个插件通常用于页面元素的锁定,防止用户在特定操作期间进行交互。 ### 1. ...

    50个开发者最喜欢使用的jQuery插件

    **jQuery 插件详解** jQuery 是一款高效、简洁且易用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。由于其强大的功能和丰富的生态系统,jQuery 插件应运而生,为开发者提供了无数...

    KoBlockedSpin:展示如何在 Knockout 绑定中使用 Spin.js 和 JQuery BlockedUI 的示例项目

    4. **JQuery BlockedUI 使用**:说明如何在 Knockout 视图模型中触发和解除 BlockUI,以及自定义遮罩样式。 5. **异步操作管理**:讨论如何在 Knockout 中处理异步请求,并在请求开始和结束时显示/隐藏加载指示器。 ...

Global site tag (gtag.js) - Google Analytics