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 diese dann wiederzuverwenden oder für die Community freizugeben.
Entwicklung eines Jquery-Plugins
Die Grundstruktur eines Plugins ist wie folgt
jQuery.fn.extend ({ [b] miplugin [/ b]: function ([b] parameter [/ b]) { // Plugin-Code } });
Die Parameter sind optional. Wir werden einige Beispiele erstellen, um zu verstehen, wie ein Plugin programmiert wird
Plugin, das eine Nachricht zurückgibt, wenn auf eine Schaltfläche, ein Textfeld, einen Link usw. geklickt wurde.
Wir schreiben den folgenden Code in eine plugin.js-Datei
jQuery.fn.extend ({ send: function (message) {// definiere die Sendefunktion und den message Parameter $ (this) .click (function () {// wenn die Funktion durch einen Klick aktiviert wurde Alarm (Nachricht); // zeige die Nachricht }); } });
Wir erstellen eine Struktur- oder HTML-Seite, die eine Schaltfläche zum Beispiel zum Senden enthält
<html> <head> <script src = "[url =" http://code.jquery.com/jquery-1.10.2.js "] http://code.jquery.com/jquery-1.10.2.js [/ url]" > </ script> // wir rufen die jquery Bibliothek auf <script src = "./ jquery.miplugin.js"> </ script> // rufe das Plugin auf <script> $ (document) .on ("ready", function () {// Funktionen starten, die verfügbar sein sollen $ ('# send'). send ("Data sent"); // Element ID send Zuweisungsfunktion und Parameter }); </ script> </ head> <body> <div id = "content"> <button id = "send"> Senden </ button> </ div> </ body> </ html>
. Wir speichern den HTML-Code und klicken beim Ausführen über den Browser auf die Schaltfläche und sehen, dass die jquery-Funktion eine Meldung anzeigt .
Wir erstellen ein weiteres Plugin, das Sie in derselben js-Datei oder in einem anderen Plugin einfügen können, wenn Sie separate Plugins wünschen.
. In diesem Fall wird der CSS-Aspekt einer Schaltfläche geändert, wenn diese gedrückt wird. Die Farbe des Texts und des Hintergrunds werden geändert .
jQuery.fn.extend ({ Hintergrund ändern: Funktion (Hintergrund, Text) {// Funktion und Parameter $ (this) .click (function () {// wenn von einem Klick zugegriffen wird jQuery (this) .css ("Hintergrundfarbe", Hintergrund); // Ändere die Farbe des Hintergrunds jQuery (this) .css ("Farbe", Text); // Ändere die Farbe des Textes }); } });
Dann müssen wir den HTML-Code des Elements in diesem Fall eine Schaltfläche schreiben, deren ID Hintergrund sein wird
<button id = "background"> Farbe ändern </ button>
Wir müssen auch die Funktion einleiten, wir hätten die beiden Funktionen
<script> $ (document) .on ("ready", function () {// Funktionen starten, die verfügbar sein sollen $ ('# background'). send ("Data sent"); // Element ID send Zuweisungsfunktion und Parameter $ ('# fund'). change fund ('# 666', '# fff'); // ändere den Hintergrund auf die graue Farbe 40% und weiß }); </ script>
. Durch Klicken auf die Schaltfläche Farbe ändern wird angezeigt, dass die CSS-Änderungen übernommen werden .
: In diesem Sinne können wir an jedem HTML-Element Änderungen vornehmen und Funktionalitäten zuweisen, beispielsweise erstellen wir in HTML ein leeres Div mit der ID-Nachricht :
<div id = "message"> </ div>
Dann ändern wir im Sende-Plugin
Alarm (Nachricht)
durch den folgenden Code, der beim Drücken der Taste eine Nachricht im div veröffentlicht
$ ("# message"). html ("<strong> Daten gesendet </ strong>");
. Durch Klicken auf die Schaltfläche “Senden” anstelle des Dialogfelds wird die Nachricht jetzt in das div geschrieben .
