随笔 - 432  文章 - 0  评论 - 15  阅读 - 63万

jQuery BlockUI Plugin Demo 6(Options)

Options

BlockUI's default options look (exactly) like this:

复制代码
// override these in your code to change the default behavior and style 
$.blockUI.defaults = { 
    // message displayed when blocking (use null for no message) 
    message:  '<h1>Please wait...</h1>', 
 
    title: null,        // title string; only used when theme == true 
    draggable: true,    // only used when theme == true (requires jquery-ui.js to be loaded) 
 
    theme: false, // set to true to use with jQuery UI themes 
 
    // 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, 
        width:          '30%', 
        top:            '40%', 
        left:           '35%', 
        textAlign:      'center', 
        color:          '#000', 
        border:         '3px solid #aaa', 
        backgroundColor:'#fff', 
        cursor:         'wait' 
    }, 
 
    // minimal style set used when themes are used 
    themedCSS: { 
        width:  '30%', 
        top:    '40%', 
        left:   '35%' 
    }, 
 
    // styles for the overlay 
    overlayCSS:  { 
        backgroundColor: '#000', 
        opacity:         0.6, 
        cursor:          'wait' 
    }, 
 
    // style to replace wait cursor before unblocking to correct issue 
    // of lingering wait cursor 
    cursorReset: 'default', 
 
    // styles applied when using $.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 issues: 'about:blank' fails on HTTPS and javascript:false is s-l-o-w 
    // (hat tip to Jorge H. N. de Vasconcelos) 
    iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank', 
 
    // force usage of iframe in non-IE browsers (handy for blocking applets) 
    forceIframe: false, 
 
    // 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, 
 
    // enable if you want key and mouse events to be disabled for content that is blocked 
    bindEvents: true, 
 
    // be default blockUI will supress tab navigation from leaving blocking content 
    // (if bindEvents is true) 
    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) 
    // no longer needed in 2012 
    // applyPlatformOpacityRules: true, 
 
    // callback method invoked when fadeIn has completed and blocking message is visible 
    onBlock: null, 
 
    // 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, 
 
    // class name of the message block 
    blockMsgClass: 'blockMsg', 
 
    // if it is already blocked, then ignore it (don't unblock and reblock) 
    ignoreIfBlocked: false 
}; 
复制代码

Changing the blockUI options is simple and can be done in one of two ways:

  1. Globally, by directly overriding the values in the $.blockUI.defaults object
  2. Locally, by passing an options object to the blockUI (or block) function.

Global Overrides

You can change the default options by simply declaring different values for them. For example:

// change message border 
$.blockUI.defaults.css.border = '5px solid red'; 
 
// make fadeOut effect shorter 
$.blockUI.defaults.fadeOut = 200; 

Local Overrides

Local overrides are achieved by passing an object to the blockUIunblockUIblock or unblock functions. The exact same options are available to the local options object as are available in the global object. For example:

复制代码
// change message border 
$.blockUI({ css: { border = '5px solid red'} }); 
 
... 
 
// make fadeOut effect shorter 
$.unblockUI({ fadeOut: 200 }); 
 
... 
 
// use a different message 
$.blockUI({ message: 'Hold on!' }); 
 
... 
 
// use a different message 
$('#myDiv').block({ message: 'Processing...' }); 
复制代码

 参考:http://malsup.com/jquery/block/#overview

posted on   狼来了  阅读(570)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示