script.aculo.us, prototype.js и «выезжающий» блок

[tven]

Уважаемые, а подскажите, уже всю голову сломал. Имеется задача: есть некий блок на странице (div), по щелчку на котором должен создаться эффект «выезжающего» из-под него другого блока. Используются фреймворки, указанные в заголовке.
Есть нечто в духе Effect.SlideDown, но реализующее «выезд» не по вертикали, а по горизонтали? Желательно, чтобы можно было указать направление, в котором блок будет выезжать.

@музыка: Мельница — Горец

@темы: JavaScript

Comments

[Derek Rush]

tven самый простой вариант это jquery
у них на главной странице jquery.com/ вроде бы то что нужно есть

[tven]

Derek Rush, спасибо, посмотрю. С ходу нужного решения не нашёл, но в целом библиотека многообещающая.

[Derek Rush]

tven Я сейчас ей ползуюсь, очень удобно. Да и много всего под неё написано, так что бОльшую часть решений можно найти уже в готов виде.
икомая функция пишется примерно так
$("p.surprise").addClass("ohmy").show("slow");
она у них на главной странице есть

[tven]

Derek Rush, а зачем addClass?

[tven]

Всё, вопрос решился. Достаточно было использовать animate и очень важный момент: для того, чтобы эффект выглядел именно как выезжание, необходимо явно специфицировать ширину элемента, причём через css('width',value) (либо в цсс через width). Иначе (у меня использовался min-width) происходит просто появление блока.
В случае же «обратной анимации» (т. е. выезд происходит не слева направо, а наоборот) необходимо закручиваться через спецификацию свойства left (реально, номер покатит, как мне кажется, только при абсолютном позиционировании блока). В общем, если будет интересно, покажу решение.

[alhames]

tven интересно! =) Покаж +)
На конкретном примере

[Derek Rush]

tven

а зачем addClass?

Хоть вопрос и решён, всёравно отвечу
это нужно для того чтобы изменить класс surprise на ohmy
у них разные значения видимости, т.е. с первом информацию не видно, а со вторым классом она видна.

[tven]

Derek Rush, это не имеет смысла. Просто потому, что в процессе показа/скрытия меняется свойство display с none на block.
alhames
Мой пример кода: три блока — tab1, tab2, tab3. Они расположены по центру страницы. У блоков 1 и 3 менюшка (назовём их условно slide1,2,3) выплывает влево, у блока два — вправо. slide1,2,3 позиционируются с помощью яваскрипта абсолютно, через вычисления позиции блоков tab1,2,3.
В общем случае tab выглядит так:

<div id="tabn" оnclick="javasсript:disp(n)"></div>

Переменная wdth — это ширина блока (тут ещё считается, что менюшка должна изменяться «кратно»).
Код показа-скрытия выглядит примерно так (не оптимальным в данном случае является вычисление позиций при каждом показе, по хорошему это надо делать один раз):

function disp(id){
 var thisslide=$('#slide'+id);
 var pos=$('#tab'+id).offset();
 if ($('#slide'+id).css('display')=='none'){
  var dim={width: $('#tab'+id).width(), height: $('#tab'+id).height()};
  if (thisslide.width()%wdth!=0) thisslide.width((parseInt(thisslide.width()/wdth)*wdth+wdth).toString()+'px');
  else thisslide.width((parseInt(thisslide.width()/wdth)*wdth).toString()+'px');
  thisslide.css('top',pos.top+'px');
  if (id%2!=0)
   thisslide.css('left',(pos.left+dim.width).toString()+'px');
  else
   thisslide.css('left',(pos.left-thisslide.width()).toString()+'px');
  thisslide.css('position','absolute');
 }
 if (id%2!=0) thisslide.animate({width: 'toggle'},1000); else {
  var lft=thisslide.css('left');
  if (thisslide.css('display')=='none'){
   thisslide.css('left',pos.left);
   thisslide.animate({left: lft, width: 'toggle'},1000);
  }
  else
   thisslide.animate({left: pos.left, width: 'toggle'},1000);
 }
}


Замечен такой баг (пока не исправлен): при быстром нажатии на блоке 2 несколько раз подряд возможно «выплывание» менюшки в противоположном задуманному направлении.

[alhames]

tven

Замечен такой баг (пока не исправлен): при быстром нажатии на блоке 2 несколько раз подряд возможно «выплывание» менюшки в противоположном задуманному направлении.

Поставить на даблклик эту же функцию?

[tven]

alhames, не в этом дело. Функция отрабатывает на двойном клике как при двух одиночных, и это нормально (на мой взгляд). Впрочем, идея сто́ит рассмотрения.

[Derek Rush]

tven

это не имеет смысла. Просто потому, что в процессе показа/скрытия меняется свойство display с none на block.

none - Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение параметра и сделать его вновь видимым можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происхоит переформатирование данных на странице с учетом вновь добавленного элемента.

block - Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега , заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.

так что обьект из невидимого становится обычным, если не нравится block, можно использовать inline, это уж как по вёрстке лучше

[tven]

Derek Rush, если я всё правильно понимаю, то и для блочного элемента ничего не мешает указать в качестве параметра animate display: inline. По умолчанию таки принимается display: block;
Внимание, вопрос: зачем совершать лишние телодвижения?

[Derek Rush]

tven никаких лишних телодвижений
сначал скрыли, потом показали.

[kobr78]

Ajax начал изучать недавно, но понял что всего должно быть одно. Не стоит изучать кучу всего фреймовров библиотек и т д
например у меня джентельменский набор по ajax - prototipe.js больше мне не надо
если что то в него не вписывается - я просто говорю клиенту - что не возможно.
если хочет извратиться - исп flash

[tven]

kobr78, вы путаете тёплое с мягким. Изначально задача не имеет ничего общего с ajax, только визуальные эффекты.

если что то в него не вписывается - я просто говорю клиенту - что не возможно

, тем самым лишая себя полезного опыта и, возможно, теряя клиента? Благодарю покорно, но этот путь не для меня.