Телефон: +7(812)9922114
Портфолио
Создание сайтов Оптимизация и продвижение сайтов Обслуживание сайтов Создание уникальных текстов Создание и обработка графики Создание программного обеспечения

Создание JQUERY плагина

Функционал jQuery может быть расширен при помощи плагинов - отдельных файлов. В качестве примера будет создан плагин responsiveBlock (отзывчивый блочный элемент).

Необходимо создать jquery.responsiveBlock.js и подключить его после файла библиотеки:

javascript_50_code_base64:JTNDc2NyaXB0JTIwc3JjJTNEJTIyanF1ZXJ5Lm1pbi5qcyUyMiUzRSUzQy9zY3JpcHQlM0UlMEElM0NzY3JpcHQlMjBzcmMlM0QlMjJqcXVlcnkucmVzcG9uc2l2ZUJsb2NrLmpzJTIyJTNFJTNDL3NjcmlwdCUzRQ==

Чтобы добавить новый метод в объект jQuery, необходимо добавить функцию с его реализацией в объект jQuery.fn. В нашем плагине нужно организовать один метод — который будет добавлять элементам умение изменять цвет при наведении курсора. Назовем его так же как и сам плагин — responsiveBlock:

javascript_75_code_base64:alF1ZXJ5LmZuLnJlc3BvbnNpdmVCbG9jayUyMCUzRCUyMGZ1bmN0aW9uJTI4JTI5JTdCJTBBJTIwJTIwLy8lMjAldTA0MzcldTA0MzQldTA0MzUldTA0NDEldTA0NEMlMjAldTA0MzEldTA0NDMldTA0MzQldTA0MzUldTA0NDIlMjAldTA0NDAldTA0MzUldTA0MzAldTA0M0IldTA0MzgldTA0MzcldTA0MzAldTA0NDYldTA0MzgldTA0NEYlMjAldTA0M0MldTA0MzUldTA0NDIldTA0M0UldTA0MzQldTA0MzAlMEElN0QlM0IlMjAvLyUyMCV1MDQ0MiV1MDQzRSV1MDQ0NyV1MDQzQSV1MDQzMCUyMCV1MDQ0MSUyMCV1MDQzNyV1MDQzMCV1MDQzRiV1MDQ0RiV1MDQ0MiV1MDQzRSV1MDQzOSUyMCV1MDQzMiUyMCV1MDQzQSV1MDQzRSV1MDQzRCV1MDQ0NiV1MDQzNSUyMCV1MDQ0MCV1MDQzNSV1MDQzMCV1MDQzQiV1MDQzOCV1MDQzNyV1MDQzMCV1MDQ0NiV1MDQzOCV1MDQzOCUyMCV1MDQzRSV1MDQ0NyV1MDQzNSV1MDQzRCV1MDQ0QyUyMCV1MDQzMiV1MDQzMCV1MDQzNiV1MDQzRCV1MDQ0QiUyMSUyMCV1MDQxMSV1MDQzNSV1MDQzNyUyMCV1MDQzRCV1MDQzNSV1MDQzNSUyMCV1MDQzRiV1MDQzQiV1MDQzMCV1MDQzMyV1MDQzOCV1MDQzRCUyMCV1MDQzRCV1MDQzNSUyMCV1MDQzNyV1MDQzMCV1MDQ0MCV1MDQzMCV1MDQzMSV1MDQzRSV1MDQ0MiV1MDQzMCV1MDQzNSV1MDQ0Mi4=

Чтобы избежать возможных конфликтов имен, обернем наш код в следующую конструкцию:

