Главная » Статьи » ucoz » скрипты
скрипт ucoz выпадающее меню


Сегодня мы сделаем плагин jQuery одноуровневого меню в стиле "лава лампы". Лава лампа - модный в 70-х годах прошлого века светильник, хотя и в наши дни он пользуется популярностью благодаря своему гипнотизирующему эффекту плавного перетекания полупрозрачных пузырей.

Шаг 1. Разметка HTML

До того, как запустить в работу функционал плагина, нужно создать форму, на которой будет базироваться его работа. Создаем неупорядоченный список для элементов навигации, и импортируем jQuery и jQuery UI с сайта Google.

view sourceprint?
01<!DOCTYPE html>
02 
03<html lang="ru-RU">
04<head>
05    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
06    <title>Пример для сайта RUSELLER.COM</title>
07        <link href="css/style.css" rel="stylesheet" type="text/css"/>
08 
09</head>
10<body>
11 
12<div id="container">
13 
14    <ul id="nav">
15        <li id="selected"><a href="#">Главная</a></li>
16        <li><a href="#">Обо мне</a></li>
17        <li><a href="#">Блог</a></li>
18        <li><a href="#">Портфолио</a></li>
19        <li><a href="#">Контакт</a></li>
20    </ul>
21 
22 
23 
24</div>
25 
26<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
27 
28<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
29 
30</body>
31</html>

Заметьте, что мы присвоили id  "selected” ссылке на главную страницу.

Чтобы сделать функционал меню доступным для использования в других проектах, сделаем наш небольшой скрипт плагином и вызовем его на нашей странице следующим образом:

view sourceprint?
1$('#nav').spasticNav();

Так как мы решили сделать скрипт плагином, то для него надо создать отдельный файл и присоединить его к нашей странице. Файл плагина назовем jquery.spasticNav.js. А в код разметки в конце надо добавить следующие строки:

view sourceprint?
1<script type="text/javascript" src="js/jquery.spasticNav.js"></script> 
2 
3<script type="text/javascript">
4$('#nav').spasticNav();
5</script>

Шаг 2. Начинаем писать плагин

Чтобы уменьшить количество глобальных переменных, которые нужно будет создать, а также чтобы исключить конфликты использования символа $ в других скриптах, наш плагин будет реализован в виде анонимной функции:

view sourceprint?
1(function($) {
2 
3})(jQuery);

Теперь jQuery передается в наш плагин и будет доступен через символ $.

Хорошей практикой является предоставление пользователю плагина как можно большей опций для настройки при использовании. Для этого мы реализуем возможность передать в плагин литеральный объект, с помощью которого можно будет изменить установки по умолчанию. В набор опций плагина будет входить::

  • Установка размера перекрытия нашего маленького "пузырька". Таким образом мы опишем насколько далеко пузырек выступает над краями навигационного меню.
  • Установка скорости перемещения "пузырька".
  • Установка времени сброса, который перемещает "пузырек" обратно на пункт текущей страницы (предположим, что пользователь не нажал ни на одну ссылку)
  • Установка цвета "пузырька". Это можно сделать с помощью CSS, но тем не менее, опция очень удобна в использовании.
  • Установка параметров эффекта перехода.

Теперь дадим имя нашему плагину и сделаем его эквивалентным функции. $.fn является псевдонимом для jquery.prototype.

view sourceprint?
1$.fn.spasticNav = function(options) {
2 
3};

Чтобы иметь возможность изменять установки по умолчанию функция принимает параметр "options”.

Шаг 3. Опции конфигурации

После того, как мы задали имя для нашего плагина нужно определить опции конфигурации:

view sourceprint?
1options = $.extend({
2    overlap : 20,
3    speed : 500,
4    reset : 1500,
5    color : '#0b2b61',
6    easing : 'easeOutExpo'
7}, options);

