Как создать выпадающий блок на jQuery?

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

Клик по объекту плавно разворачивает какой-то блок
Такой сниппет будет полезен в списке частых вопросов, где при клике на вопрос открывает ответ на него. Сниппеты можно применить как к группе пар «ссылка-блок», так и к одной паре. Я бы назвал это упрощенным вариантом аккордиона. Вобьщем множество вариантов применения так что возмите себе на заметку.

<script type="text/javascript">// <![CDATA[
// код сниппета
(function($) {
$.fn.openCloseBlocks = function(blocks, options) {
var defaults = {
speed: 'normal'
},
opts = $.extend(defaults, options),
togglers = $(this),
bls = $(blocks); if(!bls) return;

togglers.each(function(index) {
$(this).click(function(e) {
e.preventDefault();
$(bls[index]).slideToggle(opts['speed']);
});
});
};
})();
// использование
// выбераем нужные ссылки
// аргумент — что открывать (i-ый элемент первого массива
// открывает i-ый элемент второго массива)
$('div > a').openCloseBlocks($('div.blocks'), {
speed: 'fast'
});
// ]]></script>

Клик по объекту показывает блок прямо под ней поверх контента
Весьма полезная вещь. Подобным образом можно создать некое скрытое меню и просто подсказку по клику. Вобщем советую использовать.

<script type="text/javascript">// <![CDATA[
// код сниппета
(function($) {
$.fn.dropDownBlock
var defaults = {
speed: 'fast',
top: $(this).height(),
left: 0
},
opts = $.extend(defaults, options),
toggler = $(this),
block = $(block);
toggler.css({'outline': 'none'})

toggler.click(function(e) {
e.preventDefault();
$(block).css({
'position' : 'absolute',
'top' : (toggler.offset().top + opts['top']) + 'px',
'left' : (toggler.offset().left + opts['left']) + 'px'
});
if($(block).is(':visible')) $(block).fadeOut(opts['speed']);
else $(block).fadeIn(opts['speed']);
this.focus();
});
toggler.blur(function() {
$(block).fadeOut(opts['speed']);
});
};
})(jQuery);
// использование
// при клике на #toggler
// под ним показывается #drop-down-list
$('#toggler').dropDownBlock($('#drop-down-list'), {
speed: 'slow',
left: 10
});
// ]]></script>

Ну вот на этом всё. помоему ничего сложного. Кто чтото не понял то проху писать в коментариях. Разьясним и обьясним.

  • Кристина

    Спасибо, очень интересная заметка...

  • Андрей Фог

    Спасибо большое за пример. Только вот еще необходимо рядом со ссылкой сделать стрелочку, которая тогглилась если блок открыт — стрелочка указывает вниз, если блок закрыт — вправо.

  • semchyk

    полезно почитать спасибо.

  • Alex

    А как сделать несколько выпадающих блоков (второй вариант)на одной странице?

  • Izem

    Подскажите, пжл, а как сделать так, чтобы второй пример работал с несколькими блоками и не через ID, а через class'ы? Как я понимаю, jQuery спокойно может работать и с классами. Спасибо.

  • Иван

    Столкнулся с проблемой вывода четко по центру.

    Я размещаю меню в сплывающих подсказках.

    Мне приходится использовать 10 меню в виде картинок расположенных рядом со стилем float: left

    из за этого не получается настроить четко по центру над каждой кнопкой.

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

Запись навигация

Top