Разворачиваемая круговая навигация

Mobilyblocks


Описание
Свойства

Плагин Mobilyblocks позволяет организовывать эффектное появление нескольких элементов (вспомогательных), вокруг другого (центрального) элемента. Можно настроить, чтобы это действие происходило при "клике" по центральному элементу или при наведении на него курсора. Так же можно настроить время выполнения анимации появления и исчезновения вспомогательных элементов, расстояние на котором они окажутся от центрального элемента и направления их движения (за все это отвечают свойства плагина).

Количество вспомогательных элементов НЕ фиксировано.

Замечание 1: плагин рассчитан на работу с изображениями одного размера.

Подключение и использование

Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery и файл плагина: (его можно скачать на официальном сайте):

<link rel="stylesheet" href="feature-carousel.css" charset="utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="mobilyblocks.js"></script>

Плагин необходимо применить к div-элементу с определенным html-содержимым, к которому применяется определенные css-правила:

HTML:

<div class="blocks">
  <ul class="reset">
    <li> .. </li>
    <li> .. </li>
    <li> .. </li>
    <!-- и т.д. -->
  </ul>			
</div>

Подразумевается, что у элемента с классом blocks будет задана центральная иллюстрация в качестве фона и фиксированные размеры, соответствующие этой иллюстрации. А в элементах li будут вспомогательные изображения. В результате, необходимый минимум css-правил:

.blocks {
	display:block;
	width:;
	height:; /* ширина и высота центрального изображения */
        background:url() no-repeat; /* путь к изображению */
	position:relative;
	cursor:pointer;
}
 
ul.reset,
ul.reset li {
	display:block;
	list-style:none;
	padding:0;
	margin:0;
}
 
ul.reset li {
	position:absolute;
}


Теперь, чтобы плагин вступил в силу на этом html-шаблоне, необходимо выполнить следующий javascript:

$('.blocks').mobilyblocks(
  // свойства в формате {fld1:val1, fld2:val2, ...}, если это необходимо
);

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

Информация

Размер плагина ~3k
Официальная страница: [1]
Кроссбраузерный (работает во всех современных браузерах)



↓  название :типы значений (значение по умолчанию)
trigger:string('click')
Определяет тип события, при котором будет появляться и исчезать дополнительные изображения. Возможные значения: 'click' и 'hover' (нажатие клавиши и наведение курсора).
// ------- Работа со свойством trigger ---------
// в момент установки плагина на элемент
$('.blocks').mobilyblocks({trigger:'hover'});
direction:string('clockwise')
Определяет как будут появляться вспомогательные элементы: по или против часовой стрелки (соответствующие значения 'clockwise' и 'counter').
// ------- Работа со свойством direction ---------
// в момент установки плагина на элемент
$('.blocks').mobilyblocks({direction:'counter'});
duration:integer(500)
Задает продолжительность (в миллисекундах) анимаций появления и скрытия вспомогательных элементов виджета.
// ------- Работа со свойством duration ---------
// в момент установки плагина на элемент
$('.blocks').mobilyblocks({duration:700});
zIndex:integer(50)
Задает css-свойство z-index для элементов li которые участвуют в виджете.
// ------- Работа со свойством zIndex ---------
// в момент установки плагина на элемент
$('.blocks').mobilyblocks({zIndex:1000});
widthMultiplier:float(1.15)
Коэффициент, определяющий расстояние на котором появятся вспомогательные элементы от основного. Считается относительно размеров центрального элемента.
// ------- Работа со свойством widthMultiplier ---------
// в момент установки плагина на элемент
$('.blocks').mobilyblocks({widthMultiplier:2});