Можете ли вы объединить replace_html с визуальным эффектом в Rails RJS? - PullRequest
Новая
       17

Можете ли вы объединить replace_html с визуальным эффектом в Rails RJS?

3 голосов
/ 19 марта 2009

Я занимаюсь разработкой сайта на Ruby on Rails, и у меня есть div с некоторым содержанием. После нажатия на ссылку, я хочу, чтобы этот контент был заменен другим материалом. Это прекрасно работает с replace_html и rjs.

Тем не менее, я бы предпочел, чтобы между старым и новым контентом был небольшой переход / исчезновение (кроссфейд?). Также размер div будет немного изменен, так что было бы круче, если бы это делало эффект увеличения / уменьшения. Я думал, что в Scriptaculous должно быть что-то подобное, но я точно не могу найти его, если они это сделают.

Кстати, есть отличный пример, если у вас есть учетная запись Basecamp: войдите в систему и нажмите «Все люди», затем «Добавить новую компанию», чтобы увидеть эффект в действии.

Кто-нибудь знает, как это сделать? Спасибо! Brian

Ответы [ 4 ]

4 голосов
/ 21 марта 2009

Для кроссфейдирования вам необходимо расположить новый контент абсолютно с теми же координатами х / у, что и у старого контента. Вот проверенный пример: 

page.insert_html :after, 'old-content', content_tag('p', '[new content]', :id => 'new-content', :style => 'display:none')
page << <<-JS
  var oldOffset = $('old-content').cumulativeOffset();
  $('new-content').setStyle({
    position: 'absolute',
    left:     oldOffset.left + 'px',
    top:      oldOffset.top + 'px'
  });
JS
page['old-content'].fade :duration => 3
page['new-content'].appear :duration => 3

Обратите внимание на большой блок посередине - в Prototype некоторые вещи проще, чем в RJS.

0 голосов
/ 22 марта 2009

Одним быстрым способом было бы сделать замену и затем пульсировать деление.

0 голосов
/ 20 марта 2009

Исчезает 1-й див. Слепой во 2-м диве одновременно. По мере того, как первый исчезает, появляется второй, расширяющий то, что осталось от первого.

Ну, как-то так.

Загрузите Firebug и пошагово пройдитесь по коду, если хотите увидеть, что они вызывают.

0 голосов
/ 19 марта 2009

Стратегия может заключаться в том, чтобы поместить элемент в div обтекания, исчезнуть этот div обтекания, заменить HTML в элементе, а затем снова добавить div обтекания.

Я сам не пользователь RJS / scriptaculous, поэтому я не уверен, что это за код, но я почти уверен, что стратегия будет работать.

...