jQuery — создание плагина. Динамическое меню

В этой статье я покажу как написать простой плагин на jQuery, который будет строить из обычной HTML-разметки симпатичное динамическое меню. Первое, с чего мы начнём, — определимся, что именно будет делать плагин и какова наша цель. Итак:

  1. Плагин назовём dynamenu (от английского Dynamic Menu). Короткое, неплохое название в духе jQuery. Динамика меню будет представлена изменением «прозрачности» пунктов меню и изменения позиции элемента меню при наведении мышью — пункт меню будет немного «уезжать» вправо.
  2. Структуру меню мы зададим статично в виде HTML-разметки. Это будет последовательный набор DIV-элементов. Внутри каждого div-а — гиперссылка с названием пункта меню. Для каждого div-a зададим атрибут class=»dynamenu» для того, чтобы затем можно было обратится к набору div-ов и превратить их в меню.
  3. Для анимации меню будем использовать стандартный метод jQuery — animate(). Его вполне хватит для реализации задачи «динамичности». С помощью этого метода мы изменим свойства opacity и leftв момент наведения мышью на элемент и убирания мыши с элемента меню.

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

1. dynamenu.html — файл с HTML-разметкой нашего меню. Здесь также будет встроенный в страницу скрипт для вызова нашего плагина
2. jquery.dynamenu.js — код плагина, помещенный в отдельный файл.
3. dynamenu.css — стиль нашего меню. Сюда помещаем весь CSS
Эти файлы с работающим меню можно будет найти в архиве, приложенном к статье. В конце статьи приведена живая демонстрация работы нашего меню. Обратите внимание, что в демонстрации вызов плагина размещен там же, где и сам код плагина. Это связано лишь с тем, что используемый нами механизм живых демо требует размещения JavaScript-кода в отдельном фрейме.
Начинаем писать плагин. Поехали!

1. Готовим HTML разметку страницы

Зададим самую простую разметку для нашего меню. Пусть это будут несколько пунктов меню для нашего будущего сайта:

 

Тут всё просто — 4 div-элемента, у каждого задан класс dynamenu для того, чтобы потом передать его в качестве селектора нашему будущему плагину. Внутри каждого div-а гиперссылка с названием пункта меню.

2. Задаём CSS-стили

Чтобы стилизовать наше меню, используем всего два CSS-стиля. С их помощью мы сделаем фон каждого пункта меню серым, ширину меню в 300 пикселей с внешними и внутренними отступами по 5 пикселей, а все ссылки меню — чёрного цвета:

 

3. Пишем «каркас» плагина

Первым делом, зададим каркас нашего плагина. Этот каркас частично взят с официального сайта jQuery и содержит так называемые «Best Practices» (лучшие практики и приемы — от разработчиков языка jQuery). В общем случае подобный каркас применим практически ко всем плагинам jQuery. Если Вы запомните и поймете, как функционирует этот каркас, то потом будете писать плагины на «раз-два». Выглядит он следующим образом:

Ничего сложного в каркасе, как видите, нет. Зато он несёт в себе полезную информацию. Первый важный момент, который нужно понять в каркасе — мы собираем все методы, добавляемые к нашему плагину (init, sliding) в один объект — methods. Это позволяет не забивать пространство имен $.fn лишними функциями. Правильное указание пространства имен нашего плагина — очень важная часть процесса разработки плагинов как такового. Использование пространства имен гарантирует, что наш плагин с минимальной долей вероятности будет переписан другими плагинами или кодом, расположенными на одной и той же HTML-странице. Пространство имен также делает жизнь проще, т.к. помогает лучше следить за методами, событиями и данными.

Следующий момент, на который стоит обратить внимание — конструктор нашего плагина. Это строка$.fn.dynamenu = function (method) {…}. Как видим, конструктор принимает один параметр — method. В качестве значения для параметра мы будем передавать строку, содержащую имя метода внутри объектаmethods, который мы собираемся вызвать. Давайте заполним конструктор следующим кодом:

 

Разберем, что мы сделали. Сначала мы проверяем, есть ли метод с именем, переданным в параметре конструктора, в объекте methods нашего плагина. Если метод есть, то мы вызываем сначала метод init — для инициализации нашего плагина, а затем вызываем тот метод, имя которого передали в параметре конструктора, причем передаем ему все оставшиеся аргументы. Если же метода с таким именем нет, то мы выдадим ошибку и плагин прекратит свою работу.

