<%= 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,пс. Кстати, библиотеки эффектов включены в rails и расположены в папке public/javascripts. Чтобы подключить библиотеки нужно просто написать
:zindex => -1 %>
<%= javascript_include_tag :defaults %>и все!
Оригинал поста
Комментариев нет:
Отправить комментарий