Сегодня 27 ноября, среда ГлавнаяНовостиО проектеЛичный кабинетПомощьКонтакты Сделать стартовойКарта сайтаНаписать администрации
Поиск по сайту
 
Ваше мнение
Какой рейтинг вас больше интересует?
 
 
 
 
 
Проголосовало: 7276
Кнопка
BlogRider.ru - Каталог блогов Рунета
получить код
Хаки и Скрипты Next Generation CMS
Хаки и Скрипты Next Generation CMS
Голосов: 1
Адрес блога: http://ngcmshak.ru
Добавлен: 2013-12-31 14:21:51 блограйдером 88888888
 

FerroMenu JQuery плагин

2013-11-27 01:34:02 (читать в оригинале)

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

Исходник скачать [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам ferromenu-1_1.zip (282.18 Kb)[/is-logged]
Установка
1.Подключаем скрипты и стили
Код:
 <link rel="stylesheet" href="{tpl_url}/css/jquery.ferro.ferroMenu.css" type="text/css">
<script src="{tpl_url}/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="{tpl_url}/js/jquery.ferro.ferroMenu-1.1.min.js" type="text/javascript"></script>

2. Сам HTML код меню
Код:
 <ul id="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>
</ul>

3.Инициализация по умолчанию
Код:
 $(document).ready(function() {
$('#nav').ferroMenu();
});
Инициализация с параметрами
Код:
 $(document).ready(function() {
$("#nav").ferroMenu({
position : "left-center",
delay : 50,
rotation : 720,
margin : 20
});
});
Читайте Опции раздел для более глубокого объяснения пользовательских параметров.
Опции
Доступные параметры для этого плагина:

Параметр Доступные значения Значение по умолчанию Описание
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 опорных точек;
открыл : верно , если меню открыто, ложь в противном случае;
Чтобы поймать этого события, вы можете сделать так:
Код:
 
$(document).ready(function() {
$(document).on("menuready",function(){
//do stuff
});

$(document).on("menuopened",function(){
//do stuff
});

$(document).on("menuclosed",function(){
//do stuff
});

$(document).on("menudragstart",function(){
//do stuff
});

$(document).on("menudrag",function(){
//do stuff
});

$(document).on("menudragend",function(){
//do stuff
});
});

Тэги: меню, навигация,

 


Самый-самый блог
Блогер ЖЖ все стерпит
ЖЖ все стерпит
по сумме баллов (758) в категории «Истории»
Изменения рейтинга
Категория «Кино»
Взлеты Топ 5
+363
414
Информационный колодец
+341
345
Yurenzo
+339
343
CAPTAIN
+331
341
Alta1r
+322
361
Vindigo
Падения Топ 5


Загрузка...Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.