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

Хочу обратить ваше внимание на Proto.Menu. Это очень элегантный скрипт, основанный на JavaScript библиотеке Prototype, для создания контекстного меню.

Вот его основные достоинства:

• Малый размер. 2 Кб (1.5 Кб в сжатом виде).
• Если у пользователя отключен джаваскрипт, то страница работает без ошибок.
• Работает во всех современных браузерах (в Опере надо нажимать Crtl + левая кнопка мыши).
• Поддержка скинов.
• Скорость. Меню создаётся один раз при загрузке страницы и только меняет координаты при клике.

На Proto.Menu в действии можно посмотреть по этому адресу. Нажмите правой кнопкой мыши в любом месте страницы.

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

Если пользователь ошибся при вводе данных - обязательно надо указать где именно он ошибся. Многие дизайнеры любят делать из сообщения об ошибке какое то произведение искусства и в конце концов пользователю не ясно, допустил ли он ошибку вообще. Программисты тоже иногда перебарщивают и выдают какой нибудь alert с сообщением типа “поле с id g234em1 заполнено неверно”. Сидишь после этого и думаешь, где же это поле g234em1.

Ещё одна распространённая ошибка - прятать сообщение через какой то промежуток времени. Красиво, но неправильно. Юзер может например отправить форму и уйти на кухню за кофе. В его отсутствие выскочит сообщение об ошибке, до прихода пользователя спрячется и эта важная информация останется незамеченной.

Но хватит теории, и приступим к практике. Использовать мы будем, уже в который раз, Prototype, Scriptaculous и новый в этот раз Validation скрипт от Andrew Tetlaw.

Read more

Морфинг эффекты есть в Script.aculo.us уже некоторое время, но обратил я на них внимание только недавно, когда пытался написать фото слайдшоу на джаваскрипте. Мне нужно было, при нажатии на фотографию, увеличить и передвинуть её в сторону. И всё это передвижение должно происходить плавно, а не просто изменить размер и координаты.

Начал искать джаваскрипт библиотеки для анимации, и вспомнил что в Script.aculo.us, который я и так постоянно использую, уже есть всё, что мне надо. Называется эффект Morph, и сейчас я покажу как просто его использовать.

Read more

Не часто это бывает нужно, но иногда приходится подгружать CSS джаваскриптом. Например нужно выдавать браузерам разные версии CSS. В этом туториале мы сделаем простую HTML страничку, где CSS стиль загрузится через 5 секунд после открытия страницы в браузере.

Для этого "чуда" мы используем JavaScript библиотеку Prototype, с которой особенно хорошо знакомы все Ruby On Rails программисты . Конечно можно сделать всё, что я собираюсь показать, и стандартным джаваскритом, без дополнительных библиотек, но Prototype я хотел использовать по двум причинам. Во первых с прототайпом программировать удобнее, во вторых я хотел попробовать новую версию прототайпа, с его новым DOM Builder-ом.

Итак приступим.

Вот наш HTML. Ничего особенного в нём нет. Обратите внимание, что нигде нету ссылки на CSS файл.

А вот CSS который мы хотим загрузить через 5 секунд после открытия страницы. Этот стиль изменит цвет фона страницы на светло зелёный, или cucumber_shampoo.

Для этого напишем набольшой скрипт, который мы поместим в HEAD.

Готовый результат можно посмотреть по этому адресу. Хочу ещё раз обратить ваше внимание на то, что версия прототайпа, использованная в туториале - 1.6.0 Release Candidate. С версией 1.5.1.1 скрипт скорее всего работать не будет.

Кто напишет в комментариях самый короткий JavaScript, который делает тоже самое, но без таймера - тот молодец

Формы для поиска есть пожалуй на любом вэб сайте, но в большинстве случаев они очень скучные и похожи друг на друга. Мне нравится когда html формы чем то отличаются от других. Поэтому сегодня я хочу представить вашему вниманию туториал от Брайана Рэйндэла.

Для туториала нам потребуется две картинки и несколько минут свободного времени.

1. HTML Markup
   Тут мы создаём DIV контейнер, в котором будет наша форма.
   PLAIN TEXT
   HTML:

   1. <div id="search_box">
   2. <form id="search_form" method="post" action="/">
   3. <input type="text" id="s" value="Search" class="swap_value" />
   4. <input type="image" src="images/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" />
   5. </form>
   6. </div>

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

   1. #search_box {
   2. width: 201px;
   3. height: 31px;
   4. background: url(bg_search_box.gif);
   5. }
   6. #search_box #s {
   7. float: left;
   8. padding: 0;
   9. margin: 6px 0 0 6px;
   10. border: 0;
   11. width: 159px;
   12. background: none;
   13. }
   14. #search_box #go {
   15. float: right;
   16. margin: 3px 4px 0 0;
   17. }

И - пожалуйста, форма для поиска готова: