Учебники

jQuery — плагины

Ноябрь 20, 2018

Плагин — это фрагмент кода, написанный в стандартном файле 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 ().

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

Ваш метод должен возвращать объект jQuery, если в явном виде не указано иное.

Вы должны использовать this.each для итерации по текущему набору совпадающих элементов — таким образом получается чистый и совместимый код.

Префикс имени файла с jquery, затем с именем плагина и в заключение с .js.

Всегда подключайте плагин к jQuery напрямую, а не к $, чтобы пользователи могли использовать собственный псевдоним с помощью метода noConflict ().

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

jquery.debug.js

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

пример

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

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

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

Live Demo 

<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>

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

43
Share: