flat ui switch 改變狀態而不響應事件

Flat UI 是一套精美的扁平風格 UI 工具包，基於 Twitter Bootstrap 實現。這套界面工具包含許多基本的和復雜的 UI 部件，例如按鈕，輸入框，組合按鈕，復選框，單選按鈕，標簽，菜單，進度條和滑塊，導航元素等等。

對於我們這些不會前端的小碼農來說，是絕對的神器。

但也正是因為不了解前端，所以哪怕是丁點的問題，對我們來說都是痛不欲生。

 

這次讓我痛不欲生的便是flat ui的switch組件。

該組件是用來替代 checkbox 的組件, 關於它的用法，可以參見這里。

 

switch有兩種狀態，開啟和關閉

組件如圖所示:

 

對於該組件的初始化、響應事件可以這樣寫:

 $('#forFriend').on({
        'init.bootstrapSwitch': function() {
　　　　　　　　$('#forFriend').bootstrapSwitch("state", true);
        },
        'switchChange.bootstrapSwitch': function(event, state) {
            // 按鈕狀態發生改變
        }
    });

 

這樣，就可以在加載完頁面后對 switch 動態初始化值、並對switch組件狀態切換事件進行響應。

 

想要對switch動態初始化，還需要一個條件，初始化switch狀態時，不應該響應switch狀態切換事件。

上面的代碼是做不到這一點的，為了能夠做到，必須想一些辦法，即使用代碼改變swtch狀態和用戶改變switch狀態有什么不同呢？答案是焦點。

 

當用戶點擊switch時，switch組件獲得焦點; 相反的，如果使用代碼改變swith組件時，焦點不能在switch上。通過這樣判斷方法就可以實現“隨心所欲”的選擇是否響應switch切換事件。

簡單來寫就是這樣: 

 

$('#switch').on({
        'init.bootstrapSwitch': function() {
            $("#switch").bootstrapSwitch("state", state);// 初始化狀態

        },
        'switchChange.bootstrapSwitch': function(event, state) {
            // 如果沒有焦點，證明不是用戶觸發的,　不做任何處理
            if ($("#switch").is(":focus") == false) return;
            // 處理
        }
    });

 

我們可能還有一些需求，比如當用戶開啟switch時，彈出模態框，提示是否要開啟，如果確認，則開啟switch，否則不開啟。

用戶關閉模態框的方法有很多，可以選擇右上角的關閉按鈕、可以單擊返回、可以點擊確認，甚至是按下esc或者點擊模態框以外的區域

模態框如圖所示:

 

關閉方法很多，但除了點擊確認外，其他的所有關閉模態框都認為拒絕 開啟switch。 

代碼如下:

 

$('#switch').on({
        'init.bootstrapSwitch': function() {

            // 確保一開始焦點不在switch上
            var state = true; // 從服務器獲取按鈕狀態

            $("#switch").bootstrapSwitch("state", state);// 初始化狀態

        },
        'switchChange.bootstrapSwitch': function(event, state) {
            // 如果沒有焦點，證明不是用戶觸發的,　不做任何處理
            if ($("#switch").is(":focus") == false) return;

            if (state == true) { // 如果狀態為 on, 需要開啟模態框

                // 讓其失去焦點，這時使用代碼改變按鈕狀態就不會觸發事件
                $("#switch").blur();

                // 防止模態框意外關閉，先設置按鈕的狀態為關閉
                $("#switch").bootstrapSwitch("state", false);

                // 彈出模態框
                $("#modal-switch").modal({backdrop: 'static', keyboard: false});

            } else { // 如果當前狀態為off
                // 處理
            }
        }
    });

    // 單擊了模態框中的確定按鈕
    $('#modal-switch-confirm').click(function () {
        // 處理 ...

        // 處理成功改變 switch 狀態
        $("#switch").bootstrapSwitch("state", true);
    });