Якщо ви займаєтесь розробкою сайтів, то напевне вас зацікавить знання про те, як написати свій jQuery плагін. Зробити це досить просто. Прочитавши цю статтю ви зможете створювати свої плагіни.
Для того, щоб написати плагін потрібно оголосити jQuery.fn об'єкт, наприклад jQuery.fn.bestplugin, де bestplugin назва вашого плагіну. Це буде вигляди приблизно, так:
jQuery.fn. bestplugin = function() {
// your code will be here
};Але, як видно тут замість звичного $("значка долара") стоїть jQuery, для того щоб використовувати $, потрібно убезпечити наш плагін від конфліктів з іншими JavaScript бібліотеками, оголосивши $ так:
(function( $ ){
$.fn.bestplugin = function() {
// your code will be here
};
})( jQuery );Тепер можна приступати до самого цікавого - написання скрипта. Наведу приклад плагіна для простенького слайдшоу зображень:
(function($) {
$.fn.bestplugin = function(options) {
var options = $.extend({ // Declaring settings by default that can be reset in plugin call
timeOut: 2000,
animateTime: 1000,
opacity: 0.5
},
options);
return $(this).each(function() { //return is used to continue a chain of calls of the given object
var container = $(this),
slides = $(this).children(),
id,
slidesLength = slides.length;
container.css('position', 'relative');
slides.each(function() {
$(this).hide().css({
'opacity': options.opacity,
'position': 'absolute',
'left': 0,
'top': 0
});
});
var Show = function() {
id = id || 0;
var currentSlide = slides.eq(id);
console.log(currentSlide);
currentSlide.show().animate({
opacity: '1'
},
options.animateTime,
function() {
setTimeout(function() {
currentSlide.animate({
opacity: options.opacity
},
options.animateTime,
function() {
currentSlide.hide();
id++;
if (id == slidesLength) {
id = 0
};
Show();
});
},
options.timeOut);
});
}
Show();
});
};
})(jQuery);