Chinaunix首页 | 论坛 | 博客
  • 博客访问: 313202
  • 博文数量: 206
  • 博客积分: 1040
  • 博客等级: 少尉
  • 技术积分: 1756
  • 用 户 组: 普通用户
  • 注册时间: 2012-04-09 17:22
文章分类

全部博文(206)

文章存档

2015年(3)

2014年(147)

2013年(2)

2012年(54)

我的朋友

分类: 系统运维

2012-05-08 09:38:55


点击(此处)折叠或打开

  1. 1.$.ajax({
  2. 2. type: "POST",
  3. 3. url: "GetFreeStand.do",
  4. 4. data: "hid="+$("#hall").val()+"&pid="+$("#plan").val(),
  5. 5. dataType:'json',
  6. 6. async: false,
  7. 7. beforeSend:function(){
  8. 8. $.blockUI({message:'获取大厅大厅的空闲摊位,请稍候...'});
  9. 9. },
  10. 10. complete: function() {
  11. 11. $.unblockUI();
  12. 12. } ,
  13. 13. success: function(data){
  14. 14. $("#stand").empty();
  15. 15. for(var i=0;i
  16. 16. var row = data.rows[i];
  17. 17. $("#stand")[0].options.add(new Option(row.name,row.id));
  18. 18. }
  19. 19. }
  20. 20. });


BlockUI支持很多常见的弹出层,表单、图片、div窗口等。那么这个插件该如何使用呢?接着往下看。

先导入jQuery的库文件(小提示:使用Google服务器的压缩版jQuery库文件加载速度会更快),然后再导入BlockUI的库文件

blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏,可以在blockUI方法中指定一些参数,来控制弹出层显示的内容,大小,位置等。blockUI方法的常用的参数有:message,css,overlayCSS,showOverlay。

  message:主要用来设置要显示的内容,可以直接设置为一段文字,html代码或者使用jquery获取页面上隐藏的div。

  css:主要用来设置弹出层的样式,包括弹出层的位置,大小,边框等。

  overlayCSS:主要用来设置遮罩层的样式,包括背景色,透明度等。

  showOverlay:主要用来设置是否显示遮罩层,如果要隐藏遮罩层可以设置为false。


 

点击(此处)折叠或打开

  1. $("#btnSubmit").click(function () {
  2. $.blockUI({
  3. message: $("#loginForm"),
  4. css: {
  5. width: '300px',
  6. height: '300px',
  7. left: ($(window).width() - 300) / 2 + 'px',
  8. top: ($(window).height() - 300) / 2 + 'px',
  9. border: 'none'
  10. } });});
  11. $("#btnLogin").click(function () {
  12. $.blockUI({
  13. message: "

    正在登录,请稍候……

    ",
  14. css: {
  15. border: '1px solid black'
  16. } });
  17. setTimeout(function () {
  18. $.unblockUI() }, 1000);});
  19. $("#btnCancel").click(function () {
  20. $.unblockUI();});



 

点击(此处)折叠或打开

  1. $(function(){
  2. $('#box_btn').click(function(){ //给box_btn绑定一个鼠标点击的事件
  3.     $.blockUI({ //当点击事件发生时调用弹出层
  4.         message: $('#box'), //要弹出的元素box
  5.         css: { //弹出元素的CSS属性
  6.         top: '50%',
  7.         left: '50%',
  8.         textAlign: 'left',
  9.         marginLeft: '-320px',
  10.         marginTop: '-145px',
  11.         width: '600px',
  12.         background: 'none'
  13.        }
  14.      });
  15. $('.blockOverlay').attr('title','单击关闭').click($.unblockUI); //遮罩层属性的设置以及当鼠标单击遮罩层可以关闭弹出层
  16. $('.close').click($.unblockUI); //也可以自定义一个关闭按钮来关闭弹出层
  17. });
  18. });

看了上面的代码,其实你会发觉BlockUI的使用很简单,有2个重要的方法分别是调用弹出层($.blockUI)和关闭弹出层($.unblockUI)。

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

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


 

点击(此处)折叠或打开





< /head>
< body>






< /body>
< /html>


 

阅读(3940) | 评论(0) | 转发(0) |
0

上一篇:PS快捷键

下一篇:MySqL常用命令

给主人留下些什么吧!~~