TOP

[jQuery] 利用jQuery blockUI防止使用者重覆點擊


<script language="javascript">
$(function() {
 $("input[id*=btn]").click(function(){
     $.blockUI(); 
 });
});
</script>

<asp:Button ID="btn" runat="server" CssClass="BtnBlue" />


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 
};

參考資料:

0 意見:

張貼留言