Ajax Russia : Аякс по-русски

Свежие новости из мира IT

MotionBox: прототайп на стеройдах

February 27th, 2008 | Category: Javascript, Prototype | Автор: Александр

Ребята из MotionBox выпустили новую библиотеку, основанную на прототайпe, которая упрощает управление и делегирование событий. Теперь можно привязывать обработчики событий (как правильно перевести bind?) к элементам, даже если они ещё не существуют.

Это очень удобно для сайтов с использованием аякса. Допустим у вас есть такой код:

PLAIN TEXT
HTML:
  1. <ul id="unordered_list" class="my_ul_class">
  2.   <li id="one" class="my_li_class">First</li>
  3.   <li id="two" class="my_li_class">Second</li>
  4. </ul>
  5. <script type="text/javascript">
  6. $$('.my_li_class').each(function(li){
  7.   li.observe('click', function(){alert("Clicked")});
  8. });
  9. </script>

Мы ждём клик по LI элементам и выдаём alert. Теперь представте, что аяксом мы подгрузили еще один LI элемент и вставили его в UL. Можно хоть до посинения по нему кликать - никакого alert'a не появится. Для него надо отдельно писать новый click observer.

А теперь то же самое с MotionBox:

PLAIN TEXT
HTML:
  1. <ul id="unordered_list" class="my_ul_class">
  2.   <li id="one" class="my_li_class">First</li>
  3.   <li id="two" class="my_li_class">Second</li>
  4. </ul>
  5. <script type="text/javascript">
  6. MBX.EventHandler.subscribe(".my_li_class", "click", function(){alert("Clicked")});
  7. </script>

Теперь сколько бы LI элементов мы не добавили - у всех будет выскакивать alert при клике. Главное чтобы у всех LI был класс "my_li_class".

Так же можно подписываться на события у элементов по ID:

PLAIN TEXT
JavaScript:
  1. MBX.EventHandler.subscribe("#one", "click", my_listener);

Или подписываться на события сразу у нескольких элементов:

PLAIN TEXT
JavaScript:
  1. MBX.EventHandler.subscribe([".my_ul_class", "#one"], ["click", "mouseover"], [my_listener, my_second_listener]);

Тут другие примеры и документация. Очень классная библиотека. Я буду у себя использовать ;)

del.icio.us Забобрить!

4 Comments so far

  1. SAZ April 5th, 2008 22:26

    В принципе обалденная штуковина (особенно для INPUTov) - я так думаю

  2. Oleg_AT April 18th, 2008 08:47

    Создал:

    First
    Second

    MBX.EventHandler.subscribe(”.my_li_class”, “click”, function(){alert(”Clicked”)});

    А он не работет!
    В чем ошибка?

  3. Oleg_AT April 18th, 2008 08:50

    Вот текст
    ‘
    ‘
    ‘
    ‘
    ‘ First
    ‘ Second
    ‘
    ‘
    ‘ MBX.EventHandler.subscribe(”.my_li_class”, “click”, function(){alert(”Clicked”)});
    ‘
    ‘

  4. SAZ April 19th, 2008 11:24

    И снова я.
    >Oleg_AT
    А не работает потому что надо до конца читать
    Конечно, минус автору что не показал полный скрипт!
    А ведь надо еще и прототайп библиотеку подключить
    Причем версии 1.5.0 RC1
    вообщем у себя на сайте я разместил рабочий пример
    Добро пожаловать на http://www.sisadmizena.dp.ua/prototype_on_steroids/

Leave a reply