关闭

BlockUI详细用法_Jquery中ajax加载提示插件blickUI

时间: 2018-12-15阅读: 1748标签: 插件

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);
$(
'#box_btn'
).click(function(){   
//给box_btn绑定一个鼠标点击的事件
$.blockUI({    //当点击事件发生时调用弹出层
   message: $('#box'),//要弹出的元素box
   css: {  top: '50%',left: '50%', textAlign: 'left',marginLeft: '-320px', marginTop: '-145px',  width: '600px’,background: 'none'}
});

改变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!' });

$.blockUI定义了一个message属性的,该属性的值就定义了要弹出的元素,比如要弹出一个id为box的div元素,就可以这样写:message: $('#box’),对应了上面的第4行代码。需要注意的是,要弹出的那个元素在弹出之前要将其在页面中隐藏即设置该元素的CSS样式为display:none。

$.blockUI还定义了一个css属性,该属性可以对弹出层的样式进行再定义。细心的同志可能会打开BlockUI的库文件查看,其实在库文件中也默认定义了一个弹出层的样式,如果你在页面中定义的样式效果并不是很理想,最好是看看库文件中的$.blockUI.defaults的CSS属性。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1591

vue项目中vscode格式化配置和eslint配置冲突

使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题

原生 js 实现一个有动画效果的进度条插件 progress

一个用于装载进度条内容的 div (且叫做 container)。然后在 container 里面动态生成三个元素,一个是做为背景的 div (且叫做 progress),一个是做为显示进度的 div (且叫做 bar),还有一个是显示文字的 span (且叫做 text)。

揭秘webpack plugin

Plugin(插件) 是 webpack 生态的的一个关键部分。它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程。这篇文章将尝试探索 webpack plugin

vuedraggable:vue拖拽排序插件

最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入

程序员必备五款chrome浏览器插件

postman一款模拟客户端工具,通常用于开发中调试api接口。相信大部分程序员都有使用过,操作简单且功能强大,支持团队开发。 json这种数据交换格式在数据开发中被运用的越加广泛,jsonview插件可以自动对json数据转码

谷歌插件在测试的应用

随着SOA的普及,各大互联网公司都拥有自己较为成熟的分布式跟踪系统,比如Google的Dapper,Twitter的Zipkin,淘宝的鹰眼,京东的Hydra,eBay的CAL,大众点评的CAT等等:

使用jquery-intro插件做页面引导

设置参数: 设置多个格式 json格式:key:value 可设置参数;下载jquery-intro;设置方法(多个参数设置);在页面中引用jquery-intro;定义引用的区块;配置jquery-intro的显示

Vue自定义指令directive,插件的封装以及混合mixins

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

webpack插件ProvidePlugin的使用方法和eslint配置

配置 webpack.config.js文件里 plugins 属性,配置完以后就可以在代码里直接使用 _ ,而不再需要 import; 注意:(如果不配置eslint,浏览器就会报错:\\\'_\\\' is not defined no-undef)

Js二维码插件:qrious

二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!