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

Archive for the 'Prototype' Category

ProtoFlow: Coverflow на Prototype

March 12th, 2008 | Category: Javascript, Prototype, Script.aculo.us

Месяц назад я писал про Imageflow - coverflow на джаваскрипте. Так вот теперь появилась альтернатива. Obaid Ahmed написал похожий скрипт при помощи Prototype и Scriptaculous - Protoflow. В отличие от Imageflow, Protoflow не зависит от сервера и будет работать хоть с PHP, хоть с Java, хоть с Rails.

protoflow

Установка довольно простая. Качаем библиотеку, подгружаем нужные javascript файлы в head и вставляем следующий маркап: Read more

2 comments

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

February 27th, 2008 | Category: Javascript, Prototype

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

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

PLAIN TEXT

HTML:

<ul id="unordered_list" class="my_ul_class">
<li id="one" class="my_li_class">First</li>
<li id="two" class="my_li_class">Second</li>
</ul>
<script type="text/javascript">
$$('.my_li_class').each(function(li){
li.observe('click', function(){alert("Clicked")});
});
</script>

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

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

4 comments

Фокусы с Textarea

February 25th, 2008 | Category: Javascript, Prototype, Script.aculo.us

Чем textarea больше - тем туда удобнее вводить текст. Всё видно, ничего не надо скроллить. Только вот не всегда это красиво показывать на странице такие огромные текстовые поля. Более элегантный способ - это показать небольшую textarea, и если текст в неё не влезает - увеличить её размер динамически. Так мы и сделали на Qype.co.uk

Для работы скрипта нужны Prototype и Script.aculo.us. Read more

15 comments

Подсказки для полей input и textarea

January 25th, 2008 | Category: Javascript, Prototype, Tutorial

Работа с html формами это одно из самых интересных занятий. Чего только не сделаешь, и автокомплит и валидация форм и отправка данных аяксом. Недавно меня заинтересовала проблема показа подсказок для пользователей. Например если это поле поиска, то можно показывать некоторые примеры. Например список распространённым запросов. При нажатии на поле, эти подсказки надо спрятать и если юзер ничего не ввёл - то снова их показывать.

В интернете есть куча примеров как это сделать, но я решил написать своё. Вот идея реализации. Для подсказок будем использовать аттрибут "title" и "value". Также элементам с такой функциональностью дадим класс "ClearOnClick". Тоесть элемент формы будет выглядеть примерно так:

PLAIN TEXT

HTML:

<input type="text" title="Example: ajaxrussia, google, yahoo" value="Example: ajaxrussia, google, yahoo" name="query" class="ClearOnClick" />

13 comments

Prototype, script.aculo.us и книга

November 08th, 2007 | Category: Javascript, Prototype, Script.aculo.us, Релиз

В связи с переездом в Гамбург (кстати ещё не нашёл квартиру, живу в гостиннице) я чуть не прозевал релиз Prototype и script.aculo.us. Про бета версии я уже писал тут и тут. Изменений с тех пор немного - в основном исправления багов и оптимизация кода. Зато разработчики порадовали кое чем другим. Они выпустили книгу, где можно найти кучу примеров использования Прототайпа и Scriptaculous. Книга будет полезна как новичкам, так и old school джаваскрипт программистам. Я себе точно куплю.