Давно ничего не писал - как-то не о чем… Праздники, работа, учеба… Единственное, что реально интересно из этого списка - это работа, но… к сожалению, как раз она и “способствует” отсутствию статей в этом блоге - её много и на блог времени просто не остается… А написать, к счастью, есть о чем. :)
Сегодня речь пойдет о так называемых dialog widget’ах (периодически, слышу, что их также называют js-popup’ами). Недавно понадобилось реализовать такой функционал в моём “рабочем” проекте и стал вопрос об использовании существующих решений.
В проекте я использую jQuery и, соответственно, выбирал системку, которая базировалась бы на нем. Всё началось с Thickbox’а, который я довольно долгое время и использовал, но… Кое-что мне в нем не нравилось изначально:
- Минимум настроек
- Отличие от большинства плагинов jQuery
- Отсутствие развития (последняя версия вышла в августе 2007-го года и зависела еще от jQuery 1.1x, хотя и с 1.2 тоже работала нормально)
… в итоге эти недостатки привели ко вполне логичному концу - я не мог реализовать 2 разных “диалога” на одной странице не “вторгаясь” в сам код Thickbox’а, причем застрял на мелочи - удиалогов должны были различаться бэкграунды - у одного он должен был быть полностью залит определенным цветом, а второй должен был быть полупрозрачным. Причем в первом случае сделать фон непрозрачным мне пришлось через CSS, хотя гораздо логичнее было бы предоставить эту возможность самой функции создания диалога.
В общем, после недолгих поисков на свет был извлечен молодой, но очень быстро развивающийся
проект “окошек” на jQuery, о котором я сегодня и хочу рассказать - это nyroModal. Проекту еще нет и месяца, но основная функциональность там уже реализована (а как по мне - так больше и не нужно), и что самое главное - им очень удобно пользоваться.
Подробное описание (а также демонтрацию возможностей nyroModal) можно посмотреть на странице самого проекта, а я здесь приведу лишь несколько примеров использования.
Самый простой способ, при котором даже не нужно лезть в JavaScript - это присвоение ссылкам класса nyroModal:
<a href="demo.html" class="nyroModal">Ajax</a>Эта ссылка откроет вам файл demo.html в “окошке”.
<a href="demo.html#demo" class="nyroModal">Ajax</a>Эта - сделает почти то же самое, только в окошке будет только инфа из блока с id == “test” из файла demo.html.
<a href="#demo" class="nyroModal">No Ajax!</a>А здесь у нас в окно попадет содержимое блока с id == “test” из текущей страницы.
Если же нужны какие-то дополнительные параметры (значения или callback-функции), то здесь уже без “ручного” JavaScript’а не обойтись:
<a href="#demo" id="no-ajax">No Ajax!</a>
<script type="text/javascript">
$('#no-ajax').nyroModal({
bgColor: '#FFFFFF',
showBackground: function(elts, settings, callback) {
// elts.bg.css({opacity:0}).fadeTo(500, 0.75, callback);
callback();
},
hideBackground: function(elts, settings, callback) {
// elts.bg.fadeOut(300, callback);
callback();
}
})
</script>Таким образом мы заменим цвет фона на белый + уберем прозрачность и анимацию при появлении/исчезновении фона.
На этом, наверное, будем прощаться. Если остались вопросы - обращайтесь. :)
Последние комментарии