Modélisation FSM (machine à états finis) des états d'une page Web à l'aide de jQuery

Question

Je m'intéresse à la manière dont le type de comportement décrit ci-dessous peut être implémenté à l'aide de jQuery.

Présentation technique:

Techniquement, le comportement est mieux modélisé par une machine d'état ainsi:

Une page est chargée et est dans un état initial (état A). Une page dans l'état A n'impose aucune restriction à l'utilisateur, dans la mesure où un utilisateur peut faire ce qu'il veut, sur la page. Une fois que la page est dans l'état B (arrivée en cliquant sur un bouton/lien spécifique, etc.), l'utilisateur doit effectuer un certain nombre d'étapes spécifiques (généralement remplir correctement un formulaire et le soumettre), afin de ramener la page à son état initial. En d'autres termes, la soumission correcte du formulaire ramène la page à l'état initial (État A)

Dans l'état B, toute tentative par l'utilisateur de s'éloigner de la page ou de cliquer sur un autre lien de la page en cours, etc, résultera en une boîte de message (ou une boîte de message JQuery) surgissant et demandant à l'utilisateur de confirmer (Oui, Annuler) s'il veut s'éloigner de la tâche en cours.

Un exemple dans la pratique:

Une page est affichée, qui présente un bouton pour un utilisateur de cliquer sur, afin de remplir certaines informations requises. L'utilisateur peut choisir d'ignorer le bouton et de continuer à naviguer sur le site. Cependant, une fois que l'utilisateur clique sur le bouton et commence à entrer les informations, si elles (intentionnellement ou intentionnellement) devaient s'éloigner de la tâche (pour faire quoi que ce soit qui rafraîchirait/recharger la page en cours), alors une boîte de message devrait apparaître et demander à l'utilisateur de confirmer si c'est bien ce qu'il veut faire. Un bon exemple d'un tel comportement se trouve réellement sur ce site Web, lorsque vous cliquez sur le bouton "Poser une question".

Je voudrais savoir comment implémenter un tel comportement, en utilisant la fonctionnalité fournie par jQuery.

Answer 1

Découvrez l'événement window.onbeforeunload ici:

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

Vous pouvez l'utiliser avec jQuery comme ceci:

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

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

Ceci règlera warning à vrai chaque fois que l'utilisateur change l'un des les champs de formulaire sélectionnés. Lorsque la page est "déchargée", la fenêtre déclenche l'événement onbeforeunload et affiche un avertissement si la fonction renvoie la valeur true (la variable warning).

Answer 2

question assez large ...

1. sur un clic du bouton/lien afficher la forme de créer une boîte de dialogue
2. créer une fonction qui faire apparaître une boîte de dialogue de confirmation - le joindre à la « fermer » événement sur le formulaire de dialogue ainsi que l'événement unload sur le window.

Référence:

http://api.jquery.com/unload/

http://jqueryui.com/demos/dialog/

Answer 3

La question a été posée il y a quelque temps, mais vous pouvez maintenant trouver une implémentation EFM en javascript/jQuery vous pouvez utiliser:

• https://github.com/jakesgordon/javascript-state-machine
• https://github.com/intersel/iFSM