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

IT sphere Комментировать

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

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

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

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

Метки: , , ,
Напечатать эту запись
[ 103 просмотров ]


This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

Комментариев (2)

  1. Darren: | Ответить

    более удобной работа не получается.

Оставить Комментарий

Заполните следующие поля:

Или используйте OpenID URL:
(например, ссылку на Ваш LiveJournal аккаунт вида http://spiritzzz.livejournal.com/)

Premium Wordpress Themes by Natty WP. Web Hosting
Images by our golf tips desEXign.