Login / Sign Up


Enter site:
Login: 
Password: 


First time here?
 
Register [?]:
Registering allows you:
  • Purchase products from the product catalog and access them any time.
  • Ask questions to another specialists in IT
  • Publish your own Joomla extensions, soft or other products if you are developer or distributor
  • Add interesting weblinks and access them from any place
  • Watch the updates of the site and have special abilities that guests don't have
  • Watch the news of the service and new articles and get knowledge
Choose login:
Your Email:
Enter the result of operation (in digits):
27 - 5 = ? Update

Создание плагинов
jQuery - создание плагина. Динамическое меню PDF Print E-mail
Written by Максим   
Wednesday, 25 April 2012 13:03
Liked:
26


Did not like: 12

В этой статье я покажу как написать простой плагин на 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 разметку страницы

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


	 

	<div class="dynamenu">    

	    <a class="mlink" href="#">Новости сайта</a>

	</div>

	 

	<div class="dynamenu">    

	    <a class="mlink" href="#">Уроки Photoshop</a>    

	</div>

	 

	<div class="dynamenu">    

	    <a class="mlink" href="#">Кисти для Photoshop</a>    

	</div>

	 

	<div class="dynamenu">    

	    <a class="mlink" href="#">Красивые шрифты</a>    

	</div>

	 

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

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

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


	 

	a.mlink { 

	    color:#000; 

	    text-decoration:none;

	}

	.dynamenu { 

	    background-color: #aaaaaa; 

	    width:300px; 

	    margin:5px; 

	    padding:5px; 

	    font-family: "Tahoma";

	    font-size: 9pt;        

	}

	

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

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


	(function($) {

	 

	  // список методов нашего плагина

	 

	  var methods = {

	    init : function( options ) { 

	// сюда можно помещать инициализацию плагина. в нашем случае

	// для простоты здесь ничего не будет

	    },

	    sliding : function () {

	// метод sliding нашего плагина будет непосредственно строить меню 

	    }

	  };

	  

	// "регистрируем" наш плагин в пространстве имен jQuery.

	  $.fn.dynamenu = function( method ) {

	// здесь вызываем нужный метод внутри плагина

	  }

	 

	})( jQuery );

	

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

Всегда используйте сокрытие методов внутри плагина, например в объекте methods. Помимо того, что это хороший стиль программирования, данный приём поможет вам избежать конфликтов с другими сторонними библиотеками и плагинами, а также позволит не засорять пространство имен jQuery

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


	 

	$.fn.dynamenu = function( method ) { 

	 

	if ( methods[method] ) {

	      methods.init.apply( this, arguments );

	      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));

	 } else {

	      $.error( 'Метод' +  method + ' не существует!' );

	 }   

	}

	

Разберем, что мы сделали. Сначала мы проверяем, есть ли метод с именем, переданным в параметре конструктора, в объекте 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() {

	$(this).css({"opacity":"0.4"});

	            

	$(this).hover(function() {

	   $("a.mlink", this).css({"font-weight":"bold"});

	   

	   $(this).animate({

	      opacity:1,

	      "margin-left":"+=5"

	   }, 100, "linear" );

	}, function() {

	   $("a.mlink", this).css({"font-weight":"normal"});                

	 

	   $(this).animate({

	      opacity:0.4,

	      "margin-left":"-=5"                        

	   }, 100, "linear");

	});

	 

	});

	

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


	$(".myelm").dynamenu("sliding").css({"border" : "1px solid red"});

	

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

Используйте возврат оператора this.each() для того, чтобы поддерживать принцип "цепочки" в ваших плагинах и делать их более универсальными.

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

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

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

Демо:

 

Last Updated on Monday, 26 August 2013 08:57
 


Found Error?

Система Orphus

Site Statistics

Яндекс.Метрика

Our Pages


Allineed.Ru © 2009-2012 - Allineed.Ru - ответы на IT вопросы, статьи о разработке, IT и программном обеспечении. При использовании материалов сайта ссылка обязательна. Использование данного сайта и любой его части означает принятие условий Пользовательского Соглашения.
Allineed.Ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.