jquery_100_code_base64:JTI4ZnVuY3Rpb24lMjglMjQlMjklN0IlMEElMjAlMjBqUXVlcnkuZm4ucmVzcG9uc2l2ZUJsb2NrJTIwJTNEJTIwZnVuY3Rpb24lMjglMjklN0IlMEElMjAlMjAlMjAlMjAvLyUyMCV1MDQzNyV1MDQzNCV1MDQzNSV1MDQ0MSV1MDQ0QyUyMCV1MDQzMSV1MDQ0MyV1MDQzNCV1MDQzNSV1MDQ0MiUyMCV1MDQ0MCV1MDQzNSV1MDQzMCV1MDQzQiV1MDQzOCV1MDQzNyV1MDQzMCV1MDQ0NiV1MDQzOCV1MDQ0RiUyMCV1MDQzQyV1MDQzNSV1MDQ0MiV1MDQzRSV1MDQzNCV1MDQzMCUwQSUyMCUyMCU3RCUzQiUwQSU3RCUyOSUyOGpRdWVyeSUyOSUzQg==

Переменная this, в теле метода, всегда содержит текущий объект jQuery (тот, на котором и был вызван метод). Для того, чтобы обойти все выбранные элементы по отдельности, используем метод .each(). А для возможности продолжить цепочку методов наш метод должен будет возвратить текущий объект jQuery:

jquery_100_code_base64:JTI4ZnVuY3Rpb24lMjglMjQlMjklN0IlMEElMjAlMjBqUXVlcnkuZm4ucmVzcG9uc2l2ZUJsb2NrJTIwJTNEJTIwZnVuY3Rpb24lMjglMjklN0IlMEElMjAlMjAlMjAlMjB2YXIlMjBtYWtlJTIwJTNEJTIwZnVuY3Rpb24lMjglMjklN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAvLyUyMCV1MDQ0MCV1MDQzNSV1MDQzMCV1MDQzQiV1MDQzOCV1MDQzNyV1MDQzMCV1MDQ0NiV1MDQzOCV1MDQ0RiUyMCV1MDQ0MCV1MDQzMCV1MDQzMSV1MDQzRSV1MDQ0MiV1MDQ0QiUyMCV1MDQzQyV1MDQzNSV1MDQ0MiV1MDQzRSV1MDQzNCV1MDQzMCUyMCV1MDQ0MSUyMCV1MDQzRSV1MDQ0MiV1MDQzNCV1MDQzNSV1MDQzQiV1MDQ0QyV1MDQzRCV1MDQ0QiV1MDQzQyUyMCV1MDQ0RCV1MDQzQiV1MDQzNSV1MDQzQyV1MDQzNSV1MDQzRCV1MDQ0MiV1MDQzRSV1MDQzQyUyMCV1MDQ0MSV1MDQ0MiV1MDQ0MCV1MDQzMCV1MDQzRCV1MDQzOCV1MDQ0NiV1MDQ0QiUwQSUyMCUyMCUyMCUyMCU3RCUzQiUwQSUyMCUwQSUyMCUyMCUyMCUyMHJldHVybiUyMHRoaXMuZWFjaCUyOG1ha2UlMjklM0IlMjAlMEElMjAlMjAlMjAlMjAvLyUyMCV1MDQzMiUyMCV1MDQzOCV1MDQ0MiV1MDQzRSV1MDQzMyV1MDQzNSUyQyUyMCV1MDQzQyV1MDQzNSV1MDQ0MiV1MDQzRSV1MDQzNCUyMHJlc3BvbnNpdmVCbG9jayUyMCV1MDQzMiV1MDQzNSV1MDQ0MCV1MDQzRCV1MDQzNSV1MDQ0MiUyMCV1MDQ0MiV1MDQzNSV1MDQzQSV1MDQ0MyV1MDQ0OSV1MDQzOCV1MDQzOSUyMCV1MDQzRSV1MDQzMSV1MDQ0QSV1MDQzNSV1MDQzQSV1MDQ0MiUyMGpRdWVyeSUyMCV1MDQzRSV1MDQzMSV1MDQ0MCV1MDQzMCV1MDQ0MiV1MDQzRCV1MDQzRSUwQSUyMCUyMCU3RCUzQiUwQSU3RCUyOSUyOGpRdWVyeSUyOSUzQg==

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

