Вы можете комбинировать replace_html с visual_effect в Rails Rails?

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

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

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

Кто-нибудь знает, как это сделать? Благодаря! Brian

источник

2009-03-19 Brian Armstrong

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

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.

источник

2009-03-21 19:26:11

Это определенно делает кроссфейд, который я искал - спасибо Рон! Лучший ответ до сих пор. Изменение размера по-прежнему скачкообразно растет и плавно уменьшается. Я предполагаю, что потребуется еще один прототип, чтобы получить ширину и высоту старого vs new и одновременно увеличивать или уменьшаться. –

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

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

источник

2009-03-19 08:04:05

Привет leethal ... спасибо за ответ. Выполнение fade out/fade в последовательном порядке не будет работать. Страница будет прыгать (изменение размера), поскольку первая исчезает, а вторая снова появляется сразу после. Также это не изменяет размер. Я подозреваю, что они делают что-то более продвинутое на примере basecamp. –

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

Ну, что-то в этом роде.

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

источник

2009-03-20 03:48:27 wesgarrison

Есть ли способ сделать это одновременно? Я думал, что это будет последовательным. Хорошая идея на Firebug. –

Упс .. Я ошибся. Они случаются одновременно! Извини за это. Тем не менее, он все еще скачет. –

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

источник

2009-03-22 16:27:02 Jaryl

Вы можете комбинировать replace_html с visual_effect в Rails Rails?

ответ

Смежные вопросы