fxposter's wave » jQuery http://blog.fxposter.org Stories about Ruby, JavaScript, Objective-C and other cool tools Sun, 30 Oct 2011 20:00:54 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Особенности работы jQuery.live() http://blog.fxposter.org/2010/06/16/jquery-live-method/ http://blog.fxposter.org/2010/06/16/jquery-live-method/#comments Tue, 15 Jun 2010 23:21:26 +0000 fxposter http://blog.fxposter.org/?p=787 На работе столкнулись с “особенностью” работы jQuery.live(), на которую хотелось бы обратить внимание, потому как, судя по всему, отнюдь не все о ней знают (и в результате чего пишут неработающий код).

Итак, простой пример - навешивание двух событий на один и тот же элемент:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>jQuery.live() test page</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
  jQuery(function() {
    $("a").bind("click", function(e) {
      alert("a");
      return false;
    });
    $("a").bind("click", function(e) {
      alert("b");
      return false;
    });
  });
  </script>
</head>
<body>
  <a href="http://blog.fxposter.org/">Блог FX-а</a>
</body>
</html>

Пример можно посмотреть здесь. В результате клика на ссылку - получаем 2 alert-а, всё хорошо, ожидаемо и предсказуемо.

Переписываем код для работы с jQuery.live(). Для тех, кто в танке - live() вешает событие не на сам элемент, а на document. В результате bubbling-а событие, которое произошло над каким-либо элементом поднимается вверх по DOM-дереву и соответственно вызывает обработчики всех элементов, которые оно встретит. Если вы и этого не знали - то вам не нужно читать мой блог, а пора идти и покупать книгу по JavaScript-у (мне, кстати, тоже давно пора, но всё никак не соберусь). Итак, в конце концов событие доходит до document-а и обработчики вызываются у него. Обработчик, который устанавливает jQuery.live() проверяет - соответствует ли event.target (а именно здесь хранится обьект DOM-дерева, с которым произошло событие) соответствующему селектору (в данном случае - это селектор “a”) и если соответствует - то выполняет обработчик.

Преимущества и недостатки - это тема отдельной статьи. Если не уклонятся в сторону оптимизации, то основным преимуществом, на мой взгляд, является тот факт, что обработчики, навешенные live()-ом будут запускаться даже для элементов, которые были динамически добавлены на страницу, в отличии от bind()-обработчиков, которые на эти элементы нужно будет навешивать вручную (если непонятно, почему это работает именно так - читаем предыдущий абзац, если все равно непонятно - идем покупать всё ту же книгу).

Далее - зачем нужен “return false” в конце обработчика? Он предотвращает от того, чтобы вызывалось действие по умолчанию (в данном случае - переход по ссылке и событие не поднималось выше). Чаще всего JS-разработчики вообще не думают о bubbling-е и под “return false” понимают только “отмену действия по умолчанию”, ну или они вообще не знают, что именно происходит и пишут “return false”, потому что так работает.

Такое отношение jQuery частенько прощает. Но не в случае с live()-методом. Попробуем запустить следующий пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>jQuery.live() test page</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
  jQuery(function() {
    $("a").live("click", function(e) {
      alert("a");
      return false;
    });
    $("a").live("click", function(e) {
      alert("b");
      return false;
    });
  });
  </script>
</head>
<body>
  <a href="http://blog.fxposter.org/">Блог FX-а</a>
</body>
</html>

В результате клика теперь выскакивает только один alert. Пора обратится к документации:

# To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.

Хаха. В данном случае jQuery интерпретирует false “несколько иначе”. :)

Для того, чтобы “пофиксить” подобный баг нужно обратится все к тому же bubbling-у и обработке событий и сделать именно то, что предполагается разработчиком - “отменить действие по умолчанию”. Это делается с помощью метода event.preventDefault() (пример):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>jQuery.live() test page</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
  jQuery(function() {
    $("a").live("click", function(e) {
      alert("a");
      e.preventDefault();
    });
    $("a").live("click", function(e) {
      alert("b");
      e.preventDefault();
    });
  });
  </script>
</head>
<body>
  <a href="http://blog.fxposter.org/">Блог FX-а</a>
</body>
</html>

И самое главное (барабанная дробь!) - при использовании bind() для навешивания обработчиков preventDefault() тоже можно использовать!

Наткнулись мы на эту “фичу”, когда у нас почему-то перестали вызываться некоторые обработчики

Напоследок, замечу еще одно - элемент, на который навешено хотя бы один обработчик события через bind() с “правильно работающим return false”, никогда не будет вызывать никакие live()-события. ;)

Так что будьте бдительны и не забывайте об особенностях обработки событий в JS. Удачи.

]]> http://blog.fxposter.org/2010/06/16/jquery-live-method/feed/ 16 jQuery, AJAX и CP1251 http://blog.fxposter.org/2008/11/28/jquery-ajax-and-cp1251/ http://blog.fxposter.org/2008/11/28/jquery-ajax-and-cp1251/#comments Thu, 27 Nov 2008 22:05:15 +0000 fxposter http://blog.fxposter.org/?p=585 Да, да, я знаю, что в наш век все уже давно перешли на использование utf-8 при построении веб-сайтов, но остались еще и такие, которые пользуються “допотопными”, “отстойными”, и вообще “не-тру” кодировками типа CP1251 (также известной как Windows-1251), KOI8-R и прочих.

Ни для кого ни секрет, что кодировкой получаемых через Ajax данных по-умолчанию принимается UTF-8. Не все знают, что это умолчание можно изменить, указав кодировку явно через заголовок “Content-Type: text/html; charset=cp1251″. Сегодня вот столкнулся с интересным багом, на который убил довольно много времени.

