jquery block ui
2012-11-27 13:18
281 查看
经常会有些同志问我有没有好用的基于jQuery的弹出层插件,我通常都会毫不犹豫的推荐他这款插件–BlockUI。我也极少接触到其他的jQuery弹出层插件,因为我觉得有了BlockUI这款功能强大的插件已经能满足我的需求了。先看看BlockUI的演示效果:查看演示BlockUI支持很多常见的弹出层,表单、图片、div窗口等。那么这个插件该如何使用呢?接着往下看。先导入jQuery的库文件(小提示:使用Google服务器的压缩版jQuery库文件加载速度会更快),然后再导入BlockUI的库文件,如果你觉得库文件比较大你可以使用压缩技术对其进行压缩,本博在另一篇文章中详细的说明了javascript文件和CSS文件的压缩。导入库文件后,就可以调用BlockUI了,BlockUI的调用挺简单的,看下面这段代码
$(function(){$('#box_btn').click(function(){ //给box_btn绑定一个鼠标点击的事件$.blockUI({ //当点击事件发生时调用弹出层message: $('#box'), //要弹出的元素boxcss: { //弹出元素的CSS属性top: '50%',left: '50%',textAlign: 'left',marginLeft: '-320px',marginTop: '-145px',width: '600px',background: 'none'}});$('.blockOverlay').attr('title','单击关闭').click($.unblockUI); //遮罩层属性的设置以及当鼠标单击遮罩层可以关闭弹出层$('.close').click($.unblockUI); //也可以自定义一个关闭按钮来关闭弹出层});});看了上面的代码,其实你会发觉BlockUI的使用很简单,有2个重要的方法分别是调用弹出层($.blockUI)和关闭弹出层($.unblockUI)。$.blockUI定义了一个message属性的,该属性的值就定义了要弹出的元素,比如要弹出一个id为box的div元素,就可以这样写:message: $(‘#box’),对应了上面的第4行代码。需要注意的是,要弹出的那个元素在弹出之前要将其在页面中隐藏即设置该元素的CSS样式为display:none。$.blockUI还定义了一个css属性,该属性可以对弹出层的样式进行再定义。细心的同志可能会打开BlockUI的库文件查看,其实在库文件中也默认定义了一个弹出层的样式,如果你在页面中定义的样式效果并不是很理想,最好是看看库文件中的$.blockUI.defaults的CSS属性。如果你想了解一些BlockUI的更高级的用法你可以去该插件的官网看看说明文档。BlockUI的下载地址是:hhttp://jquery.malsup.com/block/#download另一个简单实用的弹出层组件–easyDialog:http://stylechen.com/easydialog-v2.0.html原载于:雨夜带刀’s Blog本文链接:http://stylechen.com/jquery-blockui.html如需转载请以链接形式注明原载或原文地址。
相关文章推荐
- 用JQuery BlockUI实现删除确认对话框
- 弹出层之2:JQuery.BlockUI
- jQuery BlockUI 插件(遮罩层)
- 关于 jQuery blockUI 的一点小问题(二)
- jQuery BlockUI插件
- jquery blockUI 扩展插件 Dialog
- jquery blockUI插件实现遮罩层
- 使用JQuery blockUI插件示例(加载数据时使用相当于updateprogress)
- jQuery blockUI插件在ajax提交的时候的用处
- 弹出层之2:JQuery.BlockUI
- jQuery插件之BlockUI
- jQuery BlockUI Plugin加载插件
- jquery.blockUI.js实现上传滚动等待效果
- jQuery blockUI插件在ajax提交的时候的用处
- jQuery BlockUI
- BlockUI jQuery遮罩插件
- jQuery BlockUI Plugin Demo 2
- 使用Jquery blockUI插件实现在点击按钮提交后阻止再次点击,当处理完后解除阻止
- jquery blockUI 遮罩不能消失与不能提交的解决方法
- 弹出层:JQuery.BlockUI 学习