JQuery - как загрузить внешнее содержимое в один div, переключить div с эффектом скольжения и автоматически прокрутить вниз, чтобы увидеть расширенный div

На моей странице HTML у меня есть:

4 изображения, расположенные подряд, и 1 div, расположенный непосредственно под ним, свернуты.

В зависимости от того, какое изображение щелкает пользователь, я хотел бы загрузить соответствующее содержимое внешней страницы в этот DIV (используя ajaxpage.js?).

Когда содержимое загружается в DIV, DIV должен открываться скользящим движением. (используя jquery.togglr.js?)

Я также хотел бы, чтобы браузер автоматически прокручивал вниз до расширенного DIV, иначе пользователь может не увидеть, что дополнительный контент был открыт. Прокрутка должна иметь эффект смягчения. (используя jquery.scrollTo.js?)

Наконец, если пользователь нажимает на то же изображение, которое открыло DIV, он должен переключить DIV на закрытие. Если пользователь щелкает другое изображение с уже открытым DIV, просто загрузите новый контент, не закрывая и не открывая DIV.

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

Спасибо.


html jquery slidetoggle jquery-plugins
person Pei    schedule 05.08.2010    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, для начала вам понадобится обработчик кликов на ваших 4 изображениях:

$('img.fourImageCssClass').click(function(){
    // do something on click.  $(this) is an object that represents your clicked image
    var imgSrc = $(this).attr('src');
});

Затем вам нужно получить ссылку на ваш <div> в вашей функции обработчика кликов:

var yourDiv = $('#div-id');

Затем вы можете использовать метод $.ajax(), чтобы получить содержимое и загрузить его в ваш див. После этого slideUp/slideDown позаботятся об открытии/закрытии div.

Наконец, для плавной прокрутки вы можете просто анимировать scrollTop окна. Чтобы узнать, куда прокручивать, вы можете получить offset() или postion() вашего div.

person Pat    schedule 05.08.2010
comment
Пэт! Удивительный! Большое спасибо за это решение. Работал как шарм. Опять же, не могу сказать достаточно для вашей помощи. Мне интересно, есть ли у вас какие-либо идеи для другого моего выпуска. Я реализовал этот элемент управления прокручиваемыми вкладками: flowplayer.org/tools/demos/scrollable/one -sized.htm Теперь моя проблема в том, что я хотел бы использовать это дважды на одной странице (в разных разделах страницы). К сожалению, при попытке сделать это возникают конфликты. Любые идеи о том, как настроить это, чтобы я мог использовать его более одного раза? - person Pei; 06.08.2010
comment
К сожалению нет, я никогда раньше не работал с этим плагином. При этом было бы не так сложно написать собственный скроллер, который можно было бы использовать несколько раз на странице. Все, что вам нужно, это длинный, абсолютно позиционированный <div> с вашим содержимым внутри другого <div> с переполнением: скрытый набор. Тогда это просто вопрос анимации левой позиции CSS абсолютно позиционированного div при нажатии на ссылку. - person Pat; 06.08.2010