jQuery를 사용하여 아래에서 설명하는 동작 유형을 구현하는 방법에 관심이 있습니다.jQuery를 사용하여 웹 페이지 상태의 FSM (Finite State Machine) 모델링
기술적 개요 :
기술적으로는 문제가 가장 따라서 상태 머신에 의해 모델링된다 : 페이지가로드되어 초기 상태 (상태 A)로되어있다
. A 상태의 페이지는 사용자가 페이지에서 원하는대로 무엇이든 할 수 있다는 점에서 사용자에 대한 제한을 두지 않습니다. 페이지가 B 상태 (특정 버튼/링크 등을 클릭하여 도착한 상태)가되면 사용자는 페이지를 다시 가져 오려면 특정 단계의 단계를 수행해야합니다 (일반적으로 양식을 정확하게 작성하고 제출해야합니다). 그것에 초기 상태. 즉, 양식을 올바르게 제출하면 페이지가 초기 상태 (상태 A)로 돌아갑니다.
상태 B에서 사용자가 페이지에서 벗어나 현재 페이지의 다른 링크를 클릭하려는 시도는 있지만, 메시지 상자 (또는 JQuery 메시지 상자)가 나타나서 현재 작업에서 벗어나려는 경우 사용자에게 확인 (예, 취소)을 요청합니다. 실제로
예 : 사용자의 버튼을 제공합니다
페이지가 표시되고, 몇 가지 필요한 정보를 입력하기 위해 클릭합니다. 사용자는 버튼을 무시하고 사이트 브라우징을 계속할 수 있습니다. 그러나 사용자가 버튼을 클릭하고 정보 입력을 시작하면 (의도적으로 또는 의도적으로) 작업에서 벗어나면 (즉, 현재 페이지가 새로 고침/다시로드되는 모든 작업을 수행하는 경우) 메시지 상자 팝업이 나타나야하며 사용자에게 이것이 실제로 원하는 것인지 확인해야합니다. 그러한 행동의 좋은 예가 실제로이 웹 사이트에서 '질문하기'버튼을 클릭하면 발견됩니다.
jQuery에서 제공하는 기능을 사용하여 이러한 동작을 구현하는 방법을 알고 싶습니다.
이var warning = false;
window.onbeforeunload = function(e) {
return warning;
};
$('input,textarea,select').change(function() {
warning = true;
});
이 사용자가 중 하나를 변경할 때마다 warning 사실 에 설정합니다 :
https://developer.mozilla.org/en/DOM/window.onbeforeunload
당신은 다음과 같이 jQuery를 함께 사용할 수 있습니다 여기에 window.onbeforeunload 이벤트 출력