Меню сайта
yConfirm - подтверждение действий на DLE
![](/uploads/posts/2019-07/1563395829_1563386219_yconfirm.png)
![](/uploads/posts/2019-07/1563395858_1.png)
![](/uploads/posts/2019-07/1563395879_2.jpg)
![](/uploads/posts/2019-07/1563395840_3.jpg)
Простое и удобное решение для подтверждения любого действия на сайте.
Полагаю всем хорошо известно подобное диалоговое окно подтверждения действия на jQueryUI используемое повсеместно в DLE.
![yConfirm](/uploads/posts/2019-07/1563395858_1.png)
Или же стандартный вызов окна confirm()
![](/uploads/posts/2019-07/1563395879_2.jpg)
Оба эти метода обладают рядом определенных преимуществ, но так же и обладают определенными недостатками:
- Окно вылазит "где-то" и приходится делать лишнее движение мышкой. Что особенно напрягает, когда приходится делать 10-50 подтверждений.
- В разных браузерах окно выглядит по разному (касается стандартного confirm).
На замену им был написан скрипт, который выводит кнопку подтверждения непосредственно поверх нажатой кнопки.
![](/uploads/posts/2019-07/1563395840_3.jpg)
Причем каждой кнопке можно прописать свой тайтл.
Пример вызова:
С уважением,
Олег Александрович a.k.a. Sander
Полагаю всем хорошо известно подобное диалоговое окно подтверждения действия на jQueryUI используемое повсеместно в DLE.
![yConfirm](/uploads/posts/2019-07/1563395858_1.png)
Или же стандартный вызов окна confirm()
![](/uploads/posts/2019-07/1563395879_2.jpg)
Оба эти метода обладают рядом определенных преимуществ, но так же и обладают определенными недостатками:
- Окно вылазит "где-то" и приходится делать лишнее движение мышкой. Что особенно напрягает, когда приходится делать 10-50 подтверждений.
- В разных браузерах окно выглядит по разному (касается стандартного confirm).
На замену им был написан скрипт, который выводит кнопку подтверждения непосредственно поверх нажатой кнопки.
![](/uploads/posts/2019-07/1563395840_3.jpg)
Причем каждой кнопке можно прописать свой тайтл.
Пример вызова:
$('.deleter').click(function(){
$(this).yconfirm('Да, удалить', function(b){
//тут ваше действие
b.remove(); //к примеру удаляем саму кнопку.
})
})
Пример 2, тут для каждой кнопки с общим обработчиком можно использовать свой текст подтверждения заданный через 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;}
На этом все, надеюсь кому-то пригодится :)С уважением,
Олег Александрович a.k.a. Sander
Демо / Инфо:
Скачать yConfirm
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.