2012-07-05 101 views
1

我正在使用jQuery UI按鈕來設置按鈕的開/關對,主要是因爲您使用它的漂亮樣式。我想處理點擊,這樣當你點擊兩個按鈕中的一個時,你會得到一個對話框,你可以做更多的選擇,然後頁面重新加載,並且按鈕處於新狀態(如果狀態改變了,可能不會是這樣)。jQuery buttonset:攔截點擊以便按鈕不會改變狀態

問題是,您點擊的按鈕在任何點擊處理程序被調用之前都會被選定爲選定樣式。我不希望選擇改變,我想手動完成。

看來,點擊事件綁定到jQuery UI創建的標籤上,而我正在爲解綁它而苦苦掙扎。我想我也問是否有其他的方式來獲得沒有函數的樣式...因爲buttonset不提供任何事件處理程序,我需要自己捕捉點擊事件。

我現在想的解決方案是簡單地將buttonset生成的html複製到我的代碼中,保留css並刪除buttonset調用。我認爲它可能值得在放棄之前檢查StackOverflow。 :)

回答

3

由於jQuery UI不會觸發之前運行的任何事件,因此進行實際選擇時,實現此目的的解決方法將變得相當黑客。我可以想到的最好的想法是以編程方式記住先前選擇的選項,然後附加一個處理程序,該處理程序確定是否應該恢復jQuery UI選擇新按鈕或不選擇。

$('#parent_container').buttonset(); 
var selectedButton = $('#parent_container :checked'); 
$('.ui-button').on('click', function() { 
    setTimeout(function() { 
     //Insert your actual check here. 
     if (true) { 
      selectedButton.attr('checked', true); 
      $('#radio').buttonset('refresh'); 
     } else { 
      selectedButton = $('#parent_container :checked'); 
     } 
    }, 1); 
});​ 

setTimeout是必要的,以確保這個jQuery用戶界面的點擊處理程序後運行。由於您顯示的是對話框,因此您可能需要對其進行更改以立即恢復選擇,但請記住用戶嘗試選擇以備將來使用的內容。

我總是在這裏拒絕用戶的選擇的例子 - http://jsfiddle.net/tj_vantoll/s6XTu/14/

顯然,這不是一個理想的方法,但它確實工作。 jQuery UI應該真的增加對選擇事件的支持;我會盡力解決這個問題。按鈕插件將在1.11 - http://wiki.jqueryui.com/w/page/12138038/Roadmap中進行一些更新。

+0

我用這個解決方案,謝謝。這似乎是最尷尬的解決方案。一旦我的對話框顯示,我運行如下所示:$(「#」+ buttonId).attr(「checked」,「checked」); $(「#」+ buttonId).button(「refresh」); - 另一個關於buttonset的尷尬是,在一次調用中沒有用於手動更改輸入標記和按鈕集視覺元素狀態的實用方法。 – 2012-07-06 07:42:41