jQuery - Плагины

Плагин - это фрагмент кода, написанный в стандартном файле JavaScript. Эти файлы предоставляют полезные методы jQuery, которые можно использовать вместе с методами библиотеки jQuery.

Доступно множество подключаемых модулей jQuery, которые вы можете скачать по ссылке репозитория на https://jquery.com/plugins.

Как использовать плагины

Чтобы сделать методы подключаемого модуля доступными для нас, мы включаем файл подключаемого модуля, очень похожий на файл библиотеки jQuery, в <head> документа.

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

В следующем примере показано, как включить jquery.plug-in.js плагин -

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script src = "jquery.plug-in.js" type = "text/javascript"></script>
      <script src = "custom.js" type = "text/javascript"></script>
      
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            .......your custom code.....
         });
      </script>
   </head>
	
   <body>
      .............................
   </body>
</html>

Как разработать плагин

Написать собственный плагин очень просто. Ниже приведен синтаксис для создания метода -

jQuery.fn.methodName = methodDefinition;

Здесь methodNameM - это имя нового метода, а methodDefinition - это фактическое определение метода.

Руководство, рекомендованное командой jQuery, выглядит следующим образом:

Все присоединяемые методы или функции должны иметь в конце точку с запятой (;).
Ваш метод должен возвращать объект jQuery, если явно не указано иное.
Вы должны использовать this.each для перебора текущего набора совпадающих элементов - таким образом он создает чистый и совместимый код.
Приставьте к имени файла префикс jquery, после него укажите имя плагина и в заключение укажите .js.
Всегда подключайте плагин к jQuery напрямую, а не к $, чтобы пользователи могли использовать собственный псевдоним с помощью метода noConflict ().

Например, если мы пишем плагин, который хотим назвать отладочным , наше имя файла JavaScript для этого плагина -

jquery.debug.js

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

пример

Ниже приведен небольшой плагин, содержащий метод предупреждения для отладки. Сохраните этот код в файле jquery.debug.js -

jQuery.fn.warning = function() {
   return this.each(function() {
      alert('Tag Name:"' + $(this).prop("tagName") + '".');
   });
};

Вот пример, показывающий использование метода warning (). Предполагая, что мы поместили файл jquery.debug.js в тот же каталог html-страницы.

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script src = "jquery.debug.js" type = "text/javascript">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").warning();
            $("p").warning();
         });
      </script>	
   </head>
	
   <body>
      <p>This is paragraph</p>
      <div>This is division</div>
   </body>
</html>

Это предупредит вас следующим результатом -

This is paragraph
This is division