jQuery blockUI 等待中套件基本樣式

jQuery blockUI 這一個 jQuery 套件能在網頁上增加一個遮罩的圖層，阻擋使用者在操作別的步驟。當設計很多需要用到 JavaScript 或者是 AJAX 的動作時，通常需要一些執行的時間，但是如果使用者在這一個時間又操作了不同的動作，有可能會造成程式執行不正常或中斷，所以有了這樣一個兼具提示訊息又能夠防止使用者操作的 jQuery 套件。

使用方法：
第一步 載入 jQuery blockUI 需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 載入 jQuery blockUI 的主程式碼 -->
<script src="jquery.blockUI.js"></script>

第二步 寫入一個按鈕讓他觸發事件用
<input type="button" value="點我執行" id="demo" />

jQuery blockUI 設計 iPhone 讀取中等待畫面

第三步 範例樣式 iPhone 讀取中等待畫面的 JavaScript 程式碼片段
$(function() {
    $('#demo').click(function() {
        $.blockUI({ css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
        } });
        setTimeout($.unblockUI, 2000);
    });
});

附上 jQuery blockUI 可修改參數表

$.blockUI.defaults = { 
    // 顯示的文字內容 
    message:  '<h1>Please wait...</h1>', 
 
    title: null,        // 標題的文字有時用套板時
    draggable: true,    // 拖曳.須加在 jQuery UI
 
    theme: false, // 設定 jQuery UI 的套版
 
    // 樣式設計
    css: { 
        padding:        0, 
        margin:         0, 
        width:          '30%', 
        top:            '40%', 
        left:           '35%', 
        textAlign:      'center', 
        color:          '#000', 
        border:         '3px solid #aaa', 
        backgroundColor:'#fff', 
        cursor:         'wait' 
    }, 
 
    // 主題風格
    themedCSS: { 
        width:  '30%', 
        top:    '40%', 
        left:   '35%' 
    }, 
 
    // 背景圖層
    overlayCSS:  { 
        backgroundColor: '#000', 
        opacity:         0.6, 
        cursor:          'wait' 
    }, 
 
    // 鼠標圖示設定 
    cursorReset: 'default', 
 
    // 樣式運用 $.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 讀取的問題
    iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank', 
 
    // 修復IE問題 
    forceIframe: false, 
 
    // z-index 設定 
    baseZ: 1000, 
 
    // 如果都設定為 true 則自動置中
    centerX: true, 
    centerY: true, 
 
    // 修復IE問題
    allowBodyStretch: true, 
 
    // 是否禁止滑鼠事件
    bindEvents: true, 
 
    // 鍵盤事件 
    constrainTabKey: true, 
 
    // 淡入的時間.單位為毫秒
    fadeIn:  200, 
 
    // 淡出的時間.單位為毫秒 
    fadeOut:  400, 
 
    // 自動解鎖.單位為毫秒 0為手動解鎖 
    timeout: 0, 
 
    // 是否顯示覆蓋圖層
    showOverlay: true, 
 
    // 是否設定滑鼠焦點
    focusInput: true, 
 

    // 淡入完成後執行 
    onBlock: null, 
 
    // 淡出執行
    //   onUnblock(element, options) 
    onUnblock: null, 
 
    // IE BUG 需要知道詳細請看 http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493 
    quirksmodeOffsetHack: 4, 
 
    // 消息區塊 類別名稱 
    blockMsgClass: 'blockMsg', 
 
    // 是否重複允許封鎖
    ignoreIfBlocked: false 
}; 

作者網站：http://malsup.com/jquery/block/
檔案大小：19 KB
檔案下載：http://malsup.github.com/jquery.blockUI.js
備份下載：下載