Гость
Обновленые темы Популярные темы Активные пользователи
Шаблон fenome для uCoz 16.10.2019 в 16:52 от Admin Шаблон форума infopps для uCoz 16.10.2019 в 16:43 от Admin Шаблон Servodel для uCoz 16.10.2019 в 16:38 от Admin Шаблон Moscow-hunters для uCoz 16.10.2019 в 15:22 от Admin Шаблон Ucozup для uCoz 16.10.2019 в 15:20 от Admin Шаблон Soc-life для uCoz 16.10.2019 в 15:16 от Admin Шаблон Goldenpublice для uCoz 16.10.2019 в 15:09 от Admin Шаблон fance для uCoz 16.10.2019 в 15:07 от Admin Шаблон 21style для uCoz 16.10.2019 в 15:05 от Admin Шаблон Night stalker для uCoz 16.10.2019 в 14:18 от Admin
Admin 3784

  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Всё для DataLife Engine » DLE хаки » yConfirm - подтверждение действий для DLE
yConfirm - подтверждение действий для DLE
Бармен Offline Дата: Вторник, 06.08.2019, 02:24 | Сообщение # 1
Администратор
Звание: Рядовой [?]
Сообщений: 127

Простое и удобное решение для подтверждения любого действия на сайте.

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



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

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


Причем каждой кнопке можно прописать свой тайтл.

Код
$('.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;}
Дата регистрации: 28.07.2018
Форум » Web-Раздел » Всё для DataLife Engine » DLE хаки » yConfirm - подтверждение действий для DLE
  • Страница 1 из 1
  • 1
Поиск: