medani-pixel
news
21
Apr 10

jQuery Akkordeon

Um Ihnen einen Einblick in weit verbreitetes JavaScript – Framework zu geben, möchte ich Ihnen jQuery vorstellen. In der Programmierung dient ein solches zur Festlegung der Architektur, in der ein Programm oder eine Funktionalität erstellt wird.

Um Ihnen einen Einblick in ein weit verbreitetes JavaScript – Framework zu geben, möchte ich Ihnen jQuery vorstellen, welches von John Resig entwickelt wurde. Unter einem Framework können Sie sich ein Gerüst vorstellen, ähnlich wie es beim Bau von Gebäuden zum Einsatz kommt. In der Programmierung dient ein solches zur Festlegung der Architektur, in der ein Programm oder eine Funktionalität erstellt wird. Den Einsatz und die Möglichkeiten, die sich beim Einsatz von jQuery für Ihren Webauftritt bieten, möchte ich Ihnen in einer dreiteiligen Demonstration näherbringen.

Im ersten Teil wird die Installation von jQuery demonstriert, sowie wertvolle Tips & Tricks für die ersten Schritte erläutert. Sie können sich anhand hiervon überzeugen, dass wir stets mit dem „Puls der Technik“ schreiten, um Ihnen als Kunden  aktuellste Technologie und Know-How anbieten zu können.

In weiterer Folge erstellen wir ein aufklappbares Akkordeon, dass beispielsweise bei einer Ihrer Produktseiten zum Einsatz kommen kann. Ich möchte Ihnen zunächst das Endergebnis zeigen, damit Sie sich ein Bild machen können, welches Ziel diese Demonstration verfolgt.

jQuery

Ein JavaScript – FrameWork.

PHP

Eine serverseitige Programmiersprache.

CSS

Zur Trennung von Code und Design.

 

Wenn Sie hier auf „jQuery“, „PHP“ oder „CSS“ klicken sehen Sie, dass sich der jeweilige Bereich erweitert und Ihnen zuvor „versteckten“ Inhalt anzeigt.

Ich werde Ihnen nun Schritt für Schritt zeigen, wie die Erstellung eines solchen aufklappbaren Menüs aussieht.

Schritt 1 – das Grundgerüst

 

Um mit jQuery arbeiten zu können, benötigen Sie ein HTML (Hypertext Markup Language; Wikipedia) Grundgerüst. Dieses könnte folgendermaßen aussehen:

[code lang=“html“]<DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><br />
<html xmlns=“http://www.w3.org/1999/xhtml“><br />
<meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8″ /><br />
<title>jQuery Demonstration – Teil I</title><br />
<head><br />
</head><br />
<body><br />
</body><br />
</html>[/code]

Speichern Sie dieses in ein Verzeichnis Ihrer Wahl ab (Bsp.: jQuery/index.html).

Schritt 2 – das Einbinden von jQuery / jQuery UI

 

Um auf Ihrer Webseite DOM (Document Object Model; Wikipedia) – Manipulationen durchführen zu können, muss im zweiten Schritt jQuery eingebunden werden. Hierzu werden im HEAD – Bereich Ihres HTML – Grundgerüsts aus „Schritt 1“ die notwendigen JS (JavaScript; Wikipedia) Dateien angegeben, die inkludiert werden sollen.

Dies kann auf 2 Arten geschehen:

  • per Google APIs
  • per „Eigenhosting“

Die Einbindung via Google APIs bringt einige Vorteile mit sich:

  • durch das sogenannte „Caching“ (Zwischenspeichern, um bei einem erneuten Aufruf Inhalte schneller zur Verfügung zu stellen) sparen Sie sich Bandbreite – das Laden der Seite geht etwas schneller vonstatten.
  • Sie müssen sich nicht um Updates der jQuery Library kümmern, Google übernimmt das für Sie

Sollten Sie sich dazu entscheiden, Google APIs zu verwenden, so müssen Sie einen Google API Key registrieren, damit die Einbindung auf Ihrer Webseite funktioniert. Dieser eindeutige Key wird mit der URL (Uniform Resource Locator; Wikipedia) Ihrer Webseite verknüpft, Sie können also beispielsweise den hier verwendeten nicht benutzen!

„Eigenhosting“ bedeutet, dass Sie ein Kopie von jQuery auf Ihrem Server hosten und sich daher selbst um Updates kümmern müssen.

Für meine Demonstration verwende ich Variante I und erweitere den HEAD – Bereich wie folgt:

[code lang=“html“]<head><br />
<meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8″ /><br />
<title>jQuery Demonstration – Teil I</title><br />
<script src=“http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY“ type=“text/javascript“></script><br />
<script language=“Javascript“ type=“text/javascript“>
google.load(„jquery“, „1.4.2“);
google.load(„jqueryui“, „1.7.2“);
</script><br />
</head>[/code]

Wie Sie sehen können, beziehen wir neben jQuery (i.d.a.F 1.4.2) auch jQuery UI (i.d.a.F. 1.7.2), um auf vordefinierte Widgets (ein in der IT gebräuchliches Wort für „graphisches Element“ oder „graphisches Fenster“) zurückgreifen zu können. jQuery UI baut auf jQuery auf, daher ist es unbedingt notwendig, jQuery vor(!!) jQuery UI einzubinden !

