Простой jQuery плагин
Вступление
Для новичков создание jQuery плагинов несет в себе определенные сложности. В последнее время я вплотную занялся jQuery и, хотя я научился отделять javascript код от html документа, чувства полного удовлетворения у меня еще нет, так как вид моего javascript файла далек от идеального. В связи с этим я решил сделать следующий шаг – написать такой jQuery плагин, который бы привел мой javascript файл в порядок.
Плагин сделан на основе моего предыдущего руководства. Напомню, что в прошлый раз я написал код и вставил весь код в секцию документа ready , как показано здесь:
JQuery
$(document).ready(function() {
$('ul#menu li:even').addClass('even');
$('ul#menu li a').mouseover(function() {
$(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 });
}).mouseout(function() {
$(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 });
}).click(function() {
$(this).animate( { fontSize:"20px" }, { queue:false, duration:500 });
});
});
Теперь же мне хочется, чтобы отображалось как-то так:
JQuery
$(document).ready(function() {
$(#menu).animateMenu({
padding:20
})
});Выглядит этот вариант намного лучше, а скрипт можно будет повторно использовать для нового проекта.
Структура плагина
Сайт jQuery приводит подробное описание создания структуры плагина, однако оно показалось мне чрезвычайно сложным для понимания.
Чтобы упростить себе жизнь, я решил воспользоваться интернетом и нашел следующий отрывок, который послужит неплохой структурой написания плагина.
JQuery
//Во избежание конфликтов нашу ф-ю необходимо обернуть в анономную ф-ю
(function($){
//Присоединяем новый метод к jQuery
$.fn.extend({
//В этом месте мы определяем имя плагина
pluginname: function() {
//Возвращаем обернутый набор,
//полученный как результат метода each()
return this.each(function() {
//тело ф-и
});
}
});
})(jQuery);Плагин со значениями по умолчанию
Взглянув на наш первый шаг (вступление), можно увидеть, что значение padding (подложка) плагина пользователь может менять. Всегда полезно иметь настройки, которые пользователь может менять по своему усмотрению. Осталось всего лишь задать значения по умолчанию для каждой переменной. Теперь вам понадобиться следующий код:
JQuery
(function($){
$.fn.extend({
//передаем ф-и параметр-хеш с именем options
pluginname: function(options) {
//Значения по умолчанию:
var defaults = {
padding: 20,
mouseOverColor : '#000000',
mouseOutColor : '#ffffff'
}
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
//код
//получить доступ к значению можно так:
alert(o.padding);
});
}
});
})(jQuery);Плагин animateMenu
Теперь, когда мы узнали о структуре плагина, перейдем к самому плагину. Плагин я создал с помощью своего предыдущего руководства. Плагин animateMenu имеет четыре параметра, которые и определяют работу плагина:
- - animatePadding:
- устанавливает значение свойства padding для анимационного эффекта
- - defaultPadding:
- устанавливает значение по умолчанию для padding
- - evenColor:
- устанавливает цвет таким-то, если значение index – четное число
- - oddColor:
- устанавливает цвет таким-то, если значение index – нечетное число
JQuery
(function($){
$.fn.extend({
//имя плагина - animatemenu
animateMenu: function(options) {
//параметры плагина по умолчанию
var defaults = {
animatePadding: 60,
defaultPadding: 10,
evenColor: '#ccc',
oddColor: '#eee'
};
var options = $.extend(defaults, options);
return this.each(function() {
var o =options;
//Присваиваем текущий элемент переменной,
//в нашем случае это элемент ul(неупоряд. список)
var obj = $(this);
//Получаем все LI тега UL
var items = $("li", obj);
//Меняем цвет согласно четности
$("li:even", obj).css('background-color', o.evenColor);
$("li:odd", obj).css('background-color', o.oddColor);
//Прикрепляем событие mouseover и mouseout eэлементам LI
items.mouseover(function() {
$(this).animate({paddingLeft: o.animatePadding}, 300);
}).mouseout(function() {
$(this).animate({paddingLeft: o.defaultPadding}, 300);
});
});
}
});
})(jQuery); Код плагина
Плагин можно сохранить отдельным файлом (например: jquery.animatemenu.js). В этом руководстве я поместил скрипт в html документ.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function($){
$.fn.extend({
//имя плагина - animatemenu
animateMenu: function(options) {
var defaults = {
animatePadding: 60,
defaultPadding: 10,
evenColor: '#ccc',
oddColor: '#eee',
};
var options = $.extend(defaults, options);
return this.each(function() {
var o =options;
var obj = $(this);
var items = $("li", obj);
$("li:even", obj).css('background-color', o.evenColor);
$("li:odd", obj).css('background-color', o.oddColor);
items.mouseover(function() {
$(this).animate({paddingLeft: o.animatePadding}, 300);
}).mouseout(function() {
$(this).animate({paddingLeft: o.defaultPadding}, 300);
});
});
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#menu').animateMenu({animatePadding: 30, defaultPadding:10});
});
</script>
<style>
body {font-family:arial;font-style:bold}
a {color:#666; text-decoration:none}
#menu {list-style:none;width:160px;padding-left:10px;}
#menu li {margin:0;padding:5px;cursor:hand;cursor:pointer}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Posts</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
Надеюсь, это руководство поможет вам. Плагин jQuery создать не так-то и сложно. Создание плагина я начинал с неохотой, теперь же мне понятно – насколько все просто. Скоро я напишу новое руководство – как создать простой плагин гармошку на jQuery. Так что следите за новостями.
Источник
Комментарии к статье