18 March 2010

JQuery FormNavigate — плагин для удобной работы с onbeforeunload

jQuery
Все, кто пользуется веб-интерфейсом gmail, наверняка замечали, как гугл заботится о нас и не даёт закрыть страницу, если мы начали составлять письмо и не сохранили его в черновики. И понадобилось мне для своего проекта сделать нечто похожее.

Сперва сделал это используя window.onbeforeunload, но злая опера не поддерживает это событие.
Призадумался, попутно нашёл плагин для jquery под названием FormNavigate.


Ничем особенным это плагин не выделяется, основная его функция сводится к тому, что он отлавливает событие change у заданной формы и навешивает событие window.onbeforeunload:

$("YourForm").FormNavigate("YourMessage");

* This source code was highlighted with Source Code Highlighter.


YourForm — селектор формы, в которой будем отлавливать изменения
YourMessage — соответственно сообщение, которые будет выдано при срабатывании события onbeforeunload.

Еще раз взглянув на gmail, я заметил, что там при попытки перейти на ссылку срабатывает confirm, а уже при закрытии и перезагрузке окна — onbeforeunload. Это частично решает проблему с оперой (мы можем отловить попытку перейти на другую страницу, но отловить закрытие и перезагрузку страницы так и не удастся).

И решил я дописать этот плагин, добавить пару опций. В итоге по функционалу получилось почти так же, как и на gmail :)

$("YourForm").FormNavigate({
  message: "Содержимое было изменено! \n Вы уверены, что хотите покинуть страницу без сохранения?",
  aOutConfirm: "#DivID a.confirm, #DivID2 a"
});


* This source code was highlighted with Source Code Highlighter.


Выбираем форму, изменения на которой будем отлавливать, в message указываем текст сообщения, а в aOutConfirm — где и какие ссылки будем отлавливать (можно убрать этот параметр, тогда по-умолчанию будут обрабатываться нажатия на все ссылки).

Демо можно увидеть тут
Измененный плагин смотреть тут

UPD: спасибо доброму человеку krasivayasvo за наводку, изменил событие change в плагине на live('change keypress'), обновил демо и сам плагин.

UPD2: спасибо еще одному доброму человеку rvsob за исправление плагина (исправлены некоторые проблемы, например, переопределения события onbeforeunload, неправильной работы с текстовым полем (textarea)). Подробнее по ссылке
Tags: jquery plugins onbeforeunload FormNavigate
Hubs: jQuery
+31
4k 92
Comments 19
Ads