Динамические блоки на jQuery
В каждом втором моем проекте, где нужно делать различные эффекты на JavaScript, встречаются различные блоки, которые выдвигаются, выезжают или их нужно вытягивать мышкой. Эффекты такого рода очень просто получить с помощью продвинутых фреймверков, но темнемение на разработку таких маленьких скриптов в сумме уходит много времени. Во всяком случае мне было постоянно лень написать что-то универсальное до сегодняшнего момента, и в каждом проекте я делал эти минискрипты. Но т.к. время – деньги, а времени как и денег вечно не хватает – представляю вам первую версию моего плагина dynamicBlocks.
Пример динамических блоков:
Пример может работать немного некорректно в iframe (если двигая блок убрать мышку из области iframe). Нормальную работу вы можете посмотреть открыв пример в новом окне.
Детальнее по плагину:
Пример хорошо демонстрирует возможности плагина и дополнительных объяснений функционала думаю не требуется. сходя из этого приступим сразу к описанию параметров плагина и необходимого для работы html и css кода.
HTML/CSS
Т.к. по сути эффекты плагина очень просты, то код и стили к нему тоже будут элементарными. Основа всех выезжающих блоков это изменение таких параметров как left, right, bottom, top, margin-left, margin-right и т.п. Значит для эффекта нам нужен главный блок (родитель) для которого мы будем изменять эти параметры и элемент внутри него, который будет вызывать событие эффекта.
HTML код блоков в примере:
<div class="content">
Текстовое поле выдвигающегося блока...
</div>
<a href="#" class="opener">></a>
</div>
<div id="topBlock">
<div class="content">
Текстовое поле выдвигающегося блока...
</div>
<a href="#" class="opener">Open</a>
</div>
CSS:
width:200px;
top:0;
left:-180px;
}
#topBlock {
position:absolute;
width:200px;
height:150px;
top:-130px;
left:215px;
}
з стилей я выделил для вас только те, на которые стоит обратить внимание и то наиболее важными для плагина являются свойства top и left. менно их плагин сделает начальным отсчетом, тоже самое было бы если вместо абсолютных координат я использовал бы margin. В примере margin используется в правом блоке.
JS:
<script type="text/javascript" src="js/jquery.dynamicBlocks.js"></script>
<script type="text/javascript">
$('#leftBlock').dynamicBlocks({
opener:'a.opener',
event:'move'
});
$('#topBlock').dynamicBlocks({
opener:'a.opener',
changeStyle:'top',
setParam:'0',
event:'click',
duration:300
});
</script>
- opener – селектор элемента при событии на котором выдвигается блок (default: ‘a’)
- changeStyle – стиль изменяемый у родительского блока (default: ‘left’)
- setParam – параметр стиля, до которого будет происходит изменение от начального, заданного в css (default: 0)
- event – событие при которым будет выдвигаться блок, событие “move” будет выдвигать блок при помощи мышки (default: ‘click’)
- duration – время анимации. На событие “move” не распространяется (default: 500)
На этом мое описание можно закончить, остаётся пожелать приятного использования. Если при использовании будут обнаружены баги пишите на мыло.
Скачать плагин
7 Коментариев to Динамические блоки на jQuery
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
Шикарно!
Часто пользуюсь вашими наработками. Продолжайте в том же духе.
Спасибо!!!
Просто мега полезно =)
прикольно, но! как задать обработку не на клик, о на onmouseover например?
> Параметр event:’mouseover’, но все же такие вещи лучше работают на клик
А как сделать так чтобы Open оставалось на месте,а текст выезжал из него вниз?
В данном плагине так сделать не получится… хотя разве что цссом, опен повесить на абсолют, а релейтив не на блок которые двигается а на его родителя.
А как сделать, чтобы по умолчанию блок был открыт, а по клику закрылся.
Это удобно чтобы всем зашедшим на сайт сказать: сегодня я там-то (например, выставляюсь на выставке).
Если пользоваться данным плагином, то расскажу на основе моего примера. По середине блок открывается по клику, у него начальное свойство top:-140px а в JS он меняется на 0 – setParam:’0′. Для вашего случая достаточно сделать изначально в css 0, а при клике setParam:’-140′