BlockUI对话框

简介: BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。

这个插件的用法很简单。

1 阻止用户与页面交互:

$.blockUI();

2 自定义提示信息:

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

3 自定义显示样式:

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

4 解除对页面的锁定:

$.unblockUI();

5 如果要使用默认设置来同步所有的AJAX请求动作,代码如下:

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

----------------------------------------------------------------------------------
BlockUI的默认选项设置如下:

// 可以使用以下代码来自定义行为和样式
$.blockUI.defaults = {
	//锁定时显示的提示信息(无提示信息时设置为null)
    message:  '<h1>Please wait...</h1>',
    
    // 可以用CSS来格式化锁定时显示的信息
    // 如果你希望使用一个外部样式表,请使用一下代码
    // $.blockUI.defaults.css = {};
    css: { 
        padding:        0,
        margin:         0,
        width:          '30%', 
        top:            '40%', 
        left:           '35%', 
        textAlign:      'center', 
        color:          '#000', 
        border:         '3px solid #aaa',
        backgroundColor:'#fff'
    },
    
    // 设置遮罩层的样式
    overlayCSS:  { 
        backgroundColor:'#000', 
        opacity:        '0.6' 
    },
    
    // 允许在ie6中缩放body元素。这会使较短的页面看上去好一些
    // 如果你不想body元素的高度被改变,请设置为disable
    allowBodyStretch: true,
    
    // 默认情况下blockUI会禁止tab导航
    constrainTabKey: true,
    
    // fadeOut时间单位为毫秒。设为0的话,在解除锁定时不使用fadeout效果。 
    fadeOut:  400,
    
    // 禁止在FF/Linux上使用遮罩层样式(由于透明度的性能问题)
    applyPlatformOpacityRules: 1
};

改变blockUI的设置非常简单,有2种方式:

  • 1、全局设置, 通过直接指定$.blockUI.defaults对象的值来设置。
  • 2、局部设置, 将options对象放到 blockUI (或 block) 函数内部。

全局设置

你可以通过直接的赋值来改变默认的选项。例如:

// 改变提示信息的边框
$.blockUI.defaults.css.border = '5px solid red';

// 缩短fadeOut效果的时间
$.blockUI.defaults.fadeOut = 200;

局部设置

局部设置是将options对象放到 blockUI (或 block) 函数内部。这会强制使用局部设置来代替全局设置的值。例如:

// 改变提示信息的边框
$.blockUI({ css: { border = '5px solid red'} });

...

// 缩短fadeOut效果的时间
$.blockUI({ fadeOut: 200 });

...

// 使用一个不同的提示信息
$.blockUI({ message: 'Hold on!' });

博客园大道至简

http://www.cnblogs.com/jams742003/

转载请注明:博客园

目录
相关文章
|
6月前
|
关系型数据库 MySQL Java
【YashanDB知识库】Kettle迁移MySQL到YashanDB
本文介绍了使用Kettle将MySQL数据库中的中文数据迁移到YashanDB的方法,解决因YMP不支持Latin1字符集导致的乱码问题。提供了Windows和Linux两种环境下的操作步骤,包括配置JAVA环境、解压作业包、设置数据库连接(MySQLInput与YashanOutput)、修改表列表配置文件及运行迁移任务。Windows环境支持图形界面便于调试,Linux环境网络性能更优。通过详细的操作指南,确保数据迁移成功并可重试无冲突。
|
网络协议 Ubuntu Linux
|
11月前
|
数据可视化 数据挖掘 API
Python中的数据可视化利器:Matplotlib与Seaborn对比解析
在Python数据科学领域,数据可视化是一个重要环节。它不仅帮助我们理解数据,更能够让我们洞察数据背后的故事。本文将深入探讨两种广泛使用的数据可视化库——Matplotlib与Seaborn,通过对比它们的特点、优劣势以及适用场景,为读者提供一个清晰的选择指南。无论是初学者还是有经验的开发者,都能从中找到有价值的信息,提升自己的数据可视化技能。
552 3
|
Java API Apache
探讨Java中检测字符串是否包含数字和字母的技术
探讨Java中检测字符串是否包含数字和字母的技术
375 2
|
安全
【守护工地安全】YOLOv8实现安全帽检测
【守护工地安全】YOLOv8实现安全帽检测
307 0
|
Ubuntu 前端开发 测试技术
Nginx-性能优化-ab压力测试工具
Apache Benchmark(简称ab) 是Apache安装包中自带的压力测试工具 ,简单易用。
1069 0
Nginx-性能优化-ab压力测试工具
|
Java 数据库 容器
Servlet3.0中支持的异步处理
Servlet3.0中支持的异步处理
176 1
|
监控 开发工具 Docker
Docker 镜像构建:Python & Node
Docker 镜像构建:Python & Node
1017 0
|
SQL Java 关系型数据库
Hibernate - Java 类型, Hibernate 映射类型及 SQL 类型之间的对应关系
Hibernate - Java 类型, Hibernate 映射类型及 SQL 类型之间的对应关系
215 0
|
机器学习/深度学习 数据可视化 数据挖掘
kaggle数据分析【家庭电力消耗分析】
kaggle数据分析【家庭电力消耗分析】
770 0
kaggle数据分析【家庭电力消耗分析】