JQuery
Your trail: 

This page (revision-7) was last changed on 20-Mar-2020 19:06 by Dieter Käppel

This page was created on 23-Sep-2016 14:22 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
7 20-Mar-2020 19:06 7 KB Dieter Käppel to previous
6 20-Mar-2020 19:06 7 KB Dieter Käppel to previous | to last
5 20-Mar-2020 19:05 6 KB Dieter Käppel to previous | to last
4 23-Mar-2017 13:24 3 KB Dieter Käppel to previous | to last
3 23-Sep-2016 16:07 3 KB Dieter Käppel to previous | to last
2 23-Sep-2016 14:30 2 KB Dieter Käppel to previous | to last
1 23-Sep-2016 14:22 2 KB Dieter Käppel to last

Page References

Incoming links Outgoing links
JQuery
JQuery

Version management

Difference between version and

At line 3 added 3 lines
!!!Inhalt
[{TableOfContents }]
At line 6 changed one line
!!!Extension
!!!Extensions
Extensions sind eine grundlegende Funktion in JQuery.
At line 73 added 144 lines
Solche Funktionen können aber auch selbst definiert werden:
{{{
$.fn.extends({
test: function() {
console.log("got: ", this.attr("id"));
return this;
}
});
$("#element").test();
}}}
__Erklärung:__ Hier wird die Funktion "test" definiert und dann auf das selektierte Element angewendet.
__Hinweis:__ Auch die Daten-Funktionen $.fn geben this zurück, falls diese keinen expliziten Rückgabewert liefern. Damit ist eine Verkettung von Funktionsaufrufen möglich.
!!!Widgets
Eine weitere Art von JQuery-Objekten sind die Widgets. Diese sind vor allem dazu bestimmt, JSON-Objektive auf HTML-Elemente aufzusetzen und damit HTML-Elemente zu funktionell zu erweitern, bis hin zu komplexen, interaktiven Elementen.
Ein Widget kann leicht über die Funktion $.widget erzeugt werden:
{{{
$.widget("ext.Test", {});
}}}
__Erklärung:__ Das Widget ist zunächst über "$.ext.Test" auffindbar.
Üblicherweise wird ein Widget dann auf ein HTML-Element aufgesetzt:
{{{
var widget = $("#element").Test();
}}}
Damit wird das HTML-Element zum Widget namens "Test" erweitert und der Variable "widget" zugeordnet.
!!Initialisierung
Ein Widget kann eine Funktion zur Initialisierung besitzen:
{{{
$.widget("ext.Test", {
_init: function() {
console.log("init");
}
});
}}}
__Erklärung:__ Nach dem das Widget auf das HTML-Element mittels $("#element").Test() installiert wurde, wird automatisch der Code der Funktion _init ausgeführt.
!!Default Widgets
Unter $.ui sind bereits Widgets mitgeliefert, z.B. $.ui.datepicker. Diese können auch erweitert werden, indem beim Erstellen eines Widgets ein anderes angegeben wird:
{{{
$.widget("ext.Test", $.ui.datepicker, {});
}}}
!!!Constructor
Der Begriff Constructor ist bei einem Widget ein nicht genau zutreffender Begriff. Denn neben der Konstruktion des Widgets dient er zusätzlich zum Setzen und Lesen von Options, Aufruf von Methoden sowie zum Entfernen des Widgets.
Im Folgenden wird von einem Widget mit folgenden Code ausgegangen:
{{{
$.widget("ext.Test", {
options: {
value: "default"
},
_create: function() {
this._super();
console.log("constructor: " + JSON.stringify(this.options);
},
_setOptions: function(options) {
this._super(options);
console.log("changed: " + JSON.stringify(this.options));
},
test: function(value) {
return "Hello " + value;
}
});
}}}
!!Neues Widget
Ein neues Widget erzeugt man, indem man den Widget-Namen auf einem JQuery-Objekt aufruft:
{{{
<div id="test">
<script type="text/javascript">
$("#test").Test();
</script>
}}}
__Ergebnis:__ Die Ausgabe für die Option value ist default.
Der Constructor kann auch Parameter annehmen:
{{{
$("#test").Test({value: "constructor-param"});
}}}
__Ergebnis:__ Die Ausgabe für die Option value ist constructor-param.
!!Options ändern
Der vermeintliche Constructor kann wiederholt aufgerufen werden. Im Gegensatz zu einer Java-Klasse oder einem New-Operator wird das Widget jedoch nicht neu erzeugt. Viel mehr werden diese Werte den Optionen hinzugefügt oder geändert:
{{{
$("#test").Test({value: "changed-param"});
}}}
__Ergebnis:__ Die Ausgabe für die Option value ist changed-param.
!!Funktionen aufrufen
Zum Einen kann eine Funktion des Widgets aufgerufen werden, indem man statt dem JSON-Object ein Funktionsname übergeben wird:
{{{
$("#test").Test("test");
}}}
__Ergebnis:__ Die Funktion test wird aufgerufen.
!!Argumente übergeben
Beim Funktionsaufruf können Argumente übergeben werden, indem diese dem Funktionsnamen angehängt werden:
{{{
$("#test").Test("test", "Peter");
}}}
__Ergebnis:__ Die Funktion test wird mit dem Argument Peter aufgerufen.
__Hinweis:__ Es können beliebig viele weitere Argumente übergeben werden.
!!Wert abfragen
Der Constructor kann ebenso benutzt werden, um Werte des Widgets abzufragen. Aus dem obigen Beispiel wird der Return-Rückgabewert der Funktion einfach weitergereicht, also "Hello unknown" zurückgegeben.
Auf diese Weise lässt sich eine Art Kombination aus Setter und Getter implementieren, wenn man das Argument auf undefined abfragt.
!!!Funktionen
[JQuery] bringt eine Menge Funktionen mit, sowohl global als $.<function> als auch am JQuery-Objekt $(<selector>).<function>.
!!data
Die Funktion data gibt es sowohl global als $.data(element, name [, value]) oder am Objekt $(<selector>).data(name [, value]). Mit dieser Funktion können Javascript-Objekte an HTML-Tags zugewiesen werden.
Intern werden die Data-Objekte an andere Stelle gespeichert und zwar in $.cache. Der Tag selbst enthält nur eine Referenz: tag[[$.expando].
__Hinweis:__ Ab JQuery 3 werden die Daten direkt am Tag gespeichert, da dies bei moderneren Browsern möglich ist.
This page (revision-7) was last changed on 20-Mar-2020 19:06 by Dieter Käppel Top
Übersicht
Startseite
Das Unternehmen
Produkte
Consulting
Referenzen

Jobmarkt
Jobangebote
Profile

Hilfe
Suche
Seitenindex
Letzte Änderungen
Sichere Verbindung

Systeme
Tickets
Jenkins
Nexus
SVN
Email Client
4502 Aufrufe

referenziert von
Activate JS
Activate JS Examples
Dieter Käppel
Intersult Produkte
JQuery
JQueryWidget2
JSF-JQuery 2
Main
RequireJS
SVG Layout
Technologien
Vue
Vue JQuery

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2024.05.03 16:51:17 GMT