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

Как хорошо, что прошли времена, когда для расположения элементов на странице использовались таблицы. Остались конечно отдельные личности, которые не видят в табличном расположении ничего плохого, но таких мало. Я не буду вдаваться в подробности почему таблицы не стоит использовать для дизайна вэб сайтов, речь сейчас пойдёт о другом. (Хотя если кому то интересны мои взгляды на табличный layout, то могу написать).

У табличного лэйаута есть один большой плюс. Любому новичку сразу понятно, как он работает. Когда начинающие садятся за дизайн вэб сайта при помощи CSS, то они иногда теряются, злятся на разные браузеры (Internet Explorer), и потом бросают это занятие и добавляют “родные” таблицы. Тут на помощь приходит Yahoo! со своей CSS библиотекой - YUI. Это набор CSS файлов, которые можно использовать для создания современных вэб сайтов. Мало того, что сайты сделанные с YUI будут выглядеть одинаково в большинстве браузеров, так в добавок к этому - не нужно быть CSS гуру, чтобы пользоваться этой библиотекой. Существует CSS Grid Builder, с помощью которого можно построить макет своего сайта за считанные минуты без каких либо знаний CSS.

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

P.S. Напомню, что на этой неделе проходит конкурс IT блогов. Буду очень признателен, если проголосуете за “Аякс по-русски”.

Как подметил автор блога http://thinkweb2.com, многие путают когда в Scriptaculous нужно использовать new. Часто спрашивают на форуме: "а почему new Effect.BlindDown('myElement') не работает?".

Вся проблема в том, что в Scriptaculous есть эффекты, которые требуют инстанции класса, а некоторые не требуют - то есть достаточно просто вызвать статичную функцию. Эффекты, которые требуют инстанцию класса, это:

• Effect.Morph
• Effect.Opacity
• Effect.Scale
• Effect.Move
• Effect.Highlight
• Effect.Parallel

Чтобы создать инстанцию этих классов, нужно использовать new.

А вот список эффектов, которые не требуют инстанции класса. Для них new не нужен.

• Effect.Appear
• Effect.Fade
• Effect.Puff
• Effect.DropOut
• Effect.Shake
• Effect.SwitchOff
• Effect.BlindDown
• Effect.BlindUp
• Effect.SlideDown
• Effect.SlideUp
• Effect.Pulsate
• Effect.Squish
• Effect.Fold
• Effect.Grow
• Effect.Shrink

Для этих эффектов достаточно вызвать статичную функцию класса Effect, например:

Подробнее про эффекты в Scriptaculous можно почитать (и посмотреть) по этому адресу.

Как я уже недавно писал в посте Конкурс лучших IT блогов, Владимир Жилинский создал голосование, чтобы выявить лучшие IT блоги рунета. Победитель получит 50 WMZ (что это такое вообще? лень искать в википедии). На конкурс заявлен 51 блог. Я еще не успел пройтись по ним, но судя по комметам - блоги очень достойные.

Так вот, голосование началось. Прошу всех проголосовать за Аякс по-русски. Голосовать можно сразу за 5 блогов, так что сначала походите по ссылкам и выберите для себя самые интересные ресурсы.

Павел Воронин предложил в комментариях интересную идею - пропустить RSS каждого блога через Yahoo! Pipes и выдавать посетителям один большой поток статей. Я уже как то игрался с Pipes и возможности у этого сервиса очень большие. На выходных потестирую, выдержит ли Pipes сразу 50 RSS.

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

Владимир Жилинский с ресурса http://zhilinsky.ru проводит конкурс лучших блогов на тему программирования, дизайна и всего что связано с вэбом. Идея у автора такая - выбрать 10 блогов которые часто обновляются и чем то выделяются от остальных и провести голосование среди посетителей. Автор лучшего блога получит новенький Mercedes SLK 55 AMG.

Read more