Блог

16.03.2011

Zemelia

Пишем jQuery плагин

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

Рассмотрим, как это работает, в деталях.

 var options = $.extend({      //Объявление настроек по умолчанию, которые можно переопределить в вызове плагина
      timeOut: 2000,
      animateTime: 1000,
      opacity: 0.5
    },
options);

Этот участок кода отвечает за определение параметров плагина, заданные здесь настройки будут задействованы по умолчанию, если только они не переопределены в функции вызова плагина.

var container = $(this),
      slides = $(this).children(),
      id,
      slidesLength = slides.length;

Тут определены переменные для определения контейнера с изображениями (container), тот селектор к которому будет применяться скрипт плагина, самими изображениями (slides), а также количества слайдов (slidesLength) и глобальная переменная id.

var Show = function() {
        id = id || 0;
        var currentSlide = slides.eq(id);
        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);
        });
      }

Тут описана сама функция показа слайдшоу, с применением функции анимации, когда изображение будет пропадать и появляться. После каждого показа картинки id увеличивается на 1, с тем чтобы осуществлялся переход на показ следующего слайда. Также идет проверка: if (id == slidesLength) { id = 0 }; Если мы добрались до последнего слайда, то чтобы не обрывать показ, а цикл возобновлялся начиная с первого слайда, переменной id присваивается значение 0.

Как видно из примера, функция Show вызывает саму себя, и происходит это для того чтобы слайдшоу работало. Далее, в конце самого плагина, вызываем Show() для запуска работы функции. На этом код плагина закончен.

Вам понадобится примерно такая HTML структура для роботы плагина:

 

    
     
    Slideshow

Где в HEAD нужно будет подключить библиотеку jQuery, сам плагин и ваш CSS.

И чтобы включить плагин в вашем файле скрипта нужно будет прописать следующее:

$(document).ready(function(){
$('#img-container').bestplugin({ // Reset plugin settings here if necessary
    opacity: 0.5,
    timeOut: 3000,
    animateTime: 500});  
});

На этом собственно и все, желаю удачи в дальнейшем изучении прекрасного фреймворка JQuery.

Блог

Пишем jQuery плагин

Также по теме