jquery_200_code_base64:JTI4ZnVuY3Rpb24lMjglMjQlMjklN0IlMEElMjAlMjBqUXVlcnkuZm4ucmVzcG9uc2l2ZUJsb2NrJTIwJTNEJTIwZnVuY3Rpb24lMjhvcHRpb25zJTI5JTdCJTBBJTIwJTIwJTIwJTIwLy8lMjAldTA0MTcldTA0MzAldTA0MzQldTA0MzAldTA0MzQldTA0MzgldTA0M0MlMjAldTA0NDEldTA0M0YldTA0MzgldTA0NDEldTA0M0UldTA0M0ElMjAldTA0NDEldTA0MzIldTA0M0UldTA0MzkldTA0NDEldTA0NDIldTA0MzIlMjAldTA0MzglMjAldTA0NDMldTA0M0EldTA0MzAldTA0MzYldTA0MzUldTA0M0MlMjAldTA0MzQldTA0M0IldTA0NEYlMjAldTA0M0QldTA0MzgldTA0NDUlMjAldTA0MzcldTA0M0QldTA0MzAldTA0NDcldTA0MzUldTA0M0QldTA0MzgldTA0NEYlMjAldTA0M0YldTA0M0UlMjAldTA0NDMldTA0M0MldTA0M0UldTA0M0IldTA0NDcldTA0MzAldTA0M0QldTA0MzgldTA0NEUuJTBBJTIwJTIwJTIwJTIwLy8lMjAldTA0MTUldTA0NDEldTA0M0IldTA0MzglMjAldTA0M0YldTA0NDAldTA0MzglMjAldTA0MzIldTA0NEIldTA0MzcldTA0M0UldTA0MzIldTA0MzUlMjAldTA0M0MldTA0MzUldTA0NDIldTA0M0UldTA0MzQldTA0MzAlMjAldTA0MzEldTA0NDMldTA0MzQldTA0NDMldTA0NDIlMjAldTA0NDMldTA0M0EldTA0MzAldTA0MzcldTA0MzAldTA0M0QldTA0NEIlMjAldTA0M0YldTA0M0UldTA0M0IldTA0NEMldTA0MzcldTA0M0UldTA0MzIldTA0MzAldTA0NDIldTA0MzUldTA0M0IldTA0NEMldTA0NDEldTA0M0EldTA0MzgldTA0MzUlMEElMjAlMjAlMjAlMjAvLyUyMCV1MDQzMiV1MDQzMCV1MDQ0MCV1MDQzOCV1MDQzMCV1MDQzRCV1MDQ0MiV1MDQ0QiUyMCV1MDQzRCV1MDQzNSV1MDQzQSV1MDQzRSV1MDQ0MiV1MDQzRSV1MDQ0MCV1MDQ0QiV1MDQ0NSUyMCV1MDQzOCV1MDQzNyUyMCV1MDQzRCV1MDQzOCV1MDQ0NSUyQyUyMCV1MDQ0MiV1MDQzRSUyMCV1MDQzRSV1MDQzRCV1MDQzOCUyMCV1MDQzMCV1MDQzMiV1MDQ0MiV1MDQzRSV1MDQzQyV1MDQzMCV1MDQ0MiV1MDQzOCV1MDQ0NyV1MDQzNSV1MDQ0MSV1MDQzQSV1MDQzOCUyMCV1MDQzRiV1MDQzNSV1MDQ0MCV1MDQzNSV1MDQzRiV1MDQzOCV1MDQ0OCV1MDQ0MyV1MDQ0MiUwQSUyMCUyMCUyMCUyMC8vJTIwJXUwNDQxJXUwNDNFJXUwNDNFJXUwNDQyJXUwNDMyJXUwNDM1JXUwNDQyJXUwNDQxJXUwNDQyJXUwNDMyJXUwNDQzJXUwNDRFJXUwNDQ5JXUwNDM4JXUwNDM1JTIwJXUwNDM3JXUwNDNEJXUwNDMwJXUwNDQ3JXUwNDM1JXUwNDNEJXUwNDM4JXUwNDRGJTIwJXUwNDNGJXUwNDNFJTIwJXUwNDQzJXUwNDNDJXUwNDNFJXUwNDNCJXUwNDQ3JXUwNDMwJXUwNDNEJXUwNDM4JXUwNDRFJTBBJTIwJTIwJTIwJTIwb3B0aW9ucyUyMCUzRCUyMCUyNC5leHRlbmQlMjglN0IlMEElMjAlMjAlMjAlMjAlMjAlMjBkZWZDb2xvciUzQSUyMndoaXRlJTIyJTJDJTIwLy8ldTA0NDYldTA0MzIldTA0MzUldTA0NDIlMjAldTA0NEQldTA0M0IldTA0MzUldTA0M0MldTA0MzUldTA0M0QldTA0NDIldTA0MzAlMjAldTA0M0QldTA0MzAldTA0MzQlMjAldTA0M0EldTA0M0UldTA0NDIldTA0M0UldTA0NDAldTA0NEIldTA0M0MlMjAldTA0M0QldTA0MzUldTA0NDIlMjAldTA0M0EldTA0NDMldTA0NDAldTA0NDEldTA0M0UldTA0NDAldTA0MzAlMEElMjAlMjAlMjAlMjAlMjAlMjBob3ZlckNvbG9yJTNBJTIycmVkJTIyJTIwLy8ldTA0NDYldTA0MzIldTA0MzUldTA0NDIlMjAldTA0NEQldTA0M0IldTA0MzUldTA0M0MldTA0MzUldTA0M0QldTA0NDIldTA0MzAlMjAldTA0M0QldTA0MzAlMjAldTA0M0EldTA0M0UldTA0NDIldTA0M0UldTA0NDAldTA0NEIldTA0MzklMjAldTA0M0QldTA0MzAldTA0MzIldTA0MzUldTA0MzQldTA0MzUldTA0M0QlMjAldTA0M0EldTA0NDMldTA0NDAldTA0NDEldTA0M0UldTA0NDAlMEElMjAlMjAlMjAlMjAlN0QlMkMlMjBvcHRpb25zJTdEJTNCJTBBJTIwJTBBJTIwJTIwJTIwJTIwdmFyJTIwbWFrZSUyMCUzRCUyMGZ1bmN0aW9uJTI4JTI5JTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwLy8lMjAldTA0NDAldTA0MzUldTA0MzAldTA0M0IldTA0MzgldTA0MzcldTA0MzAldTA0NDYldTA0MzgldTA0NEYlMjAldTA0NDAldTA0MzAldTA0MzEldTA0M0UldTA0NDIldTA0NEIlMjAldTA0M0MldTA0MzUldTA0NDIldTA0M0UldTA0MzQldTA0MzAlMjAldTA0NDElMjAldTA0M0UldTA0NDIldTA0MzQldTA0MzUldTA0M0IldTA0NEMldTA0M0QldTA0NEIldTA0M0MlMjAldTA0NEQldTA0M0IldTA0MzUldTA0M0MldTA0MzUldTA0M0QldTA0NDIldTA0M0UldTA0M0MlMjAldTA0NDEldTA0NDIldTA0NDAldTA0MzAldTA0M0QldTA0MzgldTA0NDYldTA0NEIlMEElMjAlMjAlMjAlMjAlN0QlM0IlMEElMjAlMEElMjAlMjAlMjAlMjByZXR1cm4lMjB0aGlzLmVhY2glMjhtYWtlJTI5JTNCJTIwJTBBJTIwJTIwJTIwJTIwLy8lMjAldTA0MzIlMjAldTA0MzgldTA0NDIldTA0M0UldTA0MzMldTA0MzUlMkMlMjAldTA0M0MldTA0MzUldTA0NDIldTA0M0UldTA0MzQlMjByZXNwb25zaXZlQmxvY2slMjAldTA0MzIldTA0MzUldTA0NDAldTA0M0QldTA0MzUldTA0NDIlMjAldTA0NDIldTA0MzUldTA0M0EldTA0NDMldTA0NDkldTA0MzgldTA0MzklMjAldTA0M0UldTA0MzEldTA0NEEldTA0MzUldTA0M0EldTA0NDIlMjBqUXVlcnklMjAldTA0M0UldTA0MzEldTA0NDAldTA0MzAldTA0NDIldTA0M0QldTA0M0UlMEElMjAlMjAlN0QlM0IlMEElN0QlMjklMjhqUXVlcnklMjklM0I=

