Плагины jQuery

Первая функция, которую должен выполнить наш плагин, — выделить каждый выбранный элемент, поэтому мы просто установим фон в ярко-желтый цвет. Далее нам нужно обработать, когда пользователь наведет курсор на элемент, чтобы мы могли убрать выделение. Мы хотим, чтобы это происходило только один раз, как только элемент будет возвращен к исходному цвету (не забывайте, что для этого нам нужен компонент эффектов пользовательского интерфейса jQuery):

 // Do something to each item
$(this)
  .data('original-color', $(this).css('background-color'))
  .css('background-color', '#fff47f')
  .one('mouseenter', function() {
    $(this).animate({
      'background-color': $(this).data('original-color')
    }, 'fast');
  });

Просто случается, что действие jQuery точно соответствует нашим потребностям: одно действие. Функционально onebind Различие между ними состоит в том, что событие будет запускаться только один раз , после чего событие автоматически отменяет привязку.

Для нашего кода мы сохраняем текущий цвет фона в хранилище datamouseover Когда пользователь наводит курсор на элемент, запускается наш код и цвет фона возвращается к исходному. И с этим наш плагин готов к использованию:

 $('p')
  .hide()
  .highlightOnce()
  .slideDown();

Это довольно захватывающе: наша функциональность заключена в подключаемый модуль многоразового использования, который мы разместили между действиями hideslideDown Видя, что 11 строк кода — это все, что требовалось (и шесть из них — стандартные плагины для плагинов!), Вы можете увидеть, что стоит превратить любую функциональность, которую вы собираетесь повторно использовать, в плагин!

Добавление параметров

Плагины jQuery являются отличным способом создания повторно используемого кода, но чтобы быть действительно полезными, наши плагины должны быть применимы вне контекста, для которого мы их создали: они должны быть настраиваемыми . Мы можем добавить определенные пользователем параметры в наши плагины, которые затем можно использовать для изменения поведения плагина, когда он используется.

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

Существует два типа параметров плагина: простые значения и литералы объектов. Давайте начнем с более простого, чтобы увидеть, как это работает. Для нашего плагина highlightOnce кажется жестко ограниченным иметь цвет. Мы хотели бы дать разработчикам возможность выделить их элементы в любом цвете, который им нравится. Давайте сделаем это вариант:

 $.fn.highlightOnce = function(color) {
  ⋮
  $(this).css('background-color', color  || '#fff47f')
  ⋮
};

Плагин может быть вызван цветом, но также может быть вызван без параметров — в этом случае будет использоваться значение по умолчанию (благодаря оператору JavaScript ||). Давайте выделим наши параграфы зеленым цветом:

 $('p')
  .hide()
  .highlightOnce('green')
  .slideDown();

Если у вас есть один или два простых варианта, которые всегда требуются, этот подход подойдет. Но когда ваши плагины станут более сложными, вы получите множество настроек, и ваши пользователи захотят переопределить некоторые из них и оставить значения по умолчанию для других. Здесь мы обратимся к более сложной буквенной записи объекта.

Это не страшно — вы уже знаете, как определить этот тип объекта настроек. Мы использовали их для animatecss Преимущество объекта «ключ / значение» заключается в необходимости определения только одного параметра, в котором пользователи смогут указывать несколько параметров. Наш первый шаг — установить значения по умолчанию для каждой опции:

 $.fn.highlightOnce.defaults = {
  color : '#fff47f',
  duration : 'fast'
}; 

Теперь у нас есть значения по умолчанию в качестве объекта, поэтому нам нужно использовать функцию jQuery $.extend Эта удобная функция имеет несколько применений, но для наших целей мы будем использовать ее для расширения объекта путем добавления всех свойств из другого объекта. Таким образом, мы можем расширить параметры, которые пользователь передает, с нашими настройками по умолчанию: плагин будет иметь значения, указанные для каждой опции уже, и если пользователь указывает одну из них, значение по умолчанию будет переопределено. Отлично! Давайте посмотрим на код:

 $.fn.highlightOnce = function(options) {
  options = $.extend($.fn.highlightOnce.defaults, options);

  return this.each( … );
};

Наша переменная options Теперь мы можем использовать настройки в нашем коде:

 $(this)
  .data('original-color', $(this).css('background-color'))
  .css('background-color', options.color)
  .one('mouseenter', function() {
    $(this).animate({
      'background-color': $(this).data('original-color')
    }, options.duration);
  });

Как пользователь плагина, мы можем указать цвет или продолжительность выделения или принять значения по умолчанию. В следующем примере мы примем цвет по умолчанию, но переопределим длительность на 2000 миллисекунд вместо «быстрой»:

 $('p')
  .hide()
  .highlightOnce({duration: 2000})
  .slideDown();

 $(this)
  .data('original-color', $(this).css('background-color'))
  .css('background-color', options.color)
  .one('mouseenter', function() {
    $(this).animate(
      {'background-color': $(this).data('original-color')},
      options.duration,
      options.complete
    );
  });

  // Fire the setUp callback
  $.isFunction(options.setup) && options.setup.call(this);

 complete 

 $('p')
  .hide()
  .highlightOnce({
    color: '#FFA86F',
    complete: function() {
      $(this).slideUp();
    }
  })
  .slideDown();

 load: function( url, params, callback ){
  // If the second parameter is a function
  if ( jQuery.isFunction( params ) ){
    // We assume that it's the callback
    callback = params;
    params = null;

 $.fn.highlightOnce = function(options, callback) {
  if ($.isFunction(options)) {
    callback = options;
    options = null;
  }
  options = $.extend($.fn.highlightOnce.defaults,options);

  return this.each(function() {
    // Do something to each item
    $(this)
      .data('original-color', $(this).css('background-color'))
      .css('background-color', options.color)
      .one('mouseenter', function() {
        $(this).css('background-color', '');
        $.isFunction(callback) && callback();
      });
  });
};