zoukankan      html  css  js  c++  java
  • blockUI1.33参数

    The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

        这个插件可以让你锁定浏览器从而组织用户的操作直到解锁。    使用非常简单。

        锁定:

    $.blockUI();
       
        解锁锁定:

    $
    .unblockUI();


       在Ajax中使用。当触发Ajax是进行锁定,结束时解锁

    $
    ().ajaxStart($.blockUI).ajaxStop($.unblockUI);

       以下是BlockUI默认参数配置:

    $.blockUI.defaults = { 
        // message displayed when blocking (use null for no message)
         message:  '<h1>Please wait...</h1>',

        // styles for the message when blocking; if you wish to disable
        // these and use an external stylesheet then do this in your code:
        // $.blockUI.defaults.css = {};
         css: {
             padding:        0,
             margin:         0,
                       '30%',
             top:            '40%',
             left:           '35%',
             textAlign:      'center',
             color:          '#000',
             border:         '3px solid #aaa',
             backgroundColor:'#fff',
             cursor:         'wait'
         },

        // styles for the overlay
         overlayCSS:   {
             backgroundColor:'#000',
             opacity:        '0.6'
         },

        // styles applied when using $.growlUI
         growlCSS: {
                 '350px',
             top:      '10px',
             left:     '',
             right:    '10px',
             border:   'none',
             padding:  '5px',
             opacity:  '0.6',
             color:    '#fff',
             backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius':    '10px'
         },

        // z-index for the blocking overlay
         baseZ: 1000,

        // set these to true to have the message automatically centered
         centerX: true, // <-- only effects element blocking (page block controlled via css above)
         centerY: true,

        // allow body element to be stetched in ie6; this makes blocking look better
        // on "short" pages.   disable if you wish to prevent changes to the body height
         allowBodyStretch: true,

        // be default blockUI will supress tab navigation from leaving blocking content;
         constrainTabKey: true,

        // fadeIn time in millis; set to 0 to disable fadeIn on block
         fadeIn:  200,

        // fadeOut time in millis; set to 0 to disable fadeOut on unblock
         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,

        // suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity)
         applyPlatformOpacityRules: true,

        // callback method invoked when unblocking has completed; the callback is
        // passed the element that has been unblocked (which is the window object for page
        // blocks) and the options that were passed to the unblock call:
        //      onUnblock(element, options)
         onUnblock: null,

        // don't ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
         quirksmodeOffsetHack: 4
    };

    博客园大道至简

    http://www.cnblogs.com/jams742003/

    转载请注明:博客园

  • 相关阅读:
    9-python 的ProxyHandler处理器(代理设置)
    2018.2.7 css 的一些方法盒子模型
    2018.2.6 JS-判断用户浏览器
    2018.2.5 PHP如何写好一个程序用框架
    2018. 2.4 Java中集合嵌套集合的练习
    2018.2.3 Centos 的vim好看的主题配置及JDK的安装配置
    2018.2.2 java中的Date如何获取 年月日时分秒
    2018.2.2 JavaScript中的封装
    2018.1.30 PHP编程之验证码
    2018.1.29 计算机二级错题汇总(二)
  • 原文地址:https://www.cnblogs.com/jams742003/p/1573201.html
Copyright © 2011-2022 走看看