Статьи

Базовое создание jQuery-плагина

Март 1, 2019

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

Итак, учитывая все сказанное, вы когда-нибудь задумывались о создании собственного плагина jQuery?

Это не так сложно, мы не будем обсуждать продвинутый или сложный плагин jQuery, но у нас будет простой «центральный» плагин.

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

Демо:
http://net.tutsplus.com/tutorials/javascript-ajax/coding-your-first-jquery-ui-plugin/

1. Добавить файл Javascript

Добавление пустого файла JavaScript необходимо при создании плагина. Соглашения об именах гласили, что плагины jQuery должны называться yourpluginname.jQuery.js. Убедитесь, что вы создали ссылку на него в своем документе. 

  2. Вставьте коды 
  Вставьте в него следующие коды. 
 (function($){ $.fn.center = function(){ var element = this; $(element).load(function(){ changeCss(); $(window).bind("resize", function(){ changeCss(); }); function changeCss(){ var imageHeight = $(element).height(); var imageWidth = $(element).width(); var windowWidth = $(window).width(); var windowHeight = $(window).height(); $(element).css({ "position" : "absolute", "left" : windowWidth / 2 - imageWidth / 2, "top" : windowHeight /2 - imageHeight / 2 }); }; }); }; # })(jQuery); 


  Вставьте это тоже. 


  $ .fn.center = function () {}; 


  «Центр» — это просто имя образца;  Вы должны заменить это имя, которое вы собираетесь использовать.  Это должно сообщить jQuery, что вы расширяете его методы.  Прямо сейчас этот кусок кода абсолютно ничего не делает;  мы можем вызвать наш метод с помощью: 


 $(function(){ $("#someElement").center(); }); 


  3. Знать, как центрировать изображение 


  Во-первых, вы уже должны знать, как вручную центрировать изображение на странице.  Ваш элемент должен быть позиционирован как абсолютный.  Или будет очевидно, что он не сдвинется с места, когда мы изменим «левые» или «правые» значения.  Итак, дальше, изображение должно быть смещено на 50% ширины окна браузера влево.  Наконец, чтобы отрегулировать ширину изображения, нам нужно вычесть половину ширины изображения. 


 function changeCss(){ var imageHeight = $(element).height(); var imageWidth = $(element).width(); var windowWidth = $(window).width(); var windowHeight = $(window).height(); $(element).css({ "position" : "absolute", "left" : windowWidth / 2 - imageWidth / 2, "top" : windowHeight /2 - imageHeight / 2 }); }; 


  Это позволит разместить изображение в центре страницы идеально. 


  4. Создать слушателя 


  Нам понадобится прослушиватель для браузера, когда он будет изменен. 


 $(window).bind("resize", function(){ changeCss(); }); 


  Функция «ChangeCss ()» — это функция, которая регулирует верхнее и левое значения изображения.  Всякий раз, когда он вызывается путем изменения размера окна, jQuery просто пересчитывает значения. 


  Вывод 


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

34
Share: