Jquery blockUI用法

標籤：log   type   取消   stop   splay   點擊   資訊   query   定義   

1 鎖定頁面的例子

<script type="text/javascript">    // unblock when ajax activity stops    $().ajaxStop($.unblockUI);    function test() {        $.ajax({ url: ‘wait.php‘, cache: false });    }    $(document).ready(function() {        $(‘#pageDemo1‘).click(function() {            $.blockUI();            test();        });        $(‘#pageDemo2‘).click(function() {            $.blockUI({ message: ‘<h1><img src="busy.gif" /> 請稍後...</h1>‘ });            test();        });        $(‘#pageDemo3‘).click(function() {            $.blockUI({ css: { backgroundColor: ‘#f00‘, color: ‘#fff‘ } });            test();        });        $(‘#pageDemo4‘).click(function() {            $.blockUI({ message: $(‘#domMessage‘) });            test();        });    });</script>...<div id="domMessage" style="display:none;">    <h1>正在處理，請稍侯...</h1></div>

------------------------------------------------------------------------------------
2 鎖定元素的例子
這裡展示了如何鎖定頁面中的元素，而不是整個頁面。 請點擊block/unblock按鈕查看效果。

<script type="text/javascript">    $(function() {        $(‘#blockButton‘).click(function() {            $(‘div.test‘).block({ message: null });        });        $(‘#blockButton2‘).click(function() {            $(‘div.test‘).block({                 message: ‘<h1>處理中...</h1>‘,                 css: { border: ‘3px solid #a00‘ }             });        });        $(‘#unblockButton‘).click(function() {            $(‘div.test‘).unblock();        });        $(‘a.test‘).click(function() {            alert(‘link clicked‘);            return false;        });    });</script>

------------------------------------------------------------------------------------
3 簡單的對話方塊樣本
此頁展示了如何顯示一個簡單的類比對話方塊。以下按鈕將啟用blockUI顯示一段自訂資訊。這個AJAX請求將根據使用者的反應（是或否）來發送或取消，在使用者決定的這段時間內，會一直保持頁面的鎖定狀態。

<script type="text/javascript">    $(function() {        $(‘#test‘).click(function() {            $.blockUI({ message: $(‘#question‘), css: { width: ‘275px‘ } });        });        $(‘#yes‘).click(function() {            // update the block message            $.blockUI({ message: "<h1>進行中通訊...</h1>" });            $.ajax({                url: ‘wait.php‘,                cache: false,                complete: function() {                    // unblock when remote call returns                    $.unblockUI();                }            });        });        $(‘#no‘).click($.unblockUI);    });</script>...<input id="test" type="submit" value="顯示對話方塊" />...<div id="question" style="display:none; cursor: default">        <h1>你確信要繼續嗎？.</h1>        <input type="button" id="確認" value="Yes" />        <input type="button" id="取消" value="No" /></div>

 

Jquery blockUI用法