Таким образом определяется переменная конфигурации, устанавливаются значения по умолчанию, а затем производится расширение до параметра, который передается в функцию. Таким образом, передаваемые значения могут изменять установки по умолчанию. Например, при вызове плагина можно сделать так::

view sourceprint?
1$('#nav').spasticNav({
2   speed : 2000,
3   easing : 'easeOutElastic'
4});
Указанные опции изменят установки по умолчанию, а для всех остальных опций все останется без изменений.

Шаг 4. Реализуем функционал плагина

Теперь можно организовать цикл, который будет проходить по всем элементам, переданным плагину, и реализовывать функционал "лава лампы". Для этого мы вызываем this.each для прохода по всем пунктам в наборе.

view sourceprint?
1return this.each(function() {
2 
3});

В данной функции мы создаем несколько переменных. Не все из них получают значения сразу после создания, но так как JavaScript поднимает все имена переменных наверх функции в любом случае, то хорошей практикой будет объявление их наверху, а инициализация - по мере надобности.

view sourceprint?
1var nav = $(this),
2    currentPageItem = $('#selected', nav),
3    blob,
4    reset;
  • nav : "Кэширует” this, обернутый в объект jQuery.
  • currentPageItem : Содержит пункт списка с id="selected". Мы передаем второй параметр для установки контекста поиска. Таким образом не нужно проходить по всему DOM для того, чтобы найти данный элемент.
  • blob : За неимением лучшего определения скажем, что данная переменная ссылается на выделяющий блок, который следует за указателем мыши по меню.
  • reset : Данная переменная хранит ссылку на функцию setTimeout, которая будет создана позже. Она нужна для вызова clearTimeout. 

Теперь создадим реальный "пузырек":

view sourceprint?
1$('<li id="blob"></li>').css({
2    width : currentPageItem.outerWidth(),
3    height : currentPageItem.outerHeight() + options.overlap,
4    left : currentPageItem.position().left,
5    top : currentPageItem.position().top - options.overlap / 2,
6    backgroundColor : options.color
7}).appendTo(this);

Причина того, что мы вызываем метод CSS, вместо того, чтобы просто добавить класс, заключается в том, что данные значения варьируются в зависимости от элементов списка текущей страницы. Таким образом нам нужно использовать JavaScript для того, чтобы получить реальные значения.

  • width: получаем ширину currentPageItem, включая любые рамки и отступ.
  • height: получаем высоту currentPageItem, включая любые рамки и отступ. Также добавляется величина overlap, чтобы "пузырек" выступал за меню.
  • left:  устанавливаем свойство left "пузырька" равным положению слева currentPageItem. (Мы должны установить позиционирование контекста в CSS для данного значения, чтобы получить эффект.)
  • top: устанавливаем свойство top и центрируем "пузырек" по вертикали.
  • backgroundColor: устанавливаем цвет фона.

В завершении мы добавляем новый элемент списка к this, или #nav.

Теперь нужно сохранить ссылку на #blob. Таким образом нам не нужно будет просматривать DOM каждый раз, когда мы захотим получить доступ к нему. Переменная blob была объявлена наверху функции, теперь инициализируем ее.

view sourceprint?
1blob = $('#blob', nav);

Шаг 5. Событие hover

