• JQuery 插件


    JQuery的弹窗插件,网上实在有很多做的比较好的,比如artDialog、layer,甚至EasyUI等等。这些在效果上做的非常好。但我觉得一个小小的弹窗提示,没有必要引用这些(其实是有点大材小用了!)这里要介绍的是BlockUI,一个我认为非常好用的,简单朴素轻量级的插件。

    先看一下效果:

    下面就来讲一下使用。

    一、引用插件

    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="Jquery.BlockUI.min.js" type="text/javascript"></script>

    二、使用

    <script type="text/javascript">
             $.blockUI();      // 打开     
            
             //$.unblockUI();  // 关闭
    </script>

    只需要简单的一句就可以得到上面图片中的弹窗了。

    三、参数设置及用法

    打开BlockUI的源码可以看到,弹窗的属性都可以在defaults里面设置。

    message : 弹出框的信息,可以为html,默认为:<h1>Please wait...</h1>

      如:$.blockUI({message:'这是测评'});

            $.blockUI({message:$("#test")}); 

    title : 弹窗标题,默认 null ,只能在 theme 为true 的时候使用

    theme : 默认 false ,设置为 true 时将使用jqueryUI的 theme

    draggable : 是否可拖动,默认 true

    css : 弹窗的css样式,默认如下

    css:{
    
        padding: 0,
        margin: 0,
         '30%',
        top: '40%',
        left: '35%',
        textAlign: 'center',
        color: '#000',
        border: '3px solid #aaa',
        backgroundColor:'#fff',
        cursor: 'default'
    
     }

    overlayCSS : 遮罩层的样式,可以设置背景颜色,透明度,鼠标样式,默认如下:

    overlayCSS:{
    
          backgroundColor: '#000',
          opacity: 0.6,
          cursor: 'default'
    
      }

    cursorReset : 等待消息返回是鼠标样式重置,默认为Default

    cursorReset: 'default'

    growlCSS : 使用$.growlUI完成弹窗时的样式(具体怎么用没试过)

    growlCSS: {
                width:        '350px',
                top:        '10px',
                left:        '',
                right:        '10px',
                border:        'none',
                padding:    '5px',
                opacity:    0.6,
                cursor:        'default',
                color:        '#fff',
                backgroundColor: '#000',
                '-webkit-border-radius':'10px',
                '-moz-border-radius':    '10px',
                'border-radius':        '10px'
          }

    baseZ: 弹窗的z-index,默认1000,一般不需要修改,越大越在上面

    centerX: 水平居中,默认为 true

    centerY: 竖直居中,默认为 true

    bindEvents:  遮罩时是否禁用键盘和鼠标事件,默认为 true

    constrainTabKey: 遮罩内容的Tab导航是否可用,默认为 true

    fadeIn : 淡入时间,默认为 200
    fadeOut : 淡出时间,默认为 400

    timeout : 自动淡出时间 默认为 0,不自动淡出

    showOverlay : 是否自动遮罩 默认为 true

    focusInput : 弹窗后自动获得焦点 默认为 true

    onBlock : 弹窗完成后的回调,可自行定义function,默认为 null 

    onUnblock : 弹窗解锁后的回调,可自行定义function,默认为 null 

    常用的设置目测也就这么多了,想了解其它更多的属性设置,可以访问blockUI官网

  • 相关阅读:
    程序修炼之道——从小工到专家(3)
    组合
    子类重用父类的功能
    对象之间的交互
    属性查找与绑定方法
    类与对象的定义与使用
    hashlib模块subprocess模块
    configerparser模块
    shelve模块 xml模块
    sys模块 json pickle模块
  • 原文地址:https://www.cnblogs.com/wsun/p/4112989.html
Copyright © 2020-2023  润新知