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

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

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

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

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

Кто из вас любит халяву? Да, я тоже люблю! Поэтому я не мог не написать про новую статью на Smashing Magazine - 20+ Free And Fresh Icon Sets. Автор сделал список самых красивых иконок и иллюстраций, которые можно использовать бесплатно для вэб дизайна. В списке есть iPhone иконки, государственные флаги, картинки для RSS и много других. Теперь у RSS на Ajax Russia - новая иконка из комплекта Feedicons.

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

Часто бывает, что пишешь статью или делаешь презентацию о каком нибудь вэб сайте, и нужно показать скриншот этого ресурса. Конечно это сделать просто и быстро - Print Screen, затем Paste в фотошопе, изменяем размер, обрезаем картинку, чтобы не было видно браузер.... Стоп. Не так уж это быстро и просто.

Куда быстрее это сделать на Thumbalizr. Просто пишем адрес сайта, нажимаем Thumb It, ждём пару секунд и скриншот готов. Можно выбрать среди картинок 320, 640, 800, 1024 или 1280 пикселей в ширину.

Скриншот сайта Thumbalizr для этой статьи сделан им же самим

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

Называется этот скрипт GFslideShow, и как можно догадаться из названия - сделали его талантливые ребята из Google. Для туториала нам необходимо: ключ для GoogleFeed API и RSS feed с фотографиями.

Read more