jQUery

jQuery ist eine Bibliothek zur vereinfachten Ansprache von Objekten einer HTML-Seite. Wer mit WordPress arbeitet, hat jQuery automatisch an Bord.

Das Herz von jQuery ist die $-Funktion, die zur Ansprache von Objekten auf einer Seite dient. Während man bei reinem JavaScript + DOM schreiben muss
[code lang=“js“]
document.getElementById("datum").innerHTML = "datum";
[/code]
vereinfacht sich diese Zeile mit jQuery zu
[code lang=“js“]
$("#datum").html("datum");
[/code]
Diese Bibliothek hat neben der Vereinfachung der Schreibweisen auch noch den Vorteil, dass der Code unabhängig vom verwendeten Browser ist. Allein der Code zur Erkennung, welchen Browser der Besucher verwendet, ist es wert, sich mit jQuery zu beschäftigen.

Damit man jQuery verwenden kann, fügt man im Kopf der HTML-Datei ein:
[code lang=“html“]
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
[/code]
Das ist nur ein Beispiel, es gibt zahlreiche Versionen von jQuery und man sollte diese Versionen am eigenen Server speichern.

Man findet auch minimalisierte Versionen dieser Dateien, die nach der Versionsnummer noch .min im Dateinamen haben:
[code lang=“html“]
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
[/code]
Diese zweite Version reduziert die Dateigröße bei gleicher Funktion durch Verkürzung der Variablennamen und durch Entfernung unnötiger Leerzeichen auf ein Drittel.

Aktuelles Datum, mit jQuery, DOM  (html-js-4.htm)

[code lang=“html“]
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<p>Hello ClubComputer</p>
<p id="datum"></p>
<script>
$("#datum").html((new Date()).toLocaleDateString());
</script>
[/code]

Der Funktionsaufruf muss nach dem Punkt im Dokument stehen, wo das Objekt „datum“ definiert wurde, meist also am Ende des Dokuments.

Aktuelles Datums, mit jQuery, DOM, ready function (html-js-5.htm)

[code lang=“html“]
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$( function () {
$("#datum").html(new Date().toLocaleDateString());
} );
</script>
<p>Hello ClubComputer</p>
<p id="datum">d</p>
[/code]

Der Vorteil dieser Schreibweise ist, dass der Code im Kopfteil stehen kann, weil der Code in eine Funktion verpackt wurde, die erst nach dem vollständigen Laden der Seite gerufen wird.

jQueryUI

Moderne Webseiten enthalten sehr viele durch CSS gestaltete und durch JavaScript animierte Objekte, deren Programmierung durchaus anspruchsvoll sein kann. Damit man rascher zum Ziel kommt, ist die Verwendung von Bibliotheken ein Muss. jQuery-UI bietet folgende Widgets zur Weiterverwendung an:

Accordion stellt eine Art Faltwand bereit, mit der bestimmte Elemente automatisch ein- und ausklappen

Autocomplete bietet eine Funktion für das automatische Vervollständigen von Textfeldern, auch via Ajax

Button bietet eine Schnittstelle für das Bereitstellen gängiger Schaltflächen-Designs

Checkboxradio ist eine Erweiterung des Checkbox-Objekts

Controlgroup fasst mehrere Steuerelemente in einem abgegrenzten Bereich zusammen

Datepicker stellt ein Menü zur Datumsauswahl bereit

Dialog bietet die Möglichkeit, ein Dialogfenster zu generieren

Progressbar Stellt eine Schnittstelle zur Anzeige eines Fortschrittbalkens zur Verfügung

Selectmenu ist eine Erweiterung der Pull-Down-Menüs

Slider bietet einen Schieberegler

Spinner Eingabe numerischer Werte mit Up/Down-Buttons

Tabs gibt dem Entwickler die Möglichkeit, Registerkarten darzustellen

Tooltip erlaubt die Gestaltung der Hinweise über das title-Tag

 

Hier ein Beispiel für einen Tooltip mit jQueryUI

Auf einer Seite sind Termine eingetragen aber der Platz reicht nicht aus, um wirkich alle Angaben zu dem Termin unterzubringen. Daher steht in der Termin-Tabelle nur Sa 04 Nov Sturm Graz-Rapid. Die zusätzlichen Angaben erfährt man, wenn man mit der Maus drüberfährt über eine Sprechblase mit abgerundeten Ecken.

Im HTML-Code der Seite schaut das so aus:

[code lang=“html“]
Sa 04.Nov <span title=’Beginn: 16:00 Liga, 14. Runde, Djuricin, unbekannt (Merkur-Arena)‘><b>Sturm Graz – Rapid </b></span>
[/code]

Alles, was im Tag title blau gekennzeichnet ist wird durch das JavaScript-Programm in der Sprechblase dargestellt.

Will man nun den Text in dem title-Tag behübschen, muss man den Code wie folgt erweitern:
[code lang=“html“]
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://ewkil.at/scripts/jquery-ui-1.11.1.custom/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href=" http://ewkil.at/css/jquery-ui-themes-1.11.2/themes/le-frog/jquery-ui.min.css" />
<script>
// Formatierung aller Title-Tags zu einem ToolTip
$(function () {
$(document).tooltip({
track: true,
content: function () {
var element = $(this);
return element.attr("title");
}
});
});
</script>
Sa 04.Nov <span title=’Beginn: 16:00 Liga, 14. Runde, Djuricin, Muckenhammer (Merkur-Arena)‘><b>Sturm Graz – Rapid </b></span>
[/code]

Am Beginn der HTML-Seite, im Header-Teil muss inkludiert werden: jQuery, jQueryUI und einer aus vielen möglichen StyleSheets, im Beispiel „le Frog“, grün.

Der Script-Teil wurde aus den Beispielen der Homepage von jQueryUI kopiert.

Der HTML-Text selbst ist völlig unverändert. Die Funktion formatiert alle Tooltips, ganz egal in welchem Objekt sie liegen, wenn sie nur ein title-Tag haben.

---

Hinweise

• Alle hier in Klammen gesetzten Dateien findest Du auf der Seite http://sex.clubcomputer.at -> webseiten zum Ausprobieren.
• Die Beispiele in diesem Beitrag sind auch in einem Foliensatz zu finden.
• Beachte auch den Beitrag „Websprachen lernen“, in dem zahlreiche Links zu dem hier besprochenen Thema zu finden sind.