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

Поднимите руку, кто терпеть не может функцию 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

Я уже писал как можно делать зеркальные отражения картинок при помощи джаваскрипта. Сегодня статья из этой же серии - для программистов которые не хотят возится с фотошопом. На этот раз мы будем загибать углы у картинок, и создадим такой своеобразный 3D эффект. Пример эффекта можно посмотреть например на Flickr, или наберите в гугле "curl effect".

Для туториала нам понадобится одна картинка и два джаваскрипт файла из комплекта curl.js (по этому адресу можно почитать документацию и посмотреть другие примеры использования).

Нашёл на Flickr вот такую медузу, дал ей id="jellyfish" и сейчас мы будем у неё загибать уголки.

Read more

Как я уже писал на прошлой неделе, команда jQuery выпустила jQuery UI - набор из функций для создания интерфейса пользователя для вэба. Я ждал день релиза, и в воскресение вечером сел за компьютер, чтобы протестировать все новые функции. Функций оказалось немало и результаты отличные. Очередной замечательный релиз.

Сегодня я покажу работу следующих элементов:

• Аккордеон
• Календарь
• Диалог
• Слайдер
• Таблица с сортировкой
• Табы

Read more

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

Делать отражение мы будем при помощи джаваскрипта, и поможет нам в этом старый добрый Prototype, Script.aculo.us и скрипт Reflector. Преимущество данного способа это скорость. То есть допустим заказчик просит показать как будет выглядеть логотип сайта с отражением и времени на обработку картинки в фотошопе - нету. Ну и конечно большое преимущество, что не нужно вообще уметь работать с графикой, чтобы сделать этот эффект.

И так, приступим.
Read more

Все наверное видели док меню на маке. Подобное меню есть и для линукса. Идея в принципе простая - есть список иконок и при наведении на иконку мышкой, иконка увеличивается в размере. Просто, но красиво.

Эту красоту мы сегодня перенесём с десктопа в онлайн и сделаем док меню при помощи CSS и джаваскрипта. А поможет нам в этом CSS Dock Menu. Готовый комплект можно скачать по этому адресу. В комплекте имеется 2 джаваскрипт файла jQuery и Interface, 1 CSS файл, несколько иконок и htc файл, который чинит глюки интернет эксплорера для png картинок.

Приступим.
Read more