Сервер отдает некоторый текст по запросу (ajax) в кодировке CP1251, предварительно установив соответствующий заголовок - “Content-Type: text/html; charset=cp1251″. На клиенте использовалась библиотека jQuery:

$('#books').load('books.php', {action: 'list'});

Всё работало замечательно… До тех пор, пока я не открыл страничку в IE7. Как ни странно, но ничего не загрузилось. После длительных раздумий, установки alert-ов куда нужно, и куда нет код был заменен следующим кодом:

$.ajax({
  method: 'get',
  url: 'books.php',
  success: function(data) {
    $('#books').html(data);
  },
  error: function(xhr, textStatus, errorThrown) {
    alert(textStatus);
  },
  data: {action: 'list'}
});

В FF всё продолжало работать, а вот IE начал выдавать странную надпись “parsererror”. Гугление никаких результатов не дало - ни одного похожего случая… После, примерно, 10 минут попыток “запустить” страничку в IE, что-то меня дернуло посмотреть на серверный код. Глаза сразу упали на строку установки Content-Type-а. Недолго думая, я поставил charset=utf-8, и, о чудо, IE загрузил всё как положено (правда в неправильной кодировке, но всё же - уже плюс). Догадавшись в чем может быть дело, я установил кодировку в “windows-1251″, после чего всё заработало на ура.

Собственно, мораль сей басни такова - юзайте, люди, юникод, и будет вам счастье.

]]> http://blog.fxposter.org/2008/11/28/jquery-ajax-and-cp1251/feed/ 6 jQuery 1.2.6 Release Notes http://blog.fxposter.org/2008/06/03/jquery-126-release-notes/ http://blog.fxposter.org/2008/06/03/jquery-126-release-notes/#comments Tue, 03 Jun 2008 17:44:31 +0000 fxposter http://blog.fxposter.org/?p=435 После релиза jQuery 1.2.6 долгое время раздел Release Notes пустовал. Сегодня вот заметил, что его наконец заполнили.

Из улучшений:

  • Глобальное ускорение
    • работа с событиями ускорена более чем в два раза
    • селекторы ускорены на 13%
    • .offset() ускорен на 21%
    • работа с CSS (.css()) ускорена на четверть
  • Кое-что улучшено, кое-что добавлено, вроде в API ничего не изменено
]]> http://blog.fxposter.org/2008/06/03/jquery-126-release-notes/feed/ 2 Вышел jQuery UI 1.5 RC1 http://blog.fxposter.org/2008/06/03/jquery-ui-15-rc1/ http://blog.fxposter.org/2008/06/03/jquery-ui-15-rc1/#comments Mon, 02 Jun 2008 21:24:42 +0000 fxposter http://blog.fxposter.org/?p=434 Как сообщает нам наш официальный источник - вышел первый релиз-кандидат jQuery UI - набора виджетов и визуальных эффектов для известного в узких кругах JS-фреймворка jQuery.

Как утверждает источник, RC1 довольно стабилен, а точнее - это самая стабильная версия из тех, которые вообще выпускались. :) Так что - спешите обновляться.

Ах да, чуть не забыл - в некоторых местах поменялось API (в draggable и resizable модулях так точно поменялось), так что будьте всё же осторожны и предусмотрительны.

]]> http://blog.fxposter.org/2008/06/03/jquery-ui-15-rc1/feed/ 0 Используем Google AJAX Libraries API http://blog.fxposter.org/2008/05/29/using-google-ajax-libraries-api/ http://blog.fxposter.org/2008/05/29/using-google-ajax-libraries-api/#comments Thu, 29 May 2008 00:41:15 +0000 fxposter http://blog.fxposter.org/?p=433 Авось, кто-то еще не догадался… :)

Самый простой способ использования своих скриптов совместно с Google AJAX Libraries API:

google.load("jquery", "1");

google.setOnLoadCallback(function() {
  $('<script type="text/javascript" src="_url_вашего_скрипта_"></script>').appendTo('head');
  $('<script type="text/javascript" src="_url_вашего_другого_скрипта_"></script>').appendTo('head');
  // ...
});

Аналогичным образом подключаются, например, плагины для jQuery.

]]> http://blog.fxposter.org/2008/05/29/using-google-ajax-libraries-api/feed/ 3 JQuery Dialogs == nyroModal http://blog.fxposter.org/2008/05/06/jquery-dialogs-nyromodal/ http://blog.fxposter.org/2008/05/06/jquery-dialogs-nyromodal/#comments Tue, 06 May 2008 19:52:37 +0000 fxposter http://blog.fxposter.org/?p=414 Давно ничего не писал - как-то не о чем… Праздники, работа, учеба… Единственное, что реально интересно из этого списка - это работа, но… к сожалению, как раз она и “способствует” отсутствию статей в этом блоге - её много и на блог времени просто не остается… А написать, к счастью, есть о чем. :)

Сегодня речь пойдет о так называемых 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 == “demo” из файла demo.html.

<a href="#demo" class="nyroModal">No Ajax!</a>

А здесь у нас в окно попадет содержимое блока с id == “demo” из текущей страницы.

Если же нужны какие-то дополнительные параметры (значения или 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>

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

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

]]> http://blog.fxposter.org/2008/05/06/jquery-dialogs-nyromodal/feed/ 23 IE6 PNG Fix для PrototypeJS http://blog.fxposter.org/2008/03/09/ie6-png-fix-for-prototypejs/ http://blog.fxposter.org/2008/03/09/ie6-png-fix-for-prototypejs/#comments Sun, 09 Mar 2008 13:33:45 +0000 fxposter http://blog.fxposter.org/2008/03/09/ie6-png-fix-for-prototypejs/ 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.

]]> http://blog.fxposter.org/2008/03/09/ie6-png-fix-for-prototypejs/feed/ 8