Свой плагин для jQuery

Библиотека jQuery стала очень популярна. Она содержит большой список функций. И этот список можно расширять, подключая свои функции, которые называются плагинами. Для этого в jQuery есть специальный объект jQuery.fn.

Давайте для примера напишем простой плагин, который будет центрировать HTML элемент на странице. Назовём его center.

jQuery.fn.center = function(){
  // здесь разместим код функции
}; 

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

(function( $ ) {
  $.fn.center = function() {
    // здесь разместим код функции
  };
})(jQuery);

Теперь знак доллара можно использовать безопасно — он закрыт внутри своей области видимости. Теперь напишем нашу функцию.

(function( $ ) {
    $.fn.center = function() {
        // Делаем определенные вычисления ширины и высоты экрана и объекта jQuery, который мы центрируем
        var winW = $(window).width() / 2 - this.outerWidth() / 2,
            winH = $(window).height() / 2 - this.outerHeight() / 2;
        // Выставляем css свойства left и top для объекта jQuery 
        // Значение position у этого объекта должно быть absolute или relative
        this.css({"left":winW,"top":winH});
        return this;
    };
})(jQuery);

Дальше нужно вставить этот код в javascript файл и нам становится доступна функция center.

// Показываем и центрируем сообщение в окне
$("#myWindow").show().center();

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