BlockUI詳細用法

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>