Schritt 3 – das Styling

jQuery UI bietet komfortable Möglichkeiten, Styles (Informationen und Vorgaben zur Anzeige) aus einer Vielzahl von bereits vordefinierten Themen auszuwählen und einzubinden. Sie finden eine Übersicht aller Standard – jQuery UI – Styles im dazugehörigen Theme Roller.

Laden Sie sich ein Theme auf Ihren PC, extrahieren Sie die heruntergeladene (gepackte) .ZIP – Datei und navigieren Sie in den Unterordner /css. Dort befindet sich ein Unterordner mit dem Namen des von Ihnen gewählten Themes, welcher eine CSS (Cascading Style Sheet; Wikipedia) und einen Ordner /images beinhaltet. Kopieren Sie den Ordner /css in jenes Verzeichnis, in dem sich auch die HTML – Datei befindet, die Ihr HTML – Grundgerüst befindet (jQuery/).

Öffnen Sie nun wieder die HTML – Datei mit Ihrem HTML – Grundgerüst (jQuery/index.html) und erweitern den HEAD – Bereich wie folgt:

[code lang=“html“]<meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8″ /><br />
<title>jQuery Demonstration – Teil I</title><br />
<script src=“http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY“ type=“text/javascript“></script></p>
<p><script language=“Javascript“ type=“text/javascript“>
google.load(„jquery“, „1.4.2“);
google.load(„jqueryui“, „1.7.2“);
</script></p>
<link href=“css/jquery-ui-1.8rc2.custom.css“ rel=“stylesheet“ type=“text/css“ />
</head><br />
[/code]

Hierdurch binden Sie das CSS in ihre Webseite ein.

Schritt 4 – Die DIV Struktur des Inhaltes

Im vierten Schritt möchte ich Ihnen zeigen, wie ein möglicher DIV Aufbau aussehen könnte, um mit jQuery erfolgreich darauf zugreifen zu können. Hierzu erweitern wir den BODY – Bereich des HTML – Grundgerüsts (jQuery/index.html) wie folgt:

[code lang=“html“]<br />
<body></p>
<div class=“jQuery_demo_container“ style=“width: 400px; height: auto;“>
<div id=“jQuery_demo“>
<h3><a href=“#“>jQuery</a></h3>
<div>Ein JavaScript – FrameWork.</div>
<h3><a href=“#“>PHP</a></h3>
<div>Eine serverseitige Programmiersprache.</div>
<h3><a href=“#“>CSS</a></h3>
<div>Zur Trennung von Code und Design.</div>
</div>
</div>
<p></body><br />
[/code]

Das DIV „jQuery_demo_container“ umschließt das DIV „jQuery_demo“ und definiert Styling Informationen zur Breite (400 Pixel) und Höhe (automatisch).

Schritt 5 – Erzeugen des Akkordeons

Um nun per jQuery / jQuery UI das DOM manipulieren zu können, bedarf es nun nur noch einer kleinen Erweiterung des HEAD – Bereichs des HTML – Grundgerüsts:

[code lang=“html“]<head><br />
<meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8″ /><br />
<title>jQuery Demonstration – Teil I</title><br />
<script src=“http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY“ type=“text/javascript“></script><br />
<script language=“Javascript“ type=“text/javascript“>
google.load(„jquery“, „1.4.2“);
google.load(„jqueryui“, „1.7.2“);
</script></p>
<p><script type=”text/javascript”>
$(document).ready(function() {
$(„#jQuery_demo“).accordion();
});
</script></p>
<p></head>[/code]

Sie beauftragen jQuery der ID „jQuery_demo“ (nach dessen Initialisierung) ein Akkordeon anzufügen und damit den oben gezeigten Effekt zu erzielen.

Komplett

[code lang=“html“]<br />
<DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><br />
<html xmlns=“http://www.w3.org/1999/xhtml“><br />
<meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8″ /><br />
<title>jQuery Demonstration – Teil I</title><br />
<head><br />
<meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8″ /><br />
<title>jQuery Demonstration – Teil I</title><br />
<script src=“http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY“ type=“text/javascript“></script><br />
<script language=“Javascript“ type=“text/javascript“>
google.load(„jquery“, „1.4.2“);
google.load(„jqueryui“, „1.7.2“);
</script></p>
<p><script type=”text/javascript”>
$(document).ready(function() {
$(„#jQuery_demo“).accordion();
});
</script><br />
</head><br />
<body></p>
<div class=“jQuery_demo_container“ style=“width: 400px; height: auto;“>
<div id=“jQuery_demo“>
<h3><a href=“#“>jQuery</a></h3>
<div>Ein JavaScript – FrameWork.</div>
<h3><a href=“#“>PHP</a></h3>
<div>Eine serverseitige Programmiersprache.</div>
<h3><a href=“#“>CSS</a></h3>
<div>Zur Trennung von Code und Design.</div>
</div>
</div>
<p></body><br />
</html></p>
<p>[/code]

Damit möchte ich den ersten Teil der jQuery Demonstration abschließen. Im nächsten Teil werde ich Ihnen zeigen, wie Sie Ihr erstelltes Akkordeon individualisieren können!

– Christian Singer, BSc ( Anfrage )

SENDEN
SENDEN