воскресенье, августа 27, 2006

Использование визуальных javascript эффектов в rails приложениях

Как известно (или не совсем), есть JavaScript библиотека различных эффектов. Использовать данные эффекты в Rails приложениях достаточно легко, так как существует метод-помощник visual_effect, который может быть использован с любым событием, например, onclick. Вот пример:
<%= content_tag 'DIV', 'Hello, World', :id => 'msg' %>
<%= content_tag 'DIV', 'Click Here',
:onclick =>
visual_effect(:highlight, 'msg', :duration => 1.0) %>

Здесь, при нажатии текст Hello, World подсветится на 1 секунду. Можно также группировать несколько эффектов в тег SCRIPT:
<SCRIPT type="text/javascript">
<%= visual_effect :opacity, 'idOne', :duration => 2.0,
:from => 1.0, :to => 0.5 %>
<%= visual_effect :opacity, 'idTwo', :duration => 2.0,
:from => 1.0, :to => 0.5, :transition =>
'Effect.Transitions.wobble' %>
</SCRIPT>

В дополнению к эффектам прозрачности и подсветки, visual_effect поддерживает: fade, appear, puff, blindUp, blindDown, switchOff, dropOut, shake, slideDown, slideUp, squish, grow, shrink, pulsate и fold. Переводить смысла нет, лучше попробовать.
Данными эффектами поддерживается параметры задержки (delay ) и времени проигрывания (duration ) эффекта.
<SCRIPT type="text/javascript">
<%= visual_effect :fade, 'idOne', :duration => 5.0,
:delay => 5.0 %>
<%= visual_effect :puff, 'idTwo', :duration => 1.0,
:delay => 5.0 %>
</SCRIPT>

Также можно просто копировать и вставлять себе готовые эффекты, созданные пользователями и visual_effect будет их поддерживать также.
Есть также drag and drop эффекты. Чтобы сделать DIV перетаскиваемым:
<%= draggable_element 'idOne', :revert => true,
:zindex => -1 %>
пс. Кстати, библиотеки эффектов включены в rails и расположены в папке public/javascripts. Чтобы подключить библиотеки нужно просто написать
<%= javascript_include_tag :defaults %>
и все!
Оригинал поста

Комментариев нет: