Как да създадете плъгини с рамката jQuery

jQuery ни дава много гъвкавост при писане на код и е толкова прост, че може да се използва дори с малко знания и можем да изпълняваме големи проекти, спестявайки много време.
Една от възможностите на Jquery е, че ни позволява да го разширим, за да създадем нови функции в тази рамка. Добра идея е да изберете да разработите плъгини, които са много полезни за нашите уеб приложения и след това да можете да ги използвате повторно или да ги споделите с общността.
Разработване на приставка Jquery
Основната структура на приставката е следната

 jQuery.fn.extend ({[b] miplugin [/ b]: function ([b] параметър [/ b]) {// код на плъгин}}); 

Параметрите не са задължителни. Ще създадем няколко примера, за да разберем как е програмиран плъгин
Приставка, която връща съобщение, ако е натиснат бутон, текстово поле, връзка и т.н.
Пишем следния код във файл plugin.js

 jQuery.fn.extend ({send: function (message) {// Определям функцията за изпращане и параметъра на съобщението $ (this) .click (function () {// ако функцията е активирана чрез предупреждение за щракване (съобщение) ; // покажете съобщението});}});

Създаваме структура или html страница, която съдържа бутон например за изпращане

 // извикваме библиотеката jquery // извикваме приставкатаИзпрати

Запазваме html и когато го изпълним от браузъра, кликваме върху бутона и ще видим, че функцията jquery показва съобщение.

Ние създаваме друг плъгин може да бъде в същия js файл или в друг, ако искаме отделни приставки.
В този случай ще трябва да промените css аспекта на бутон, когато той е натиснат, ще променим цвета на текста и фона.

 jQuery.fn.extend ({промяна на фона: функция (фон, текст) {// функция и параметри $ (this) .click (function () {// ако е достъпен от щракване jQuery (this) .css ("background- цвят ", фон); // променя цвета на фона jQuery (this) .css (" color ", текст); // променя цвета на текста});}}); 

След това трябва да напишем html кода на елемента в този случай бутон, чийто идентификатор ще бъде фон

Промяна на цвета

Ние също трябва да инициираме функцията, ще останем с двете функции

Щраквайки върху бутона за промяна на цвета, виждаме, че промените в css са приложени.

В този смисъл можем да правим промени и да присвояваме функционалности на всеки html елемент, например в html създаваме празен div с идентификатора на съобщението:

След това в приставката за изпращане променяме

предупреждение (съобщение)

чрез следния код, който ще публикува съобщение в div при натискане на бутона

 $ ("# съобщение"). html ("Изпратени данни"); 

Щракването върху бутона за изпращане вместо диалоговия прозорец сега съобщението се записва в div.

Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка