Однажды на просторах Хабра встретил плагин FormNavigate (требующий у пользователя подтверждения на закрытие вкладки или переход по ссылке, когда данные в форме заполнены, а-ля gmail), а однажды потребовалось его даже применить.
Но тот вид в котором плагин был меня не устроил и я позволил себе немного его переписать.
Так, например, мне неудобно было выбирать те ссылки, на которых следует отлавливать подтверждения, а наоборот требовалось указывать ссылки на которые действие плагина не будет распространяться. Тут продвинутые разработчики начнут меня закидывать помидорами, что я не знаю правильную работу селекторов в jQuery. Но это не так, сами можете проверить как работает прошлая версия плагина, например, для:
Что стыда скрывать, я позволил себе немного переписать плагин:
Пример использования:
где
Исправлены некоторые проблемы, например, переопределения события onbeforeunload, неправильной работы с текстовым полем (textarea).
Скачать исправленную версию.
Посмотреть пример.
Надеюсь Вам это пригодится!
Но тот вид в котором плагин был меня не устроил и я позволил себе немного его переписать.
Так, например, мне неудобно было выбирать те ссылки, на которых следует отлавливать подтверждения, а наоборот требовалось указывать ссылки на которые действие плагина не будет распространяться. Тут продвинутые разработчики начнут меня закидывать помидорами, что я не знаю правильную работу селекторов в jQuery. Но это не так, сами можете проверить как работает прошлая версия плагина, например, для:
$('a:not([class~="ajax"])')
(предложенный автором прошлого топика $('a:[class!="ajax"]')
вообще вытворяла чудеса).Что стыда скрывать, я позволил себе немного переписать плагин:
- jQuery.fn.extend({
- FormNavigate: function(o){
- var formdata_original = true;
- jQuery(window).bind('beforeunload', function (){
- if (!formdata_original) return settings.message;
- });
-
- var def = {
- message: '',
- aOutConfirm: 'a:not([target!=_blank])'
- };
- var settings = jQuery.extend(false, def, o);
-
- if (o.aOutConfirm && o.aOutConfirm != def.aOutConfirm){
- jQuery('a').addClass('aOutConfirmPlugin');
- jQuery(settings.aOutConfirm).removeClass("aOutConfirmPlugin");
- jQuery(settings.aOutConfirm).click(function(){
- formdata_original = true;
- return true;
- });
- }
-
- jQuery("a.aOutConfirmPlugin").click(function(){
- if (formdata_original == false)
- if(confirm(settings.message))
- formdata_original = true;
- return formdata_original;
- });
-
- jQuery(this).find("input[type=text], textarea, input[type='password'], input[type='radio'], input[type='checkbox'], input[type='file']").live('change keypress', function(event){
- formdata_original = false;
- });
-
- jQuery(this).find(":submit, input[type='image']").click(function(){
- formdata_original = true;
- });
- }
- });
* This source code was highlighted with Source Code Highlighter.
Пример использования:
- $(document).ready(function(){
- $("#changeme").FormNavigate({
- message: "Содержимое было изменено!\nВы уверены, что хотите покинуть страницу без сохранения?",
- aOutConfirm: "a.ignore"
- });
- });
* This source code was highlighted with Source Code Highlighter.
где
message
— текстовая информация в окошке подтверждения,aOutConfirm
— теги игнорируемые на подтверждение.Исправлены некоторые проблемы, например, переопределения события onbeforeunload, неправильной работы с текстовым полем (textarea).
Скачать исправленную версию.
Посмотреть пример.
Надеюсь Вам это пригодится!