jquery_100_code_base64:Ly8lMjAldTA0NDIldTA0MzUldTA0M0YldTA0MzUldTA0NDAldTA0NEMlMjAldTA0M0MldTA0M0UldTA0MzYldTA0M0QldTA0M0UlMjAldTA0MzcldTA0MzAldTA0MzQldTA0MzAldTA0MzIldTA0MzAldTA0NDIldTA0NEMlMjAldTA0M0YldTA0M0IldTA0MzAldTA0MzMldTA0MzgldTA0M0QlMjAldTA0NDElMjAldTA0M0QldTA0MzAldTA0NDEldTA0NDIldTA0NDAldTA0M0UldTA0MzkldTA0M0EldTA0MzAldTA0M0MldTA0MzglMjAldTA0M0YldTA0M0UlMjAldTA0NDMldTA0M0MldTA0M0UldTA0M0IldTA0NDcldTA0MzAldTA0M0QldTA0MzgldTA0NEUlM0ElMEElMjQlMjglMjdkaXYlM0FmaXJzdCUyNyUyOS5yZXNwb25zaXZlQmxvY2slMjglMjklM0IlMEElMjAlMEEvLyUyMCV1MDQzOCV1MDQzQiV1MDQzOCUyMCV1MDQ0MyV1MDQzQSV1MDQzMCV1MDQzNyV1MDQzMCV1MDQ0MiV1MDQ0QyUyMCV1MDQ0MSV1MDQzMiV1MDQzRSV1MDQzOCUyMCV1MDQzNyV1MDQzRCV1MDQzMCV1MDQ0NyV1MDQzNSV1MDQzRCV1MDQzOCV1MDQ0RiUyMCV1MDQzRCV1MDQzNSV1MDQzQSV1MDQzRSV1MDQ0MiV1MDQzRSV1MDQ0MCV1MDQ0QiV1MDQ0NSUyMCV1MDQzOCV1MDQzQiV1MDQzOCUyMCV1MDQzMiV1MDQ0MSV1MDQzNSV1MDQ0NSUyMCV1MDQzRCV1MDQzMCV1MDQ0MSV1MDQ0MiV1MDQ0MCV1MDQzRSV1MDQzNSV1MDQzQSUwQSUyNCUyOCUyN2RpdiUzQWxhc3QlMjclMjkucmVzcG9uc2l2ZUJsb2NrJTI4JTdCJTIwZGVmQ29sb3IlM0ElMjIlMjNiYmJiYmIlMjIlMjAlN0QlMjklM0IlMEElMjQlMjglMjd1bCUyNyUyOS5yZXNwb25zaXZlQmxvY2slMjglN0IlMjBkZWZDb2xvciUzQSUyMiUyM2FhYWFhYSUyMiUyQyUyMGhvdmVyQ29sb3IlM0ElMjJncmVlbiUyMiUyMCU3RCUyOSUzQg==

Пример плагина с некоторым функционалом:

Реклама и продвижение

---

Скрипты на PHP, JAVASCRIPT и JQUERY

---

Полезные программы

---
©1998-2019. Санкт-Петербург. IT-студия "Кленовый лист"