Сразу напишу, что в jQuery я дилетант. Я понимаю его принципы работы, могу что-то исправить в коде, построить код на основе имеющихся плагинов, понять код – но я не разработчик в этом направлении и вообще не люблю JS. Но вот мне понадобился confirm на jQuery и меня понесло в дебри “готовых” плагинов.
Все оказалось не так просто. Для меня jQuery это удобство. Выбрал элементы, к которым прицепить плагин, залил файлы и оно работает. Но не всегда получается так. Вроде все залил, указал элементы по ид и классам, настроил плагин, залил стили, а нифига не работает.
Для конфирма я рассмотрел 3 плагина и на 3-м мне повезло.
1. Раскрученная и первая страница с англоязычного сайта туториалов, как я понял. Есть ее переводы на русском. У этого чуда нет названия, просто туториал – как создать confirm диалог на jQuery. Вот ссылки:
http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
и на русском
У меня это чудо не заработало. Вроде просто и понятно написано, вроде прикрутил все правильно, но в итоге окно с confirm появлялось до нажатия ссылки, сразу по загрузке. В нем были кривые стили и его никак нельзя было убрать. Все сделал по инструкции, что не так? Забил.
2. http://habrahabr.ru/post/48318/ автор представляет тут jquery alert dialogs. При чем ни где, ни в посте, ни в блоге своем не дал ссылку на источник и загрузку. Я ее нашел, вот она:
http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
вызывается как-то так, не работает без callback ф-ии.
|
1 2 3 4 5 |
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) { jAlert('Confirmed: ' + r, 'Confirmation Results'); }); |
В плагине используется вроде бы как устаревший druggable плагин, хотя я нашел его в последней UI сборке. Прикрутил все как надо. В итоге по нажатию на ссылку confirm появлялся, и тут же сам себя подтверждал. :)
Кстати у обоих плагинов выше одна проблема – они реагировали только на одну ссылку с ид. Если на странице много ссылок с одним ид или классом, на них плагин уже не вызывался.
3. Вот он confirm плагин моей мечты –
jQuery Easy Confirm Dialog
Сразу ссылки:
Примеры: http://projectshadowlight.org/jquery-easy-confirm-dialog/
Плагин на github: https://github.com/wiggin/jQuery-Easy-Confirm-Dialog-plugin
Это действительно работает и это то, что надо. Используются стили UI. Я пометил класс alert_link как класс плагина и все ссылки на всех страницах с этим классом теперь имеют confirm диалог. Это то, что мне было нужно.
Плагин удобен, имеет настройки.
Вот так можно выполнить какой-то экшн в js после confirm если указать кроме класса ид элемента.
|
1 2 3 4 5 6 |
$(".confirm").easyconfirm(); $("#alert").click(function() { alert("You approved the action"); }); |
Вот так настраивается сообщение:
|
1 2 3 4 5 6 7 8 |
$("#french").easyconfirm({locale: { title: 'Etes-vous sûr?', text: 'Etes-vous sûr que vous souhaitez effectuer cette action?', button: ['Annuler',' Confirmer'], closeText: 'fermer' }}); |
В общем мой выбор.