yConfirm : подтверждение действий

yConfirm : подтверждение действий

Простое и удобное решение для подтверждения любого действия на сайте. Думаю всем хорошо известно подобное диалоговое окно подтверждения действия на jQueryUI используемое в DLE [см. скриншот].
 
Или же стандартный вызов окна confirm():


Оба эти метода обладают рядом определенных преимуществ, но так же и обладают недостатками:
  • Окно вылазит "где-то" и приходится делать лишнее движение мышкой. Что особенно напрягает, когда приходится делать 10-50 подтверждений.
  • В разных браузерах окно выглядит по разному (касается стандартного confirm).

На замену им был написан скрипт, который выводит кнопку подтверждения непосредственно поверх нажатой кнопки.

yConfirm : подтверждение действий

Причем каждой кнопке можно прописать свой тайтл, например:
$('.deleter').click(function(){
	$(this).yconfirm('Да, удалить', function(b){
		//тут ваше действие
		b.remove(); //к примеру удаляем саму кнопку.
	})
})

Или для каждой кнопки с общим обработчиком можно использовать свой текст подтверждения, заданный через data-confirm="текст":
$(document).on('click', '.do_stuff', function(e){
	e.preventDefault();
	$(this).yconfirm($(this).data('confirm')||'Подтверждаю', function(b){
		b.remove();
	})
})

Jаvascript код:
jQuery.fn.yconfirm = function(t,callback){
	var $parent = $(this);
	$('.yconfirm').remove();
	$('<a href="#" class="yconfirm">' + t + '</a>')
		.appendTo('body')
		.position({my:"center", at:"center", of:$parent})
		.fadeIn(150)
		.on('mouseleave', function(){
			$(this).fadeOut(200,function(){
				$(this).remove()
			})
		})
		.on('click', function(e){
			e.preventDefault();
			$(this).remove();
			callback($parent);
		})
}

CSS стили:
.yconfirm{display:none;position:absolute;padding:0 17px;font:normal 13px/33px Arial;color:#fff;background:#ed344e;border-radius:3px;border:1px solid #dc1f39;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2);}
.yconfirm:hover{text-decoration:none;}
 
 
Автор: Sander
Источник:
  • Oxigen
  • 0
  • 126
Информация
Оставлять комментарии могут только зарегистрированные посетители.
  • Рейтинг@Mail.ru
  • Яндекс.Метрика