Статьи

Как создать простой плагин jQuery — jQuery Iconify

Январь 20, 2019

Я играл с
jQuery в последние несколько дней, и я очень впечатлен мощью этой библиотеки.

Я до сих пор помню несколько лет назад, когда вам приходилось делать все на стороне сервера только потому, что это было проще!

Те дни прошли.

Поскольку лучший способ обучения — это испачкать руки, я покажу вам, как создать простой плагин, который я назвал ‘iconify’.

Это очень просто, и вы можете применить ту же идею для создания некоторых пользовательских плагинов.

По сути, все, что делает плагин — это берет элемент на странице и превращает его в элемент div. Затем поместите значок рядом с ним влево или вправо в зависимости от некоторых параметров.

Через опции вы также можете привязать некоторые события к значку (например, щелчок или двойной щелчок).

Посмотрим, как это делается.

Базовый плагин jQuery

Плагины jQuery имеют следующую структуру.
 

(function($){
//
// Plugin definition goes here
//
})(jQuery);

По сути, вы создаете функцию, запускающую ее и передающую эту функцию объекту jQuery.

Вам нужно использовать это определение, чтобы убедиться, что функция $ — это jQuery.

Передавая jQuery функции, которая определяет параметр как $, $ гарантированно ссылается на jQuery в теле функции.

Позвольте пользователю переопределить значения по умолчанию с $ .extend

Теперь я собираюсь использовать служебную функцию $ .extend () для объединения пользовательских параметров с параметрами по умолчанию.

Также мы защищаем от объекта опций, который является нулевым или неопределенным, с помощью || {}, который предоставляет пустой объект, если для опций значение равно false (нулевое и неопределенное значение).

	
var settings = $.extend({
   image: imagesPath + "/info_icon.png",
   activation: "hover"
   },options||{});

Теперь работаем над подобранными узлами

Поскольку мы создаем плагин jQuery, вы будете использовать стандартные селекторы jQuery для определения узлов, с которыми вы хотите работать. Таким образом, мы будем называть этот плагин
 

$('.myCssClass').iconify('myImage.png');

Этот код будет применять наш значок ко всем элементам, которые имеют .myCssClass.

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

return this.each(function(){
 
// here goes the code that will be manipulation all matched nodes.
 
});

Полный код плагина будет выглядеть так

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

/**
 * Add an icon to an element on the page
 * @param hash options:
 *  image  : String  -> The path to the icon image to use. Either this or cssClass must be defined
 *  cssClass : String  -> The cssClass to use. It assumes the image used as background for the class
 *  iconCss  : Hash  -> Additional css styling for the icon
 *  position : String -> Where you want to see the icon. Options are right, left. Default right
 *  bind  : Hash  -> event: the event to bind to, callback: the callback function for the event
 *
 */
(function($) {
 $.fn.iconify= function(options) {
  var settings = $.extend({
   image    : "n/a",
   cssClass   : "n/a",
   iconCss    : {},
   copyStyle   : true,
   position   : "right", /*right, left*/
   bind    : {event:'click', callback: function() {}}
   },options||{}
  );
   
  var copyStyle = function (element, icon, wrapper){
   elementWidth = element.outerWidth(true);
   elementHeight = element.outerHeight(true);
    
   iconWidth = icon.outerWidth(true);
   iconHeight = icon.outerHeight(true);
    
 
   wrapper.attr('style', element.attr('style'));
   element.css("margin","0");
   element.attr('style','display:inline')
    
   //should pick the max height
   wrapper.width(elementWidth + iconWidth);
   wrapper.height(elementHeight);
 
    
   allClasses = getClassNames(element);
   $.each(allClasses, function(n, value){
    wrapper.toggleClass(value);
    element.removeClass(value);
   });
  }
   
   
  var getClassNames = function(element) {
   if (name = element.attr("class")) {
    return name.split(" ");
   }else {
    return [];
   }
  }
 
  return this.each(function(){
   var self = $(this);
   var wrapper = self.wrap($('<div></div>')).parent();
   var icon = null;
    
    
 
   // css class or image?
   if (settings.cssClass){
    icon = $("<span> </span>").attr("class",settings.cssClass);
   } else if (settings.image){
    icon = $("<img>").attr("src",settings.image);
   }
  
    
   // position left or right?
   if (settings.position && settings.position.length > 0){
    var strPosLength = settings.position.length;
    if (settings.position.substring(strPosLength - 5, strPosLength) == 'right'){
     icon.insertAfter(this);
    }else {
     icon.insertBefore(this);
    }
   }
    
   //copies the element style to the wrapper
   copyStyle(self, icon, wrapper);
    
   // binds event to callback
   icon.bind(settings.bind.event, settings.bind.callback);
   icon.css(settings.iconCss);
  });
 
   
 };
})(jQuery);

Спасибо за чтение!

От http://www.devinprogress.info/2011/05/how-to-create-simple-jquery-plugin.html

35
Share: