So erstellen Sie Plugins mit dem jQuery-Framework

jQuery gibt uns viel Flexibilität beim Schreiben von Code und es ist so einfach, dass es auch mit geringen Kenntnissen verwendet werden kann und wir große Projekte zeitsparend durchführen können.
Eine der Möglichkeiten von Jquery besteht darin, dass wir es erweitern können, um neue Funktionen in diesem Framework zu erstellen. Es ist eine gute Idee, Plugins zu entwickeln, die für unsere Webanwendungen sehr nützlich sind, und sie dann wiederverwenden oder mit der Community teilen zu können.
Entwicklung eines Jquery-Plugins
Der Grundaufbau eines Plugins ist wie folgt

 jQuery.fn.extend ({[b] miplugin [/ b]: Funktion ([b] Parameter [/ b]) {// Plugin Code}}); 

Parameter sind optional. Wir werden einige Beispiele erstellen, um zu verstehen, wie ein Plugin programmiert wird
Plugin, das eine Nachricht zurückgibt, wenn eine Schaltfläche, ein Textfeld, ein Link usw. angeklickt wurde.
Wir schreiben den folgenden Code in eine plugin.js-Datei

 jQuery.fn.extend ({send: function (message) {// Ich definiere die Sendefunktion und den Nachrichtenparameter $ (this) .click (function () {// wenn die Funktion durch einen Klickalarm (message) aktiviert wurde; // Nachricht anzeigen});}});

Wir erstellen eine Struktur oder HTML-Seite, die eine Schaltfläche zum Beispiel zum Senden enthält

 // wir rufen die jquery-Bibliothek auf // wir rufen das Plugin aufSenden

Wir speichern den HTML-Code und wenn wir ihn im Browser ausführen, klicken wir auf die Schaltfläche und sehen, dass die jquery-Funktion eine Nachricht anzeigt.

Wir erstellen ein weiteres Plugin in derselben js-Datei oder in einer anderen, wenn wir separate Plugins wünschen.
In diesem Fall wird der CSS-Aspekt einer Schaltfläche geändert, wenn sie gedrückt wird, wir ändern die Farbe des Textes und des Hintergrunds.

 jQuery.fn.extend ({change background: function (background, text) {// function and parameters $ (this) .click (function () {// if access from a click jQuery (this) .css ("background- color ", background); // ändere die Farbe des Hintergrunds jQuery (this) .css (" color ", text); // ändere die Farbe des Textes});}}); 

Dann müssen wir den HTML-Code des Elements schreiben, in diesem Fall eine Schaltfläche, deren ID im Hintergrund angezeigt wird

Farbe ändern

Wir müssen auch die Funktion initiieren, uns bleiben die beiden Funktionen übrig

Durch Klicken auf die Schaltfläche Farbe ändern sehen wir, dass die CSS-Änderungen übernommen werden.

In diesem Sinne können wir jedem HTML-Element Änderungen vornehmen und Funktionalitäten zuweisen, zum Beispiel erstellen wir in HTML ein leeres div mit der Nachrichten-ID:

Dann ändern wir im Sende-Plugin

Warnmeldung)

durch den folgenden Code, der beim Drücken der Taste eine Nachricht im Div veröffentlicht

 $ ("# Nachricht"). html ("Daten gesendet"); 

Wenn Sie statt des Dialogs auf die Schaltfläche "Senden" klicken, wird die Nachricht jetzt in das div geschrieben.

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben