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

Создатели Prototype решили не отставать от Script.aculo.us и выпустили Release Canditate 1. Два месяца, после выпуска rc0, они трудились, исправляли баги и добавляли новые функции. Изменений, как всегда, немало:

Read more

Thomas Fuchs объявил о новой версии этой популярной джаваскрипт библиотеки на своём блоге. В принципе это даже не beta релиз, а так называемый “preview”, который знакомит разработчиков с новыми функцияами script.aculo.us. В релизе есть на что посмотреть:

• Теперь script.aculo.us работает на основе Prototype 1.6.0
• Полностью переделаны Ajax.InPlaceEditor и Ajax.InPlaceCollectionEditor.
• Полное наследование эффекта Morph от CSS.
• Новый “core” эффект Effect.Tween.
• Поддержка звуковых эффектов (mp3). Использует родные возможности IE, или установленные плагины, где это возможно.
• Улучшена скорость работы.
• Куча исправленных багов.

Остальные подробности можно прочитать в CHANGELOG.

Thomas также заявил, что после финального релиза 1.8, он “заморозит” разработку. Никаких новых функций добавляться не будет, и будут только исправления багов. Новые функции появятся в версии script.aculo.us 2.0, но пока неизвестно когда же эта версия выйдет. (Я очень надеюсь, что вместе с релизом Ruby on Rails 2.0 )

Поднимите руку, кто терпеть не может функцию alert(). Я отучился от этой заразы после того, как начал использовать firebug. В этом плагине есть замечательная функция:

которая выдаст нужную переменную на консоль. Кто ещё использует alert для отладки своих скриптов - милости прошу на эту страницу.

Но alert не всегда используется для отладки сайтов. Вместе с функцией confirm, его используют для донесения какой нибудь важной информации до посетителя. Информации настолько важной, что это окно с информацией должно быть модальным. Я ничего не имею против модальных диалогов, но alert или confirm считаю старомодными. Никак такие окошки не увязываются с современными дизайнами сайтов.

Поэтому сегодня я покажу вам, как сделать обалденный модальный диалог с помощью ModalBox. Полный комплект можно скачать по этому адресу.

1. Установка

   Подгружаем джавасктипт и CSS

   PLAIN TEXT
   HTML:

   1. <script type="text/javascript" src="includes/prototype.js"></script>
   2. <script type="text/javascript" src="includes/scriptaculous.js?load=builder,effects"></script>
   3. <script type="text/javascript" src="includes/modalbox.js"></script>
   4. <link rel="stylesheet" href="includes/modalbox.css" type="text/css" media="screen" />

2. Использование

   Как параметр к ModalBox можно дать ссылку на другую HTML страницу, или id DOM элемента

   PLAIN TEXT
   JavaScript:

   1. // откроет message.html в модальном окне
   2. Modalbox.show("/message.html", {title: this.title, width: 600});
   3.  
   4. // покажет содержимое элемента с id="message" в модальном окне
   5. Modalbox.show($('message'), {title: this.title, width: 300});

Про другие параметры и примеры использования можно почитать на страничке Андрея Оконечникова.
Напоследок предлагаю потестировать модальный диалог, нажав на эту ссылку:

ModalBox Demo

Кевин Миллер выпустил новую версию своего скрипта Аккордеон. Библиотека основана на базе Prototype и Scriptaculous и работает по моему лучше чем аккордеон от jQuery UI. Ни в коем случае не хочу обидеть фанатов jQuery.

Новые функции в версии 2.0:

• Активный аккордеон будет закрываться при нажатии на заголовок.
• Возможность делать аккордеоны в аккордеоне.
• Аккордеон динамически изменяет размер, в зависимости от содержимого.
• Исправлены многие баги.

Как использовать:

1. Добавляем джаваскрипт
   PLAIN TEXT
   HTML:

   1. <script type="text/javascript" src="javascript/prototype.js"></script>
   2. <script type="text/javascript" src="javascript/effects.js"></script>
   3. <script type="text/javascript" src="javascript/accordion.js"></script>

2. Добавляем HTML
   PLAIN TEXT
   HTML:

   1. <div id="vertical_container">
   2. <h2 class="accordion_toggle">Заголовок 1</h2>
   3. <div class="accordion_content">Текст</div>
   4.  
   5. <h2 class="accordion_toggle">Заголовок 2</h2>
   6. <div class="accordion_content">Текст</div>
   7.  
   8. </div>

3. Применяем скрипт
   PLAIN TEXT
   JavaScript:

   1. var verticalAccordion = new accordion('#vertical_container');

Подробнее о дополнительных параметрах к функции можно посмотреть на страничке автора. Там же сразу есть и рабочий пример скрипта.

Я уже писал ранее про эффекты при помощи Prototype и Script.aculo.us. Обычно, чтобы применить к элементу эффект, надо вызвать одну из функций класса Effect и как параметр передать id элемента, например:

Может кому то этого и хватает, но мне нравится другой подход, а именно:

Читать такой код гораздо удобнее, и можно делать цепочку из функций, например $('element-id').pulsate().shake().fade(). Единственная проблема - таких функций у dom элементов нет и если попытаться их запустить, то браузер выдаст ошибку. Не беда. У Prototype есть удобный механизм для создания своих функций. В этом туториале я покажу как написать функцию shake().

Сначала надо добавить нужную функцию в хэш Element.Methods и затем вызвать Element.addMethods().

Готово. Теперь можно вызывать функцию shake у любого DOM элемента. Попробуем на примере. Сделаем картинку и при нажатии на неё запустим shake().

Посмотреть результат можно по этому адресу: Туториал - Как добавить свои функции к любому DOM элементу.