Egor Dubrovsky

Репост  записи с Хабры.

Все, кто пользуется веб-интерфейсом 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 — где и какие ссылки будем отлавливать (можно убрать этот параметр, тогда по-умолчанию будут обрабатываться нажатия на все ссылки).

Демо можно увидеть тут

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

Метки: FormNavigate, jquery, jquery plugins, onbeforeunload
[ 103 просмотров ]