PC Magazin Premium XXL Windows Extreme (Vorschau)

122
IT PROFeSSIOnal
webtechnik
PROFITIPPS
accordeon und Flyouts
Kostenlos und mächtig ist es, das beliebte JavaScript-Framework
jQuery. Das CSS3-kompatible, seit 2008 von Microsoft und Nokia
unterstützte Framework richtet sich an Web-Entwickler, die damit
verblüffende Effekte und Animationen erzeugen.
von RuTh WInkleR
JQuery ist ein freies, umfangreiches JavaScript-Framework, das
komfortable Funktionen zur DOM-Manipulation und -Navigation
bereit stellt. Das Grundgerüst von jQuery besteht aus einer
JavaScript-Datei, in der alle grundlegenden DOM-, Event-, Effektund
Ajax-Funktionen enthalten sind. Insbesondere in Verbindung
mit JQuery-UI (UI = user interface) lassen sich verblüffende Effekte
und Animationen schnell und einfach erzeugen. Die jeweils aktuelle
JQuery-Version kann von der offiziellen JQuery-Seite unter http://
jquery.com heruntergeladen werden.
Unter http://jqueryui.com/download finden Sie die jeweils neueste
Version der UI-Bibliothek.
jQuery wird in HTML-Dateien eingefügt. Kopieren Sie die geladenen
Dateien in das Stammverzeichnis Ihrer Webseite und inkludieren
Sie die js-Dateien mit folgendem Verweis in Ihrer HTML-Datei:
$(document).ready(function() {
// Hier steht Ihr individueller JavaScript-Code
Fügen Sie erst folgende Code-Zeile im JavaScript-Bereich ein:
$(document).ready(function() {
Damit wird dafür gesorgt, dass die JQuery-Funktionen erst dann ausgeführt
werden, wenn die Seite vollständig geladen ist.
Tipp 1
Objekte verschieben
identisch sein. Dazu genügt folgende kurze Anweisung:
$(„#container“).draggable();
Dank der Funktion draggable können Sie Objekte auf der Webseite
mit der Maus verschieben.
Erstellen Sie im Body Ihrer HTML-Datei einen DIV-Container und vergeben
Sie die ID draggable. Diese ID ist in der Bibliothek von JQuery-
UI bereits mit der entsprechenden Funktion hinterlegt.
Unsere Test-Box
Definieren Sie die Style-Anweisungen im Head-Bereich des HTML-
Dokuments oder in der CSS-Datei Ihrer Webseite. Achten Sie darauf,
dass die ID des DIV-Containers und die ID der CSS-Klasse übereinstimmen.
Die Cursor-Angabe dient dem Anwender dazu, die Möglichkeit
des Verschiebens
zu erkennen.
#draggable {
cursor: move;
}
Einfache Spielerei oder sinnvoller Effekt:
Verschiebbare Objekte auf der Webseite lassen
sich vielfältig nutzen, z.B. für Hinweise,
Werbeplatz oder als Navigationselement.
text-align:
center;
height: 100px;
width: 200px;
cursor: move;
}
Nun fehlt noch der
Aufruf der Funktion im
JavaScript-Bereich im
Head der HTML-Datei.
Auch hier muss der
verwendete ID-Name
Tipp 2
Accordeon sorgt für Übersicht
Das Accordion bietet sich zur Menüführung und zum übersichtlicheren
Gestalten langer Texte auf Internetseiten an.
Lediglich der Hauptnavigationspunkt bzw. die Überschrift eines längeren
Textes sind auf der Seite sichtbar..
Dafür erstellen Sie im Body-Bereich des HTML-Dokuments eine Liste
und geben dem UL-Tag eine ID.
Überpunkt/Überschrift
Unterpunkt/Absatz
Unterpunkt/Absatz
Überpunkt/Überschrift
Unterpunkt/Absatz
Unterpunkt/Absatz
Die Funktion definieren Sie hier per JQuery im Head-Bereich Ihrer
HTML-Datei. Achten Sie auch darauf, dass die IDs der Liste und der
JavaScript-Funktion übereinstimmen.
$(‚#accordeon li ul‘).hide();
$(‚#accordeon li:first‘).children(‚ul‘).show();
PC Magazin 10/2011 www.pc-magazin.de