jquery.blockui.js怎么用

html-css08

jquery.blockui.js怎么用,第1张

http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/

可以参考下这个网站,里面讲了详细怎么使用

jQuery BlockUI Plugin概述:

jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。

使用jQuery BlockUI,首先需要添加插件js源码的引用:

<script type="text/javascript" src="http://malsup.github.io/min/jquery.blockUI.min.js"></script>

用法很简单,阻止用户对页面的交互:

$.blockUI()

使用自定义信息阻塞UI:

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

使用自定义样式阻塞UI:

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

解除对页面的遮罩:

$.unblockUI()

如果你想要使用缺省设置对所有的ajax请求都使用UI遮罩,只需添加下面的语句即可:

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

CSS就可以,这是JQuery的一款著名提示插件blockUI的实现原理。

官方网站示例:http://malsup.com/jquery/block/#demos

楼主有兴趣可以慢慢研究其源代码,不是很难。

css: {

padding:0,

margin: 0,

width: '30%',

position: fixed,

top:'40%',

left: '35%',

textAlign: 'center',

color: '#000',

border: '3px solid #aaa',

backgroundColor:'#fff',

cursor: 'wait',

opacity: '0.8'

},

原理:

弹出两个层 一个是对话框 一个是遮罩层 对话框位于遮罩层上方

对话框用于显示用户可以操作的地方

遮罩层就是一个铺满全屏的一个半透明的div 阻止用户点击别的地方,以实现未激活的现象

----例子 百度搜 blockui这个就是一个挺简单的js插件