1. Komponenteneffektvorschau
Tatsächlich ähnelt der Effekt dem vorherigen. Der Blogger hat nur eine ausgewählte Hintergrundfarbe hinzugefügt, die auf dem vorherigen basiert.
Alles reduzieren
Erweitern
Alles erweitern
2. Codebeispiele
Tatsächlich ist der Effekt sehr einfach. Konzentrieren wir uns auf die Kapselung des Codes. Es ist immer noch die alte Regel, den implementierten Code zu veröffentlichen und ihn dann Schritt für Schritt zu erklären.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
|
1. Verpackungsanweisungen, werfen wir einen kurzen Blick auf den obigen Code
(1) Verwenden Sie (function ($) {})(jQuery), um eine anonyme Funktion zu deklarieren und sofort auszuführen. Die Funktion besteht darin, dem jquery-Objekt eine benutzerdefinierte Methode hinzuzufügen Wenn Sie es nicht verstehen, können Sie den vorherigen Artikel lesen, in dem die JS-Komponentenserie erläutert wird – das Einkapseln Ihrer eigenen JS-Komponenten ist auch möglich. Nachdem wir auf diese Weise gekapselt haben, können wir die Baumkomponente direkt über $("#id").jqtree({}); initialisieren.
(2) Nach der Definition der Standardparameter kann der Benutzer nur die Parameter übergeben, die er übergeben muss. Für die Parameter, die nicht benötigt werden, verwenden Sie einfach die Standardwerte. Aus diesem Grund verfügen viele Bootstrap-Komponenten über eine solche Standardparameterliste.
(3) Die gekapselte Komponente unterstützt zwei Möglichkeiten der gleichzeitigen Datenübertragung. Wenn der Benutzer den Datenparameter direkt übergibt, wird er direkt mit dem Datenparameter initialisiert. Andernfalls wird dieselbe URL an den Ajax gesendet Anforderung, die Daten aus dem Hintergrund abzurufen.
(4) Wenn die Daten über eine URL abgerufen werden, kann der Benutzer die Ereignisverarbeitungsmethode anpassen, bevor die Komponente geladen wird und nachdem der Ladevorgang abgeschlossen ist. Entspricht den oben genannten onBeforeLoad und onLoadSuccess. Die Parameter des onLoadSuccess-Ereignisses entsprechen den von Ajax angeforderten Daten. Manchmal müssen Sie nach dem Laden der Komponente eine spezielle Verarbeitung durchführen, die mit dieser Methode geschrieben werden kann.
(5) Sie können die Klickereignisverarbeitungsmethode des Knotens anpassen, der dem oben genannten onClickNode entspricht. Der übergebene Parameter ist das JQuery-Objekt des aktuell angeklickten Knotens.
2. Komponentenaufruf
Nachdem ich so viel gesagt habe, wie benutzt man es?
Zuallererst benötigt unser HTML nur ein leeres ul-Tag
1 2 3 4 |
|
Wie oben erwähnt, können Komponenten zwei Aufrufmethoden gleichzeitig unterstützen:
1) Übergeben Sie das Json-Array direkt;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
|
Die C#-Anforderungsmethode im Hintergrund erstellt den Datentyp im oben genannten Datenformat.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
|
onLoadSuccess-Ereignis-DebuggingSchauen Sie sich das an
onClickNode-EreignisaufrufVersuchen Sie , um zu sehen, ob der Selektor dem JQuery-Objekt des aktuell angeklickten Knotens entspricht.
3. Zusammenfassung
Das Obige ist eine einfache Kapselung des JQuery-Baums. Die erste Version, die heute fertiggestellt wurde, ist möglicherweise nicht sehr effektiv, aber die Grundfunktionen wurden implementiert.