一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery 弹出层之JQuery.BlockUI插件

时间:2011-10-02 编辑:简简单单 来源:一聚教程网

JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表。

jQuery的BlockUI插件可以让你在使用AJAX时模拟同步行为,锁定浏览器(模式窗口)。当被激活时,它会防止用户活动的页面(或页面的一部分),直到它被禁用。 BlockUI添加元素的DOM,给它的外观和阻止用户交互行为。

1、首先引入插件

   
   
2、调用

 

 

 代码如下 复制代码



   
   
   


   

           
  1. 阻止页面的用户的活动,不会自动消失,请刷新: $.blockUI();
               
           

  2.        
  3. 自定义消息:
               
           

  4.        
  5. 自定义样式:
               
           

  6.        
  7. 弹出指定的元素,并关闭弹出层(该层可以为隐藏):
               
           

  8.        
  9. 设置淡入,淡出,自动关闭时间:
               
           

  10.    

   


 

3、样式修改

jQuery blockUI 提供的默认样式过于朴素, 可以在每一次调用blockUI() 函数时进行修改. 也一次直接修改库文件 jquery.blockUI.js, 修改$.blockUI.defaults 对象相关的代码:

 

 代码如下 复制代码

显示源码
// 重写defaults对象中的属性
    $.blockUI.defaults = {
   
    //弹出的信息
    message:  '

Please wait...

',
 
    //定义消息框样式
    // $.blockUI.defaults.css = {};

    //默认定义消息框样式Css样式
    css: {
        padding:        0,
        margin:         0,
        width:          '30%',
        top:            '40%',
        left:           '35%',
        textAlign:      'center',
        color:          '#000',
        border:         '3px solid #aaa',
        backgroundColor:'#fff',
        cursor:         'wait'
    },
 
    // 遮罩样式
    overlayCSS:  {
        backgroundColor: '#000', //颜色
        opacity:         0.6 //透明度
    },
 
    // 使用$.growlUI完成自动气泡时的样式
    growlCSS: {
        width:    '350px',
        top:      '10px',
        left:     '',
        right:    '10px',
        border:   'none',
        padding:  '5px',
        opacity:   0.6,
        cursor:    null,
        color:    '#fff',
        backgroundColor: '#000',
        '-webkit-border-radius': '10px',  //貌似是圆角
        '-moz-border-radius':    '10px'
    },
 
    // 是否在非IE浏览器中使IFrame获得焦点,未验证的
    forceIframe: false,
 
    // 遮罩层的Z-Index值,越大越在上面
    baseZ: 1000,
 
    // 是否居中
    centerX: true,
    centerY: true,
 
    //是否允许拉大
    //短的网页上。禁用如果你想防止车身高度的变化
    allowBodyStretch: true,
 
   //遮罩时是否禁用键盘和鼠标事件
    bindEvents: true,
 
    // be default blockUI will supress tab navigation from leaving blocking content
    // (if bindEvents is true)
    //遮罩内容的Tab导航是否可用
    constrainTabKey: true,
 
    //淡入时间
    fadeIn:  200,
 
       //淡出时间
    fadeOut:  400,
 
    // time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
    //自动淡出时间
    timeout: 0,
 
    //disable if you don't want to show the overlay
    //是否自动遮罩
    showOverlay: true,
 
    // if true, focus will be placed in the first available input field when
    // page blocking
    //自动获得焦点
    focusInput: true,
 
    //抑制FF/Linux的叠加样式的使用(由于具有不透明的性能问题)
    applyPlatformOpacityRules:true,
 
    //调用解封已完成时回调方法;
    // onUnblock(element, options)
    onUnblock: null
 

 

总结:上面的文字个人认为写的比较烂,但基本的使用没有问题,详尽的支持是官网:

热门栏目