2010-01-22 94 views
1

我對使用jQuery如何實現下面描述的行爲類型感興趣。使用jQuery建立網頁狀態的FSM(有限狀態機)

技術概述:

技術上,操作最好由狀態機從而建模:

甲頁面被加載並處於初始狀態(狀態A)。狀態A中的頁面不限制用戶,因爲用戶可以在頁面上做任何他喜歡的事情。一旦頁面處於狀態B(通過點擊特定的按鈕/鏈接等達到),用戶需要執行特定的步驟(通常正確地填寫表格並提交它),以使頁面返回到它的初始狀態。換句話說,正確提交表單會使頁面返回到初始狀態(狀態A)

在狀態B中,用戶嘗試從頁面移開或單擊當前頁面上的另一個鏈接等,將導致消息框(或JQuery消息框)彈出,並要求用戶確認(是,取消)是否要離開當前任務。

的例子在實踐中:

將顯示一個頁面,其中提出了一個按鈕,用戶點擊,以填補一些必要的信息。用戶可以選擇忽略該按鈕,並繼續瀏覽網站。然而,一旦用戶點擊按鈕並開始輸入信息,如果他們(有意或有意)要離開任務(即做任何會導致當前頁面被刷新/重新加載的信息),那麼一個消息框應彈出並要求用戶確認這是否確實是他們想要做的事情。當您點擊「問題問題」按鈕「時,在這個網站上實際上可以找到這種行爲的一個很好的例子。

我想知道如何使用jQuery提供的功能來實現這種行爲。

回答

1

退房的window.onbeforeunload事件在這裏:

https://developer.mozilla.org/en/DOM/window.onbeforeunload

您可以用jQuery這樣使用它:

var warning = false; 
window.onbeforeunload = function(e) { 
    return warning; 
}; 

$('input,textarea,select').change(function() { 
    warning = true; 
}); 

這將設置warning真正每當用戶改變任何的選定的表單域。當頁面「卸載」時,窗口觸發onbeforeunload事件,並在函數返回true時顯示警告(warning變量)。