Ако намирате използването на jQuery за удобно, лесно и практично, тогава със сигурност сте готови да направите свой собствен плъгин. Както става ясно от предните статии за jQuery (jQuery за начинаещи, jQuery - полезни съвети част 1 и част 2) това е много удобна JavaScript библиотека. Тя предлага механизъм за добавяне на методите и функциите, пакетирани като плъгин. Сигурно се питате защо да превръщам част от простия код в плъгин. Най-добрата причина е възможността да се поддържа един код лесно и да се използва в различни проекти.
След няколко часа размисли реших примерът с който ще си отговорим на въпроса "Как да си направим jQuery плъгин?" да бъде простичък Tooltip.
| View DemoDownload |
Първа стъпка
Добра идея е да се придържаме към конвенциите за писане на плъгин или казано по друг начин plugin authoring. След като сме се запознали с тях, може да започнем изграждането на нашия jQuery плъгин.
Дефинирането на собствени функции в jQuery е много лесно, това става със следния ред код:
$(element).yourfunctionname();
И така нека изберем подходящо име на нашия първи плъгин, например клишираното "myFirstPlugin". Дефинирането на нашата собствена функция изглежда така:
$('a.link').myFirstPlugin();
Както се вижда извикваме функцията "myFirstPlugin" за всички елементи "а" с клас "link". Ето я и основната структура, която трябва да запишем във файл с име "jquery.myFirstPlugin.js".
(function($) {
// Дефиниране на плъгина.
$.fn.myFirstPlugin = function(settings) {
// Обхождане на всяко съвпадение с елемента, който сме посочили при извикването на плъгина (в нашия пример $('a.link')).
this.each(function() {
// Нашият код за плъгина се поставя тук.
});
return this;
};
})(jQuery);
Втора съпка
Преди да продължим нататък, нека да създадем страница, която можем да използваме за тестване на нашия плъгин. Тя ще носи името index.htm. В нея поставяме следния код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta charset="UTF-8"/>
<title>Как да си направим jQuery plugin - Tooltip</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.4.min.js"></script>
<script src="js/jquery.myFirstPlugin.js"></script>
</head>
<body>
<div class="text">
Това е място за хора, които считат писането на код същевременно за <a href="#" class="link" title="Използването на умения и въображение в създаването на естетични обекти и среди, които могат да бъдат споделени с други">изкуство</a> и част от ежедневието. Това е място, където можем да се съберем и да обсъждаме всичко без задръжки, тъй като всички тук сме равни. Това е място, където информацията и придобитите знания са безценни. Всичко от нас се прави за <a href="#" class="link" title="Удоволствието е емоция, свързана с приятно усещане или задоволяване на определено влечение.">удоволствие</a>! Ако искате да се свържете с екипа за предложение, запитване или критика, може да използвате контактите.
</div>
<script>
$(document).ready(function() {
$('a.link').myFirstPlugin({
xOffset : 40,
yOffset : -40
});
});
</script>
</body>
</html>
Виждате че няма нищо сложно в самата страница. Зареждаме нужните ни CSS файлове, след тях jQuery библиотеката и накрая нашия плъгин. Използвам HTML5 и за това в <script/> не изписваме атрибута "type", тъй като по подразбиране той е "type="text/javascript".
Най-отдолу във файла index.htm викваме нашия плъгин:
<script>
$(document).ready(function() {
$('a.link').myFirstPlugin({
xOffset : 40,
yOffset : -40
});
});
</script>
Обърнете внимание на параметрите и начина по който се задават при извикването на плъгина. В нашия случай това са xOffset със стойност "40" и yOffset със стойност "-40". Стойностите на тези параметри представляват отстоянието в пиксели на Tooltip-а от курсора. Интересното е, че това са стойностите, които потребителят може сам да дефинира и променя, но ако те не са зададени ще се използват стандартните описани в нашия плъгин ( xOffset със стойност "20" и yOffset със стойност "-20" ).
Трета стъпка
Следващото нещо, което трябва да направим, е да осигурим параметри по подразбиране, с които потребителят може да персонализира плъгина, така че той да е достатъчно гъвкав.
В нашия случай това са xOffset и yOffset, които представляват отстоянието на нашия tooltip от курсора. Но преди това нека обновим нашия плъгин по следния начин:
(function($) {
// Дефиниране на плъгина
$.fn.myFirstPlugin = function(settings) {
// Параметри по подразбиране.
var config = {};
// Разширяваме параметрите по подразбиране с тези, които сме задали при извикване на плъгина.
if (settings) $.extend(config, settings);
// Обхождане на всяко съвпадение с елемента, който сме посочили при извикването на плъгина (в нашия пример $('a.link'))
this.each(function() {
// Нашият код за плъгина се поставя тук.
});
return this;
};
})(jQuery);
Четвърта стъпка
Нека напишем нашия Tooltip код като плъгин. Няма да навлизам в допълнителни обяснения за самия пример, тъй като коментарите са достатъчно ясни. И ако все пак имате въпроси ще се радвам да помогна с каквото мога :).
(function($) {
// Дефиниране на плъгина.
$.fn.myFirstPlugin = function(settings) {
// Параметри по подразбиране.
var config = {
'xOffset': 20,
'yOffset': -20
};
// Разширяваме параметрите по подразбиране с тези, които сме задали при извикване на плъгина.
if (settings) $.extend(config, settings);
// Обхождане на всяко съвпадение с елемента, който сме посочили при извикването на плъгина (в нашия пример $('a.link')).
this.each(function() {
// Присвояваме тайтъла на променливата "text".
var text = $(this).attr('title');
$(this).bind('mousemove', function(e) {
var tipX = e.pageX - config.xOffset; // Позицията на Tooltip елемента по X.
var tipY = e.pageY - config.yOffset; // Позицията на Tooltip елемента по Y.
$(this).attr('title', ''); // Премахваме стойноста на title атрибута, за да не се получи дублиране на Tooltip елемента и title.
$('body').append('<div class="myTooltip">' + text + '</div>'); // Добавяме Tooltip елемента към документа.
// Позиционираме Tooltip елемента към позицията на курсора с отстоянията зададени от потребителя или по подразбиране.
$('.myTooltip').css({ top : tipY + 'px', left: tipX + 'px'}).fadeIn();
}).mouseout( function() {
$(this).attr('title', text); // Връщаме стойноста на title атрибута.
$('.myTooltip').remove(); // Премахваме Tooltip елемента.
}).mousemove( function(e) {
// При смяна позицията на курсора променяме позицията на Tooltip елемента.
$('.myTooltip').css({ top: (e.pageY - config.yOffset) + 'px', left: (e.pageX + config.xOffset) + 'px' });
});
});
return this;
};
})(jQuery);
Надявам се информацията по-горе да ви е показала основните стъпки за това как да създадете jQuery плъгин. Ако имате въпроси питайте, но преди това прочетете и документацията на jQuery за създаване на плъгин. Enjoy!
Loading ...