Хаки и Скрипты Next Generation CMS : Меню и навигация, JS : FerroMenu JQuery плагин

irbees2008 Опубликовано - 27 - ноября Меню и навигация

Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: нужны навыки css hmlt
Демо:

FerroMenu позволяет:
-Положение меню в одном из 9 опорных точек экрана: верхний левый, верхний-центр, топ-правый, центральный налево, центрально-центр, центр-правый, нижний левый, нижний-центр, нижний правый двигать меню, просто перетаскивая его по экрану. По окончании перетаскивания, меню будет позиционировать себя в ближайшей точке крепления
-настроить меню аспект просто изменив это CSS
-настроить переходы установки их продолжительность, ослабление, задержку из пунктов меню, угол поворота для открывания / закрывания действия, маржу от краев окна просмотра, радиус (т.е. расстояние из пунктов от контроллера)
элементы из меню будет изменен после каждого движения, основываясь на места, доступного по меню.
eneable / выключение перетаскивания функция
инкапсулировать скользящие содержимое в контейнере;

Исходник скачать Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Установка
1.Подключаем скрипты и стили

Код:

1<link rel="stylesheet" href="{tpl_url}/css/jquery.ferro.ferroMenu.css" type="text/css">
2<script src="{tpl_url}/js/jquery-1.9.1.min.js" type="text/javascript"></script>
3<script src="{tpl_url}/js/jquery.ferro.ferroMenu-1.1.min.js" type="text/javascript"></script>

2. Сам HTML код меню

Код:

1<ul id="nav">
2    <li><a href="#">item 1</a></li>
3    <li><a href="#">item 2</a></li>
4    <li><a href="#">item 3</a></li>
5    <li><a href="#">item 4</a></li>
6    <li><a href="#">item 5</a></li>
7    <li><a href="#">item 6</a></li>
8</ul>

3.Инициализация по умолчанию

Код:

1$(document).ready(function() {
2    $('#nav').ferroMenu();
3});

Инициализация с параметрами

Код:

1$(document).ready(function() {
2    $("#nav").ferroMenu({
3        position    : "left-center",
4        delay       : 50,
5        rotation    : 720,
6        margin      : 20
7    });
8});

Читайте Опции раздел для более глубокого объяснения пользовательских параметров.
Опции
Доступные параметры для этого плагина:

Параметр	Доступные значения	Значение по умолчанию	Описание
closeTime	число	500	Меню colsing скорость времени в миллисекундах
delay	число	0	пунктов "анимация отправной задержка в миллисекундах
drag	True \| False	правда	включить / выключить меню перетаскивания вокруг экрана
easing	строка	кубических Безье (0,680, -0,550, 0,265, 1,550)	анимация ослабление. Вы можете использовать каждый HTML5-совместимые easings
margin	число	10	Рентабельность меню в пикселях от краев окна просмотра
position	"Левый-топ '\|' центр-топ '\|' правую верхнюю '\|' правый нижний '\|' центр дном '\|' левой нижней '\|' правой кнопкой центр '\|' левом центре '\|' центр -центр "	'Левой нижней'	Начальное положение в меню в одном из 9 опорных точек
radius	число	100	радиус в пикселях пунктов расстоянии от контроллера меню
rotation	число	0	поворота в градусах, выполняемых пунктов меню на открытие / закрытие
opened	True \| False	ложный	начальное состояние меню: если `<font><font>верно</font></font>` меню открыто, в противном случае (по умолчанию) закрыт
openTime	число	500	Меню открытия скорость времени в миллисекундах

Общественные функции
FerroMenu предоставляет только один открытый метод, который можно назвать извне:

Функция	Параметр	Описание
$. Fn.ferroSlider.toggleMenu ()	-	открыть / закрыть меню

События
FerroMenu предоставляет некоторые пользовательские события:
menuready : срабатывает в конце инициализации меню;
menuopened : срабатывает, когда меню открыто;
menuclosed : срабатывает, когда меню закрыто;
menudragstart : срабатывает на дрэг-начале меню;
menudrag : срабатывает во время увлечения меню;
menudragend : срабатывает на конце лобового сопротивления меню;

Эти события добавить объект, называемый menustatus к JQuery $ событий. объекта, который имеет два простых информацию:
позиция : позиция меню в одном из 9 опорных точек;
открыл : верно , если меню открыто, ложь в противном случае;
Чтобы поймать этого события, вы можете сделать так:

Код:

01$(document).ready(function() {
02    $(document).on("menuready",function(){
03        //do stuff
04    });
05 
06    $(document).on("menuopened",function(){
07        //do stuff
08    });
09 
10    $(document).on("menuclosed",function(){
11        //do stuff
12    });
13 
14    $(document).on("menudragstart",function(){
15        //do stuff
16    });
17 
18    $(document).on("menudrag",function(){
19        //do stuff
20    });
21 
22    $(document).on("menudragend",function(){
23        //do stuff
24    });
25});

Можешь почитать и вот эту статейку "Плагин auth_basic"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.