Блог FX’а

Давно ничего не писал - как-то не о чем… Праздники, работа, учеба… Единственное, что реально интересно из этого списка - это работа, но… к сожалению, как раз она и “способствует” отсутствию статей в этом блоге - её много и на блог времени просто не остается… А написать, к счастью, есть о чем.

Сегодня речь пойдет о так называемых 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>

Таким образом мы заменим цвет фона на белый + уберем прозрачность и анимацию при появлении/исчезновении фона.

На этом, наверное, будем прощаться. Если остались вопросы - обращайтесь.

written by FX Poster \\ tags: JavaScript, jQuery, nyroModal, Thickbox

IE6 очень плохо работает с изображениями в PNG-формате, которые имеют альфа-канал (проще говоря, прозрачность) - он просто не учитывается. Решить проблему довольно просто, самый удобный вариант - воспользоваться “библиотекой” jQuery.ifixpng, которая сделает всё за вас. Единственный недостаток (хотя, кому как) - зависимость от jQuery. Тем, кто пользуется другими библиотеками, в частности, PrototypeJS (а именно она по умолчанию используется в таких фреймворках как RubyOnRails и Symfony), воспользоваться этой “библиотекой” не получится. Именно для них я и попытался переписать эту библиотеку.

Prototype.Browser.Version = (navigator.userAgent.toLowerCase().match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1];
Prototype.FixPNG = { Pixel: ‘images/pixel.gif’ };

Element.addMethods({
  fixpng: (Prototype.Browser.IE && Prototype.Browser.Version < 7) ? function(element) {
    function fixPosition(element) { if(element.style.position != ‘absolute’) element.style.position == ‘relative’; }
    function filter(src) { return “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src=’” + src + “‘)”; }
    var elementName = element.nodeName.toLowerCase();
    if(elementName == ‘img’ || elementName == ‘input’) {
      if(element.src && element.src.match(/.*\.png([?].*)?$/i)) {
        element.setStyle({
          filter: filter(element.src),
          width: element.getWidth(),
          height: element.getHeight()
        });
        element.src = Prototype.FixPNG.Pixel;
        fixPosition(element);
      }
    } else {
      var image = element.currentStyle.backgroundImage;
      if (image.match(/^url\(["']?(.*\.png([?].*)?)["']?\)$/i)) {
        element.setStyle({
          filter: filter(RegExp.$1),
          backgroundImage: “none”
        });
        element.children().each(fixPosition);
      }
    }
  } : function(element) {}
});

Зависимости:

• Библиотека PrototypeJS
• В директории images должен лежать “пустой” файл pixel.gif (его можно взять здесь, или, если вас не устраивает такое расположение файла - просто измените переменную Prototype.FixPNG.Pixel)

Пример использования:

Event.observe(window, 'load', function() {
  $$('.test, #test').each(function(element){ element.fixpng() });
}, false);

PS. Также советую почитать раздел Known Limitations на странице jQuery.ifixpng.

written by FX Poster \\ tags: JavaScript, jQuery, PrototypeJS