Если вы занимаетесь разработкой сайтов, то рано или поздно вы заинтересуетесь тем, как написать свой 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);