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

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

10个VSCode高效开发插件

本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率。VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具

chrome插件开发

上手调试:打开chrome://extensions/ 开启开发者模式,选择加载已解压的扩展程序,选中自己的项目文件即可上手调试;引入vue 会出现 安全性问题,需要在manifest.json中设置

jquery.validate验证

jquery validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求

js轮播插件_轮播图js代码插件总汇

这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等

vue-cli3配置webpack-bundle-analyzer插件

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

揭秘webpack plugin

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

AnySlider:适用于任何Html内容的jQuery Slider插件

任何Slider都是一个易于使用且支持触摸的jQuery插件,允许您为任何html内容创建可自定义的滑块,如图像,文本,视频等。在页面上包含jQuery库和jQuery AnySlider

提升工作效率的Chrome插件推荐

推荐几个我觉得非常不错的 Chrome 插件,都是我非常常用的。Postman、Octotree、OneTab、Momentum、掘金、Night Eye、一键管理所有扩展

vue插件开发toast

在没有封装插件之前,如果不使用第三方插件,那么很多情况下我们会编写几个常用的组件来提供给页面使用,如Alert/Loading组件,而你可能需要在很多页面中引入并且通过components注册组件

使用原生js开发插件的实现方法

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码

点击更多...

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