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