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

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

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-cli3配置webpack-bundle-analyzer插件

为优化vue项目性能,需要使用webpack-bundle-analyzer分析报文件,找出最占用空间的插件有哪些,对应做出优化,网上看了一些网站,有的写的太麻烦了,现将最简单的一种写出来供大家参考

总结18个webpack插件

何为插件(Plugin)?专注处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。Plugin 是一个扩展器,它丰富了 webpack 本身,针对是 loader 结束后,webpack 打包的整个过程

jQuery图片剪裁插件Cropper.js的使用

1.引入必要的js和css核心文件;2.构建html,可以将图片或canvas直接包裹到一个块级元素中。small时预览框;3.初始化插件及相关参数

Vue中过滤器及自定义插件

想不出来,把官方的拿过来Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)

浏览器插件_常用谷歌浏览器插件推荐

常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。

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

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

vue项目中使用新手引导功能_intro.js

如何在vue项目中使用用intro.js新手引导功能呢?这里需要使用到vue-introjs插件,vue-introjs是在Vue中绑定intro.js所使用的。在使用vue-introjs前,需要先安装intro.js

使用CodeMirror插件遇到的问题

结果你会发现,可以复制代码,没问题,但是不可以粘贴复制的代码,那问题到底出现在了哪里呢?首先呢,排除clipboard插件的问题,这个很简单,随便找个例子测试一下就行了

基于Vue的验证码插件vue2-verify

在我们Web项目开发中,验证码是一种比较常见的区分用户是计算机还是人的手段。主要是为了保证项目的安全。现在Vue开发的项目很多,基本都是前后端分离的。给大家推荐一个基于Vue比较好用的验证码插件vue2-verify。但是大家要注意一点

前端最常用的vscode插件集

在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集

点击更多...

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