Теперь мы должны "слушать", когда пользователь передвинет указатель мыши на пункт списка (исключая #blob) нашего навигационного меню. Когда событие произойдет, мы устанавливаем свойства width и left "пузырька" равными свойствам элемента, на котором произошло событие.

view sourceprint?
01$('li:not(#blob)', nav).hover(function() {
02    // курсор мыши над объектом
03    clearTimeout(reset);
04    blob.animate(
05        {
06            left : $(this).position().left,
07            width : $(this).width()
08        },
09        {
10            duration : options.speed,
11            easing : options.easing,
12            queue : false
13        }
14    );
15}, function() {
16    // курсор мыши сдвинулся с объекта
17    reset = setTimeout(function() {
18        blob.animate({
19            width : currentPageItem.outerWidth(),
20            left : currentPageItem.position().left
21        }, options.speed)
22    }, options.reset);
23 
24});

Приведенный скрипт выполняет следующие операции:

  • Получаем все пункты списка (за исключением #blob) в навигационном меню, и когда курсор мыши проходит над объектом, выполняем функцию.
  • Анимируем "пузырек" и устанавливаем значения left и width равными соответствующим свойствам пункта списка, над которым находится курсор мыши.
  • Передаем литеральный объект в качестве второго параметра для функции animate, и устанавливаем длительность и параметры перехода равными конфигурационным опциям плагина. Устанавливаем свойство queue в значение false для предотвращения включения анимации в очередь.
  • Когда курсор мыши сдвигается с пункта списка меню, вызываем setTimeOut, которая сдвигает "пузырек" обратно к текущей позиции. Если не сделать этого, и пользователь не нажмет на ссылку навигации, меню будет показывать пункт, над которым находился курсор мыши в последний раз, а не текущую страницу.  Данное действие возвращает "пузырек" обратно к currentPageItem.

Вот и весь код. "Это очень простой плагин! Далее мы зададим стиль для навигационного меню.

Шаг 6. Задаем стили меню

Без использования стилей наше меню будет выглядеть следующим образом:

Меню без стилей

Изменим стиль для элемента <ul> #nav. Открываем файл style.css и добавляем в него следующие строки:

view sourceprint?
1#nav {
2    position: relative;
3    background: #292929;
4    float: left;
5}

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

Затем добавляем стиль для элементов списка:

view sourceprint?
1#nav li {
2    float: left;
3    list-style: none;
4    border-right: 1px solid #4a4a4a;
5    border-left: 1px solid black;
6}

Просто сдвигаем все элементы влево и добавляем каждому рамку:

Стили элементов списка

Затем задаем стиль для тегов ссылок в навигационном меню:

view sourceprint?
01#nav li a {
02    color: #e3e3e3;
03    position: relative;
04    z-index: 2;
05    float: left;
06    font-size: 30px;
07    font-family: helvetica, arial, sans-serif;
08    text-decoration: none;
09    padding: 30px 45px;
10}

Устанавливаем цвет, сдвигаем влево, устанавливаем значения для шрифта и отступы. Обратите внимание на свойство z-index. Такое значение необходимо и вскоре будет понятно почему.

Установили стили для ссылок

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

view sourceprint?
1ul, li {
2    margin: 0; padding: 0;
3}

И в завершение устанавливаем стиль для "пузырька":

view sourceprint?
01#blob {
02    border-right: 1px solid #0059ec;
03    border-left: 1px solid #0059ec;
04    position: absolute;
05    top: 0;
06    z-index : 1;
07    background: #0b2b61;
08    background: -moz-linear-gradient(top, #0b2b61, #1153c0);
09    background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
10    -moz-border-radius: 4px;
11    -webkit-border-radius: 4px;
12    -moz-box-shadow: 2px 3px 10px #011331;
13    -webkit-box-shadow: 2px 3px 10px #011331;
14}

Мы устанавливаем цвета для рамки и фона (включая свойства CSS3 для градиентов/рамки/тени для Firefox и Safari/Chrome). Здесь снова используется свойство z-index. Без него "пузырек" вывдился бы поверх всего текста в навигационном меню. чтобы избежать этого, нужно установить свойство z-index "пузырька" меньше, чем у пункта списка! Также нужно установить абсолютное позиционирование для использования значений top и left в плагине.

Готовое меню

Готово!



Категория: скрипты | Добавил: Ден (20.10.2010) | Автор: скрипты ucoz E W
Просмотров: 1842 | Рейтинг: 0.0/0
Всего комментариев: 0
Категории раздела
скрипты [19]
уроки [2]
Наш опрос
Оцените мой сайт
Всего ответов: 53
Мини-чат
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
    • Статистика
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0