zoukankan      html  css  js  c++  java
  • 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官网

  • 相关阅读:
    D. Babaei and Birthday Cake--- Codeforces Round #343 (Div. 2)
    Vijos P1389婚礼上的小杉
    AIM Tech Round (Div. 2) C. Graph and String
    HDU 5627Clarke and MST
    bzoj 3332 旧试题
    codeforces 842C Ilya And The Tree
    codesforces 671D Roads in Yusland
    Travelling
    codeforces 606C Sorting Railway Cars
    codeforces 651C Watchmen
  • 原文地址:https://www.cnblogs.com/wsun/p/4112989.html
Copyright © 2011-2022 走看看