Наш клан
 

  • Страница 1 из 1
  • 1
Выдвигающиеся блоки на jQuery
Сикарашка 
img 05.06.2010, Суббота в 22:16  Сообщение #1


Как обычно в начале подключаем:
Code
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.disable.text.select.js"></script>

Фича номер один
Клик по объекту плавно разворачивает какой-то блок
Такой ефект будет полезен в списке частых вопросов, где при клике на вопрос открывает ответ на него. Сниппеты можно применить как к группе пар «ссылка-блок», так и к одной паре.
Code
// раскрытие блока при клике на ссылку
(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']);
               });
           });
     };
})(jQuery);
$('div > a').openCloseBlocks($('div.blocks'), {
     speed: 'fast'
});

HTML Код
Code
<h1>Раскрытие блока при клике на ссылку</h1>
<div><a href="#">Кликни по мне</a></div>
<div class="blocks no-display" style="width: 20em">Блок с дополнительной интригующей, познавательной, необычайно полезной и своевременной инфомацией.</div><br/>
<div><a href="#">Кликни по мне</a></div>
<div class="blocks no-display" style="width: 20em">Блок с дополнительной интригующей, познавательной, необычайно полезной и своевременной инфомацией.</div><br/>
<div><a href="#">Кликни по мне</a></div>
<div class="blocks no-display" style="width: 20em">Блок с дополнительной интригующей, познавательной, необычайно полезной и своевременной инфомацией.</div><br/>
<div><a href="#">Кликни по мне</a></div>
<div class="blocks no-display" style="width: 20em">Блок с дополнительной интригующей, познавательной, необычайно полезной и своевременной инфомацией.</div><br/>
<h1>Выпадающий блок при клике на ссылку</h1>
<p style="width: 30em">Стимулирование сбыта однородно ускоряет опрос, используя опыт предыдущих кампаний. Надо сказать, что комплексный анализ ситуации наиболее полно искажает <a href="#" id="toggler">комплексный бренд</a>, осознав маркетинг как часть производства. Потребление, как принято считать, вполне выполнимо. Правда, специалисты отмечают, что медийный канал по-прежнему устойчив к изменениям спроса.</p>
<div class="no-display drop-down-block" style="width: 20em" id="drop-down-list">Блок с дополнительной интригующей, познавательной, необычайно полезной и своевременной инфомацией.</div>

Фича номер два
Клик по объекту показывает блок прямо под ней поверх контента
Другими словами выпадающее меню с каким либо содержанием.

Code
// выпадающий список под ссылкой
(function($) {
     $.fn.dropDownBlock = function(block, options) {
         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').dropDownBlock($('#drop-down-list'));

HTML Код
Code
<h1>Выпадающий блок при клике на ссылку</h1>
<p style="width: 30em">Стимулирование сбыта однородно ускоряет опрос, используя опыт предыдущих кампаний. Надо сказать, что комплексный анализ ситуации наиболее полно искажает <a href="#" id="toggler">комплексный бренд</a>, осознав маркетинг как часть производства. Потребление, как принято считать, вполне выполнимо. Правда, специалисты отмечают, что медийный канал по-прежнему устойчив к изменениям спроса.</p>
<div class="no-display drop-down-block" style="width: 20em" id="drop-down-list">Блок с дополнительной интригующей, познавательной, необычайно полезной и своевременной инфомацией.</div>

raskrytie-bloka-pri-klike-na-ssylku.rar
Пользователь в офлайне     Карточка пользователя     Отправить личное сообщение
 
  • Страница 1 из 1
  • 1
Поиск:

Все материалы размещенные на сайте пренадлежат их владельцам и предоставляются исключительно в ознакомительных целях.
Администрация ответственности за содержание материала не несет и убытки не возмещает.
По истечении 24 часов материал должен быть удален с вашего компьютера.
Незаконная реализация карается законами РФ и Украины: "Об авторском и смежном праве".
При копировании материала, ссылка на сайт обязательна!