На данном этапе уже многое сделано! Уже теперь мы можем обращаться к нашему плагину и вызывать его методы, хоть и никакой полезной работы они пока не выполняют,. Я рекомендую поместить код нашего плагина в отдельный файл и назвать его jquery.dynamenu.js. Размещение кода плагина в отдельном файле является логичным — ведь плагин должен быть по своей сути универсальным и давать нам и другим разработчикам подключать его в готовом виде к своему сайту.

Теперь, когда наш каркас наполнен кодом, способным вызывать внутренние методы плагина, пора нарастить «мясо», то есть написать код, который будет непосредственно превращать наши div-блоки в красивое динамическое меню. Приступим…

4. Пишем код, создающий динамическое меню на jQuery

Весь полезный код нашего плагина будет размещён в функции slidingкоторая является внутренним методом плагина и находится в объекте methods. Давайте кратко опишем последовательность действий по превращению статичной разметки с нашими div-блоками в динамическое меню на jQuery:

  1. Сначала изменим всем div-блокам прозрачность, установив её в 0.4 пункта. Это позволит сделать каждый пункт меню сероватым. Потом, при наведении мышкой на него мы будем менять opacity до 1, таким образом создавая эффект выделения пункта меню
  2. Далее мы создадим обработчики «входа» мышью в область пункта меню и «выхода» из неё. При наведении на пункт меню будем менять стиль шрифта на полужирный и менять цвет фона на более тёмный. Также, при помощи стандартного метода jQuery animate мы сделаем эффект «выдвигания» меню немного вправо. При уходе мыши из области пункта меню просто будем возвращать все параметры в начальное состояние.

Вот, собственно, и вся логика. А теперь посмотрим, как это реализовать:

На всякий случай, поясню, что происходит. Итак, в самой первой строчке мы видим оператор return this.each(function() { … }).  Он делает следующее: пробегает по переданному в функцию sliding набору элементов (т.е. все наши div-блоки) и выполняет код, размещенный внутри. После такого пробега по элементам мы возвращаем (оператор return) результат выполнения операций для каждого элемента набора, опять же, в виде набора. Таким образом наша функция sliding возвращает набор div-блоков, переданных на «вход» функции, только обработанный и уже превращенный в динамическое меню. Этим реализуется важная концепция jQuery — возможность использования нашего плагина в цепочке вызовов. Чтобы лучше понять, что такое цепочка вызовов, приведу пример:

В приведенном выше куске кода мы видим, что такое цепочка вызовов: сначала мы выбираем все элементы на странице с классом myelm, затем используем наш плагин dynamenu и затем снова по цепочке применяем уже стандартный метод jQuery css() для изменения стиля элементов. Если бы мы не возвращали из метода конструкцию return this.each(function() { … }), то использовать метод css() в «цепочке» уже бы не смогли.

Едем дальше, внутри оператора each(), где мы пробегаем по всем нашим div-блокам идет как раз начальная установка свойства «прозрачность» (opacity) элемента в 0.4. пункта. Максимальное значение opacity — это 1 (100%), поэтому мы делаем «прозрачность» в 40%. После этого мы ставим два обработчика на «наведение» (hover) мыши и «уход» мыши из области div-блока. В первом обработчике мы устанавливаем название пункта меню полужирным шрифтом и используем метод animate(), чтобы добиться «полной непрозрачности» пункта меню, а также делаем сдвиг вправо на 5 пикселей. В обработчике «ухода» мыши мы просто возвращаем элемент в начальное состояние — меняем снова шрифт на обычный (normal) и делаем сдвиг влево снова на 5 пикселей.

На этом всё! Наш плагин готов к использованию. Хоть, он и простой, но может хорошо пригодиться для создания динамического меню на сайте. Ниже по тексту — демонстрация работы нашего плагина. Для того, чтобы увидеть результат работы плагина, перейдите на вкладку Result.

Успехов в написании хороших плагинов! Комментарии, вопросы  и отзывы всегда приветствуются 😉

.

Nothing serious, but I should start thinking about ways to bring order-essay-online.net in some dough.
Вы можете оставить ответ, или trackback с вашего сайта.

Leave a Reply

Надо сделать сайт? Мы выгодно сделаем сайт! ©