Lars Schmidt Know-how ist blau. jQuery in der Praxis > Das JavaScript-Framework im täglichen Programmiereinsatz > Animation und Effekte, Ajax und JSON > Navigationsmenüs mit jQuery realisieren Erleichtern Sie sich die Webseitenprogrammierung mit dem erfolgreichsten JavaScript-Framework!
33
Embed
jQuery in der Praxis - Leseprobe - ciando ebooks · dem Document Object Model (DOM) und Cascading Style Sheets (CSS) funktioniert, wie jQuery für Ajax-Anwendungen eingesetzt wird
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Lars SchmidtKnow-how
ist blau.
jQuery in der Praxis
> Das JavaScript-Framework im täglichen Programmiereinsatz
> Animation und Effekte, Ajax und JSON
> Navigationsmenüs mit jQuery realisieren
Mit jQuery wird die Programmierung von Webanwendungen
radikal vereinfacht. Diese JavaScript-Klassenbibliothek erleichtert
unter anderem die Manipulation von Webseiten-Elementen,
die Entwicklung von Ajax-Applikationen sowie das Erzeugen
von Animationen. Lars Schmidt zeigt in diesem Buch anhand
von Beispielen aus der Praxis, wie das Zusammenspiel mit
dem Document Object Model (DOM) und Cascading Style
Sheets (CSS) funktioniert, wie jQuery für Ajax-Anwendungen
eingesetzt wird und wie Sie Ihre Webseiten mit auffälligen
Effekten und Funktionen ausstatten.
� Effekte und Animationen mit jQueryMittlerweile werden HTML-Elemente oft per Sliding auf Webseiten
ein- und ausgefahren bzw. per Fading ein- und ausgeblendet. Mit dem
Easing bietet jQuery darüber hinaus einen Parameter, der besondere
Einstellmöglichkeiten für einen spektakulären benutzerdefinierten
Animationsverlauf bietet. Die besonderen grafischen Darstellungen in
diesem Buch zeigen Ihnen, wie sich die jeweiligen Einstellungen auf
den Verlauf der Animation auswirken.
� Warenkorb mit Drag and DropIntuitive Bedienung bedeutet bei einem Warenkorb, dass man die Produkte
mit einem Mausklick aufnimmt und über dem virtuellen Warenkorb wieder
fallen lässt. Wie dies mit jQuery realisiert wird und auch das Sortieren
von Produktlisten mit Drag and Drop erfolgen kann, zeigen Ihnen die
Beispiele in diesem Buch.
� Google Maps einbinden mit zusätzlichen FunktionenEine eingebundene Karte von Google Maps ist auf vielen Webseiten eine
Selbstverständlichkeit. Aber diese Karte mit zusätzlichen Funktionen
auszustatten, z. B. einer eigenen Entfernungsmessung für die Verbindung,
gehört zu den Besonderheiten, die Ihre Webseite auffällig machen. Hier
wird gezeigt, wie Sie solche Funktionalitäten mit Hilfe von jQuery erzeugen.
Aus dem Inhalt:• Was ist jQuery?
• Was kann jQuery?
• Die Entwicklungsumgebung einrichten
• jQuery einbinden
• Erste Erfolge an kleinen Beispielen
• Die Selektoren
• Das jQuery-Objekt
• Manipulieren von Elementeigenschaftenmittels jQuery-Methoden
• Formulare und jQuery
• Ajax und JSON
• Ereignisse: Events und Event Handling
• Animationen und Effekte: Sliding, Fading,Easing
• Das jQuery UI
• Drag and Drop
• Einen Warenkorb mit Drag and Drop erstellen
• Mehrstufige Navigationsmenüs
• Google Maps mit jQuery nutzen
• Eine Live-Suche als jQuery-Plug-in realisieren
• Tipps und Tricks
Über den Autor:IT-Profi Lars Schmidt ist seit 1995 als Software-entwickler in unterschiedlichen Unternehmentätig. Daneben hat er immer wieder auch eigene Software-Produkte entwickelt, z. B. die Audio-Software „Sonoscope“ für die Real-Time-Spektrum-Analyse, und Fachbeiträge inZeitschriften veröffentlicht. Sein Schwerpunktliegt seit einigen Jahren auf den Themen derWebentwicklung.
Auf www.buch.cdDer komplette Beispielcode aus dem Buch zum Download.
Lars Schmidt
30,– EUR [D]
ISBN 978-3-645-60100-9
Besuchen Sie unsere Website
www.franzis.de
Erleichtern Sie sich die Webseitenprogrammierung mit dem erfolgreichsten JavaScript-Framework!
Schm
idt
Web-Entwicklung
jQue
ry in
der
Pra
xis
jQuery in der Praxis
60100-9 U1+U4 03.07.12 15:57 Seite 1
Lars Schmidt
jQuery in der Praxis
60100-9 Titelei 03.07.12 16:00 Seite 1
jQuery
Mit 88 Abbildungen
Lars Schmidt
60100-9 Titelei 03.07.12 16:00 Seite 3
Bibliografische Information der Deutschen Bibliothek
Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;
detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.
Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer
Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen,
darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte
Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen
oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei
Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder
zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung
ist nur mit Zustimmung des Lizenzinhabers möglich.
Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und
Verbreiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des
Verlags gestattet und wird widrigenfalls strafrechtlich verfolgt.
Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden,
sind in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produkt-
bezeichnungen im Wesentlichen den Schreibweisen der Hersteller.
Lektorat: Anton Schmid
Satz: DTP-Satz A. Kugge, München
art & design: www.ideehoch2.de
Druck: GGP Media GmbH, Pößneck
Printed in Germany
ISBN 978-3-645-60100-9
60100-9 Titelei 03.07.12 16:00 Seite 4
5
Inhaltsverzeichnis
1 jQuery kennenlernen ..................................................................................... 7 1.1 Was ist jQuery? ................................................................................ 7 1.2 Was kann jQuery?........................................................................... 16 1.3 Warum jQuery?............................................................................... 16
2 Einrichten der Entwicklungsumgebung ........................................................ 19 2.1 Betriebssystem(e) .......................................................................... 19 2.2 Die jQuery-Library .......................................................................... 19 2.3 Editoren und IDEs ........................................................................... 20 2.4 Browser.......................................................................................... 27 2.5 Webserver ...................................................................................... 28 2.6 Tipps zur Arbeit mit XAMPP ............................................................ 35
3 Aller Anfang ist »leicht«! – der Einstieg mit jQuery....................................... 43 3.1 jQuery einbinden............................................................................ 43 3.2 Erste Erfolge an kleinen Beispielen................................................. 44 3.2.1 Alte Bekannte? – Die Selektoren ...................................................... 48
4 Es geht ans Eingemachte! – Die Funktionen von jQuery................................ 57 4.1 Das jQuery-Objekt .......................................................................... 57 4.2 Die Funktion $() .............................................................................. 60 4.3 Manipulieren von Elementeigenschaften mittels jQuery-
Selektoren und -Methoden............................................................. 61 4.3.1 Lesen und Ändern von Attributen ..................................................... 63 4.3.2 Elemente positionieren und formatieren – die CSS-
Eigenschaften .................................................................................. 64 4.3.3 Aufheben einer Selektion................................................................. 71 4.3.4 Zuweisen von Text- und Elementinhalt ............................................. 72 4.3.5 Formulare und jQuery....................................................................... 94 4.3.6 Ajax und JSON.................................................................................. 95
6 Fades, Slides & Co – Animationen und Effekte ........................................... 123 6.1 Anzeigen und Verbergen .............................................................. 124 6.2 Anzeigestatus per Animation verändern ....................................... 125 6.2.1 Sliding – Bewegtes Ein- und Ausblenden ....................................... 125 6.2.2 Fading – Verändern der Transparenz.............................................. 127 6.2.3 Benutzerdefinierte Animationen .................................................... 128 6.2.4 Der Animationsverlauf – easing ..................................................... 132
7 Setzen Sie Ihr gelerntes Wissen ein – jQuery in der Praxis ......................... 139 7.1 Drag and Drop .............................................................................. 139 7.1.1 Das jQuery User Interface (jQuery UI) im Überblick ......................... 151 7.1.2 Artikel per Drag and Drop in den Warenkorb legen ......................... 156 7.1.3 Sortieren per Drag and Drop........................................................... 182 7.2 Navigationsmenüs ....................................................................... 191 7.2.1 Mehrstufige Navigationsmenüs ..................................................... 192 7.2.2 Menüs dynamisch verwalten.......................................................... 197 7.3 Google Maps mit jQuery nutzen.................................................... 204 7.4 Die »Live-Suche« – Ein Plug-in mit jQuery realisieren ................... 227
8 Anhang...................................................................................................... 237 8.1 HTML, X[HT]ML & CSS................................................................... 237 8.2 XPath ........................................................................................... 239 8.3 Tipps & Tricks............................................................................... 239 8.3.1 Browser und dessen Fähigkeiten erkennen .................................... 239 8.3.2 jQuery ohne Konflikte mit anderen Librarys benutzen .................... 243 8.3.3 Das »Ready«-Ereignis von jQuery verzögern ................................... 243 8.4 jQuery-Kurzreferenz (Version 1.7.2).............................................. 244 8.5 Nützliche Links............................................................................. 249
3 Aller Anfang ist »leicht«! – der Einstieg mit jQuery
3.1 jQuery einbinden
Um jQuery nutzen zu können, muss die Library in Ihr Projekt eingebunden werden. Das können Sie auf verschiedene Arten tun – entweder von Ihrem Server bzw. einem lokalen Ordner auf Ihrer Festplatte (falls eine Internetverbindung zunächst nicht nötig ist), oder Sie benutzen zum Beispiel die bei Google CDN (Content Distribution Net-work, oder auch Content Delivery Network) gehostete Version. Letzteres kann in eini-gen Fällen von Vorteil sein, da die Library von vielen Internetseiten genutzt wird und sich meistens schon im Browser-Cache befindet. Außerdem entstehen Ihnen keine zusätzlichen Kosten für übertragene Datenvolumen.
Die Einbindung von jQuery ist denkbar einfach und funktioniert analog zu anderen JavaScript-Datei, wie die folgenden Quellcode-Ausschnitte zeigen:
jQuery steht in zwei Varianten zur Verfügung – in einer minimierten Version und in einer »unkomprimierten« Version. Minimiert bezieht sich hier keinesfalls auf den Umfang oder die Leistung der Library, sondern einzig und allein auf die Dateigröße – so wurde hier auf jegliche Art von Whitespace und Kommentaren verzichtet. Das macht natürlich den Quellcode unleserlicher und schwerer nachvollziehbar. Deshalb ist es während der Entwicklung ratsam, die unkomprimierte Version zu benutzen, damit das Debuggen eventueller JavaScript-Fehler leichter fällt.
Für das endgültige Projekt empfehle ich Ihnen die minimierte Version von jQuery zu nutzen, da diese wesentlich kleiner und somit auch sehr viel schneller geladen ist (zum Vergleich: bei der momentan aktuellen Version 1.7 sind es 31 Kilobyte zu 229 Kilobyte)
44 Kapitel 3: Aller Anfang ist »leicht«!
3.2 Erste Erfolge an kleinen Beispielen
Zunächst wollen wir unser HTML-Grundgerüst betrachten. Auch wenn jeder sich nach HTML5 sehnt, so wird es momentan von den Browsern doch noch nicht komplett unterstützt (es gibt einige interessante Erweiterungen, aber dazu mehr in Kapitel 8). Um dennoch möglichst zukunftssicher und kompatibel zu bleiben, werden wir in all unseren Beispielen den XHTML-Standard mit dem Zeichensatz UTF-8 verwenden (aufgrund der besseren Überschaubarkeit schreibe ich jedoch in den weiteren Beispiel-Listings hier im Buch nur das <html>-Tag!).
Wenn wir von Anfang an mit UTF-8 arbeiten, hat das den großen Vorteil, dass Sie später ohne große Probleme die Möglichkeit haben, Mehrsprachigkeit in Ihre Projekte einzubauen und auch die entsprechende Schriftkultur wie zum Beispiel kyrillische, arabische oder chinesische bzw. japanische Schriftzeichen richtig darstellen können. Dabei müssen natürlich noch einige Punkte mehr beachtet werden, aber dies soll ja hier erst einmal eine Vorbereitung, also ein solides Grundgerüst, sein. So muss bei der Datenbank die Kollation der Tabellen und auch die Kollation der Verbindung auf UTF-8 eingestellt werden. Ein wichtiger Punkt ist allerdings direkt zu berücksichtigen: Wir müssen darauf achten, dass wir unsere Dateien auch im UTF-8 Format abspeichern, was aber mit den zuvor genannten Editoren kein Problem darstellt. Hier ein Beispiel unserer HTML-Vorlage:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
• jetzt kommen die Körper- bzw. Rumpfdaten, also der eigentliche Inhalt der Seite wie Texte, Bilder, Links, usw.
<body>
… hier steht der anzuzeigende Inhalt …
</body>
• zum Schluss muss noch unser <html>-Tag von der Dokumenttyp-Deklaration wieder geschlossen werden.
</html>
Tipp: Der Header-Bereich (<head>..</head>) wird auf der Seite selbst nicht angezeigt, er kann (optional) Definitionen und Anweisungen für Web-Server, Web-Browser oder auch Suchmaschinen enthalten, die über die sogenannten Meta-Angaben gemacht werden. Diese können auch Angaben zum Autor und zum Inhalt der Datei enthalten oder HTTP-Befehle absetzen und so zum Beispiel den Web-Browser auto-matisch zu einer anderen Adresse weiterleiten. Des Weiteren können auch Anweisungen über das Erscheinungsbild in Form von CSS-Angaben, sowie JavaScript-Definitionen im Header-Bereich stehen.
Nun gilt es noch zu klären, wo eigentlich der »Entry Point« (Eingangspunkt) von jQuery ist. Sicherlich ist Ihnen von der Arbeit mit »normalem« JavaScript Folgendes bekannt:
window.onload = function() {
alert("Das Dokument ist nun vollständig geladen.");
}
Hier wird window.onload aber erst aufgerufen, wenn ausnahmslos alle Elemente des Dokuments geladen sind – also auch alle Bilder, Styles und so weiter, was unter Umständen schon mal ein wenig länger dauern kann. Hier bietet jQuery eine Methode, die bereits nach dem Laden des DOM zur Verfügung steht. Das heißt, sobald also das HTML-Dokument geladen und der DOM-Baum fertig aufgebaut ist, sind alle Elemente der Seite ansprechbar beziehungsweise der Quellcode ist ausführbar, auch wenn noch nicht alle Objekte, wie eben die Bilder, geladen sind.
3.2 Erste Erfolge an kleinen Beispielen 47
$(document).ready( function() {
alert("Der DOM-Baum ist nun fertig aufgebaut und alle
Elemente können selektiert werden.");
} );
Die Funktion $(document).ready() macht es uns auch möglich, die gesamte JavaScript-Programmierung in den Header-Bereich zu verlagern und ausschließlich den Seitenauf-bau mit dem eigentlichen Inhalt (HTML) im Body-Bereich zu notieren. Auf diese Weise erhält man eine gewisse Ordnung und auch Übersichtlichkeit, und man hat vor allem Logik und Inhalt klar getrennt.
Machen wir uns die kurz klar, indem wir versuchen, das folgende Beispiel mit »norma-lem« JavaScript-Code auszuführen:
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=UTF-8" />
<script type="text/javascript">
alert(document.getElementById("content")
.innerHTML);
</script>
</head>
<body>
<div id="content">hier steht unser Inhalt!</div>
</body>
</html>
Vorhin hatte ich erwähnt, dass es wünschenswert ist, auch die gesamte Logik im Header-Bereich vorzufinden. Aus den oben genannten Gründen funktioniert dies aber in der Praxis leider nicht immer so mit dem »normalen« JavaScript-Part, da HTML-Elemente, auf die man eventuell zugreifen möchte, an dieser Stelle (im Header) noch nicht im Browser-Speicher verfügbar gemacht wurden, d. h., sie existieren zu diesem Zeitpunkt noch nicht für JavaScript.
Tipp: Die .ready()-Funktion wird ausgeführt, sobald das DOM fertig aufgebaut ist, unabhängig davon, ob alle Objekte zu diesem Zeitpunkt schon geladen sind. Sie ist allerdings nicht kompatibel mit dem <body onload="">-Attribut. Wenn dieses aus irgendeinem Grund genutzt werden muss, sollte .ready() nicht zusätzlich genutzt werden. Hier kann allerdings die .load()-Methode zum Einsatz kommen, um Load Event Handler an das window-Objekt oder andere Elemente zu binden.
48 Kapitel 3: Aller Anfang ist »leicht«!
3.2.1 Alte Bekannte? – Die Selektoren
Und damit sind wir auch schon bei den »Selektoren«. Diese spielen beim Programmie-ren mit jQuery eine wichtige Rolle und stellen gleichzeitig auch eine der größten Stärken der Library dar. Wenn Sie Selektoren vielleicht schon von der Arbeit mit CSS kennen, werden Sie sofort mit den jQuery-Selektoren vertraut sein und auch schnell Ihre Freude daran haben. Die Syntax der jQuery-Selektoren basiert nämlich zum großen Teil auf den CSS-Selektoren (CSS 1-3) und gerade bei der CSS-3-Kompatibilität hat jQuery zum Teil noch einen großen Vorsprung vor mancher Browser-Implementierung.
Um ein Element beziehungsweise eine Gruppe von Elementen zu selektieren, benutzen wir folgende Syntax:
jQuery(Selektor)
oder kurz
$(Selektor)
Als Nächstes möchten wir mit unserem selektierten Element noch etwas machen. Dazu hängen wir noch eine entsprechende Funktion an (konkret wird dann das gefundene Element an die folgende Funktion übergeben):
jQuery(Selektor).Funktion()
oder
$(Selektor).Funktion()
Tipp – das Grundprinzip von jQuery ist also denkbar einfach:
• finde HTML-Elemente im DOM-Baum
• mach etwas damit
Fangen wir mit einem kleinen Beispiel an, indem wir einfach einmal die Formatierung eines Elements mit einer bestimmten ID ändern wollen:
jQuery("#meineID").css({color: 'Farbwert'})
<html>
<head>
<style type="text/css">
<!--
Body {
text-align: center;
}
#infotext {
width: 200px;
3.2 Erste Erfolge an kleinen Beispielen 49
text-align: center;
margin: auto auto;
}
-->
</style>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#button1").bind('click', function() {
$("#infotext").css({color: '#ff0000'});
});
});
//]]>
</script>
</head>
<body>
<div id="infotext">
Lorem ipsum dolor sit amet consectetuer sed quis …
Bild 3.2: Formatierung nach Änderung (Die Schrift ist nur rot)
In diesem Beispiel haben wir auch gleich einen jQuery-Event-Handler kennengelernt (mehr dazu in Kapitel 5):
$("#button1").bind('click', function() {
…
});
Hier »binden« wir ein Ereignis, in unserem Fall das Maus-»click«-Ereignis, an ein Element: Hier ist es unser Button (button1). Was bei dem »click« passieren soll, ist wiederum in einer eigenen Funktion gekapselt, und diese ändert in unserem Beispiel die Farbe des Elements mit der ID »infotext« über eine CSS-Zuweisung:
$("#infotext").css({color: '#ff0000'});
Mit einem weiteren Beispiel möchten wir alle Links innerhalb von div-Elementen selek-tieren. Unser Selektor dafür würde dann folgendermaßen aussehen:
jQuery("div a")
<html>
<head>
<style type="text/css">
<!--
body
{
text-align: center;
}
.linksindiv {
color: #FF0000;
background-color: #FFF;
3.2 Erste Erfolge an kleinen Beispielen 51
display: block;
border-bottom: 1px dotted #FF0000;
text-decoration: none;
width: 300px;
text-align: center;
margin: 10px auto 10px auto;
}
-->
</style>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("div a").addClass("linksindiv");
});
//]]>
</script>
</head>
<body>
<div>
<a href="#">Dieser Link befindet sich in einem
DIV-Element</a>
</div>
<div>
<a href="#">Dieser Link ebenfalls</a>
</div>
<p><a href="#">Dieser Link nicht mehr</a></p>
</body>
</html>
Bild 3.3: Spezielle Formatierung für Links innerhalb von div-Elementen
52 Kapitel 3: Aller Anfang ist »leicht«!
Darüber hinaus bietet jQuery auch noch einige Pseudo-Selektoren beziehungsweise Filter. Mit diesen lassen sich beispielsweise nur eine bestimmte Gruppe von Elementen auswählen oder auch sehr schnell alle geraden bzw. ungeraden Zeilen einer Tabelle selektieren und einfärben, wie die folgenden kleinen Codeausschnitte zeigen:
$(":input") – Alle Input-Elemente werden selektiert
Hier binden wir das »change«-Ereignis an eine Checkbox mit der ID »toggleActive«. Wenn diese das Attribut checked aufweist (also gesetzt ist), dann bekommen alle Input-Elemente innerhalb des Blocks myInputs das Attribut disabled mit dem Wert true (deaktiviert). Andernfalls wird bei den entsprechenden Input-Elementen das Attribut disabled entfernt, und diese sind somit wieder aktiv.
$("#toggleActive").bind("change", function() {
if ($('#toggleActive').is(':checked')) {
$("#myInputs :input").attr("disabled", true);
} else {
54 Kapitel 3: Aller Anfang ist »leicht«!
$("#myInputs :input").removeAttr('disabled');
}
});
Alle geraden Zeilen einer Tabelle werden gefärbt
$("tr:even").css("background-color", "Farbwert");
<html>
<head>
<style type="text/css">
<!--
body
{
text-align: center;
}
-->
</style>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#tabelle_1 tbody tr:even").css("background-
color", "gray");
});
//]]>
</script>
</head>
<body>
<table id="tabelle_1" rules="groups" border="0"
span="0" style="border-spacing:0px; margin:0;
padding:0">
<colgroup>
<col width="200">
<col width="200">
<col width="50">
</colgroup>
<thead>
<tr> <th>Titel</th> <th>Interpret</th>
<th>Jahr</th> </tr>
</thead>
<tbody>
<tr> <td>The Wall</td> <td>Pink Floyd</td>
<td>1979</td> </tr>
<tr> <td>Some Great Reward</td> <td>Depeche
Mode</td> <td>1984</td> </tr>
<tr> <td>The Anvil</td> <td>Visage</td>
3.2 Erste Erfolge an kleinen Beispielen 55
<td>1982</td> </tr>
<tr> <td>Blue Planet</td> <td>Moskwa TV</td>
<td>1987</td> </tr>
<tr> <td>A Secret Wish</td> <td>Propaganda</td>
<td>1985</td> </tr>
</tbody>
</table>
</body>
</html>
Bild 3.6: Formatierte Tabelle
Hier selektieren wir alle geraden Tabellenzeilen (tr:even – der Index beginnt bei 0!) innerhalb des tbody von der Tabelle mit der ID »tabelle_1« und ändern die Hinter-grundfarbe mittels CSS-Zuweisung in Grau.
$("#tabelle_1 tbody tr:even").css("background-
color", "gray");
237
8 Anhang
8.1 HTML, X[HT]ML & CSS
HTML (Hypertext Markup Language = Hypertext-Auszeichnungssprache) ist eine auf SGML (Standard Generalized Markup Language) basierende Auszeichnungssprache, die es möglich macht, Dokumente in einer bestimmten Struktur in Bezug auf Inhalt und Formatierung darzustellen. Diese Strukturierung wird durch sogenannte Tags (Markierungen, Kennzeichnungen) erreicht, die in der Regel den zu strukturierenden Inhalt umhüllen (d. h. es gibt ein Start- und ein dazugehöriges End-Tag). Darüber hinaus gibt es auch noch einige spezielle Tags, mit denen erweiterte Zusammenhänge des Dokuments beschrieben werden können (siehe Kapitel 3.2). Die Tags selbst werden von spitzen Klammern umgeben, wobei die End-Tags zusätzlich noch einen Slash (/) vorangestellt bekommen. Nachfolgend einige kurze Beispiele:
XML (Extensible Markup Language = erweiterbare Auszeichnungssprache) ist eine Auszeichnungssprache, die Text-Daten in hierarchisch strukturierter Form darstellen kann. XML wird unter anderem auch für den plattformunabhängigen Datenaustausch genutzt. Bei XML-Dokumenten gelten (anders als bei HTML) verschärfte Regeln, die eingehalten werden müssen. So muss ein XML-Dokument stets »wohlgeformt« (well-formed) sein, d. h., es muss zum Beispiel zu jedem Start-Tag auch ein abschließendes End-Tag existieren. Zudem muss am Anfang die Deklaration stehen, die den Bezug zu XML herstellt. Es muss genau ein Wurzelelement existieren (das ist das äußerste Element, das alle weiteren Datenelemente enthält – in unserem Beispiel <ADRESSDATENBANK>) und mindestens ein Datenelement (im Beispiel haben wir zwei <ADRESSE>). Ein XML-Kommentar wird genau so geschrieben wie in HTML (genauer gesagt wie in SGML, da HTML ja darauf basiert). Ein Beispiel in Form einer kleinen Adressdatenbank soll dies verdeutlichen:
<!-- XML-Deklaration -->
<?xml version="1.0"?>
<!-- Wurzelelement -->
<ADRESSDATENBANK>
<!-- 1. Datenelement -->
<ADRESSE>
238 Kapitel 8: Anhang
<VORNAME>Hans</VORNAME>
<NACHNAME>Mustermann</NACHNAME>
<STRASSE>Musterstraße 1</STRASSE>
<PLZ>12345</PLZ>
<ORT>Musterstadt</ORT>
</ADRESSE>
<!-- 2. Datenelement -->
<ADRESSE>
<VORNAME>Josef</VORNAME>
<NACHNAME>Müller</NACHNAME>
<STRASSE>Müllerweg 1</STRASSE>
<PLZ>54321</PLZ>
<ORT>Müllerstadt</ORT>
</ADRESSE>
</ADRESSDATENBANK>
Bei XHTML (Extensible HyperText Markup Language = erweiterbare HTML) handelt es sich um eine auf XML-basierende Neuformulierung von HTML 4.01 (im Gegensatz zu HTML, was ja durch SGML definiert ist). Das heißt, alle Elemente von HTML 4.01 sind auch hier enthalten, aber die Syntax von XHTML orientiert sich eher an der Syntax von XML und natürlich auch deren Regeln im Bezug auf »Wohlgeformtheit« und so weiter.
Seit einiger Zeit kommt immer wieder die Diskusion auf, welches der bessere Standard für Internetseiten ist: HTML oder XHTML. Ich kann mich noch an Zeiten erinnern, als es hieß, dass HTML 4.01 wohl die letzte (reine) HTML-Version sei und in Zukunft wohl XHTML (also HTML mit XML) der Standard wird. Dies ist aber dann doch nicht so gekommen. Mit XHTML 2.0 gab es wohl nicht den gewünschten Durchbruch, und HTML5 ist ja auch schon da.
HTML5 ist eine Weiterentwicklung von HTML 4.01, XHTML 1.0 und DOM Level 2 HTML, in der man jeweils die Vorzüge dieser Technologien zusammengeführt hat. Es gibt auch einige vielversprechende Neuerungen, wie zum Beispiel das Canvas-Element – eine Zeichenfläche, die das dynamische Rendern von Bitmap-Grafiken erlaubt. Ebenfalls erwähnenswert ist die einfache Einbindung von SVG (Scalable Vector Graphics) und MathML (Mathematical Markup Language). Auch in Sachen Multimedia gibt es Vereinfachungen, denn hier erlauben die neuen Elemente Audio und Video eine leichte Einbindung dieser Daten.
Ebenso gibt es im Bezug auf die Notation einige neue Freiheiten, die aber eher als frag-würdig einzustufen sind (und zum Glück keine zwingende Vorschrift). So kann auf die Einhaltung von wohlgeformten Tags weitgehend verzichtet werden, und auch die umschließenden Anführungszeichen bei Attributwerten darf man weglassen. Meiner Meinung nach ist das ein Schritt in die falsche Richtung und regt eher ein wenig zum »Pfusch« an. Aber, na ja – spätestens wenn man Inhalte parsen muss, um diese beispiels-weise in ein anderes Format zu konvertieren, wird einem wohl schnell bewusst, dass wohlgeformte Dokumente letztendlich einen Vorteil darstellen.
8.2 XPath 239
8.2 XPath
Bei XPath (XML Path Language) handelt es sich um eine Abfragesprache, die dazu dient, die Knoten (oder auch Knotenmengen) eines XML-Dokuments über sogenannte Lokalisierungspfade zu adressieren. Das kann über die ausführliche oder verkürzte Notation erfolgen. Außerdem sind die Knoten eines XML-Dokuments sowohl mit rela-tiven als auch mit absoluten Pfaden adressierbar.
8.3 Tipps & Tricks
8.3.1 Browser und dessen Fähigkeiten erkennen
jQuery kümmert sich bei den meisten Angelegenheiten selbst um die Browser-Unter-schiede und gleicht diese aus (Cross-Browser-Fähigkeit). Sollte es aus irgendwelchen Gründen aber doch einmal notwendig sein, den verwendeten Browser explizit zu erken-nen, gibt es dafür viele verschiedene Möglichkeiten, von denen ich Ihnen hier einige vorstellen möchte.
Am Ende des Kapitels 1.1 haben wir in unserem Ajax-Beispiel (Pures JavaScript) bereits eine dieser Möglichkeiten kennengelernt, nämlich den benutzten Browser anhand der unterschiedlichen Implementierung des XMLHttpRequest-Objektes zu erkennen und entsprechend darauf zu reagieren.
var xmlHttp = null;
// Mozilla, Opera, Safari sowie Internet Explorer 7
if (typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
// Internet Explorer 6 und älter
if (!xmlHttp) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = null;
}
}
} if (xmlHttp != null) {
...
}
240 Kapitel 8: Anhang
Eine weitere Möglichkeit ist die Abfrage des JavaScript-Objektes »Navigator«, das unter anderem folgende Informationen über den Browser liefert:
appCodeName � Code-Name des Browsers
(z. B. Mozilla; Vorsicht, der IE liefert hier auch Mozilla!)
appName � Name des Browsers (z. B. Netscape)
appVersion � Version des Browsers (z. B. 5.0 (Windows) )
cookieEnabled � sind Cookies erlaubt? (true oder false)
language � Standard-Sprache des Browsers (z. B. de-DE)
platform � das System, auf dem der Browser läuft (z. B. Win32)
userAgent � HTTP-Identifikation des Browsers
(z. B. Mozilla/5.0 (Windows NT 5.1; rv:12.0) Ge cko/20100101 Firefox/12.0)
javaEnabled() � ist Java verfügbar? (true oder false)
Beispiel:
alert(navigator.appCodeName);
Bild 8.1: Informationen des JavaScript-Objektes »Navigator« (Mozilla Firefox)
Speziell für den Internet-Explorer (ab der Version 5.0) bietet Microsoft mit den »Conditional Comments« (Bedingte Kommentare) die Möglichkeit, Browser-Typ und Version abzufragen. Von allen anderen Browsern werden diese einfach ignoriert:
<!--[if IE 5]>
<p>- Internet-Explorer 5</p>
<![endif]-->
<!--[if IE 5.5]>
<p>- Internet-Explorer 5.5</p>
<![endif]-->
8.3 Tipps & Tricks 241
<!--[if IE 6]>
<p>- Internet-Explorer 6</p>
<![endif]-->
<!--[if IE 7]>
<p>- Internet-Explorer 7</p>
<![endif]-->
<!--[if IE 8]>
<p>- Internet-Explorer 8</p>
<![endif]-->
Tipp: In den Conditional Comments können sogar Verknüpfungen und Vergleichs-operatoren genutzt werden, sodass beispielsweise folgendes Konstrukt möglich wäre:
<!--[if gte IE 5 & lte IE 8]>
<p>- die Versionsnummer ist <= 5.0 und >= 8.0</p> <![endif]-->
Verknüpfungen:
& � "und"
| � "oder"
! � "nicht"
Vergleichsoperatoren:
lt � "less than" (kleiner als)
lte � "less than / equal" (kleiner gleich)
gt � "greater than" (größer als)
gte � "greater than / equal" (größer gleich)
Bild 8.2: Conditional Comments und das Navigator-Objekt (Internet-Explorer)
242 Kapitel 8: Anhang
Die bis jetzt vorgestellten Methoden zielen alle auf die Erkennung des verwendeten Clients bzw. dessen Version ab (in jQuery gibt es dafür das jQuery.browser-Objekt, das aber seit der Version 1.3 als deprecated deklariert ist und daher nicht mehr genutzt werden sollte), aber wesentlich eleganter als (nur) den aktiven Browser zu erkennen, wäre es jedoch direkt zu ermitteln, was dieser kann (oder eben nicht)! Genau das macht man mit der sogenannten Feature-Detection (Eigenschafts-Erkennung), die auch von jQuery mit dem jQuery.support-Objekt unterstützt wird. Alle Eigenschaften dieses Objektes können wir mit der Funktion $.each() durchlaufen (Objektiteration) und uns die dazugehörigen Werte anzeigen lassen:
[Ausschnitt der Datei: kleine Beispiele\Browser_feature_detection.html]
// über das gesamte jQuery.support-Objekt iterieren und alle // Features
Wie Sie im Beispiel sehen können, bietet das jQuery.support-Objekt eine Vielzahl von Möglichkeiten. Da diese aber bei der alltäglichen Arbeit im Allgemeinen nicht benötigt werden, sondern wenn überhaupt eher bei der Plug-in-Entwicklung zum Einsatz kom-men, möchte ich hier für nähere Details auf die offizielle Dokumentation der jQuery-Library verweisen. [http://api.jquery.com/jQuery.support/]
8.3 Tipps & Tricks 243
8.3.2 jQuery ohne Konflikte mit anderen Librarys benutzen
Falls außer jQuery zusätzlich noch andere JavaScript-Librarys genutzt werden, kann es zu Konflikten kommen, da diese unter Umständen auch das $-Zeichen als Shortcut benutzen (wie z. B. Prototype). Dies können Sie folgendermaßen umgehen:
// 1. Zugriff erfolgt über jQuery() (Standard)
// Bsp: aus $(’#navigation’) wird dann jQuery(’#navigation’) jQuery.noConflict(); // 2. Eine neue Variable (Shortcut) definieren
// Bsp: aus $(’#navigation’) wird dann j(’#navigation’) var j = jQuery.noConflict();
Alternativ kann auch der Handler-Funktion ein Parameter übergeben werden, der dem globalen jQuery-Objekt zugewiesen wird. Es wird also quasi das jQuery-Objekt (nur) im Kontext des Ready-Handlers umbenannt, ohne Einfluss auf den restlichen Quellcode zu haben.
jQuery.noConflict();
jQuery(document).ready(function($) {
// Hier kann dann wie gewohnt das $-Zeichen genutzt werden
});
Eine weitere Möglichkeit, solchen Konflikten aus dem Weg zu gehen, besteht darin, den gesamten Quellcode in eine selbstausführende, anonyme Funktion zu packen, der ebenfalls der Alias mit dem zugewiesenen jQuery-Objekt übergeben wird. Innerhalb dieser Funktion, sozusagen lokal, können wir dann auch problemlos unseren gewohnten Alias nutzen. Diese Methode findet bei dem »Drag-and-Drop-Warenkorb« aus Kapitel 7.1.3 Verwendung:
[Auszug aus der Datei: Warenkorb\cart.js]
(function($) { // Übergabe des neuen Alias
// … neuer Geltungsbereich mit dem $-Zeichen als Alias …
})(jQuery); // Zuweisung des jQuery-Objekts (an den Alias)
8.3.3 Das »Ready«-Ereignis von jQuery verzögern
Manchmal kann es gewünscht sein, das Ready-Ereignis von jQuery so lange zu unterbin-den, bis sichergestellt ist, dass vorher eigener JavaScript-Code ausgeführt wurde (z. B. das Laden von jQuery-Plug-ins usw.). Seit der jQuery-Version 1.6 können Sie das mit der .holdReady()-Methode. Dazu müssen Sie zunächst $.holdReady(true) aufrufen, um das Ready-Event zu blockieren und später (nach Ihrer entsprechenden Bedingung) $.holdReady(false), damit es schließlich aufgerufen werden kann. Es ist zu beachten,
XHTML 45, 238 XML 237 XML Path Language 239 XPath 239
Z Zurücksetzen eines Formulars
113
Lars SchmidtKnow-how
ist blau.
jQuery in der Praxis
> Das JavaScript-Framework im täglichen Programmiereinsatz
> Animation und Effekte, Ajax und JSON
> Navigationsmenüs mit jQuery realisieren
Mit jQuery wird die Programmierung von Webanwendungen
radikal vereinfacht. Diese JavaScript-Klassenbibliothek erleichtert
unter anderem die Manipulation von Webseiten-Elementen,
die Entwicklung von Ajax-Applikationen sowie das Erzeugen
von Animationen. Lars Schmidt zeigt in diesem Buch anhand
von Beispielen aus der Praxis, wie das Zusammenspiel mit
dem Document Object Model (DOM) und Cascading Style
Sheets (CSS) funktioniert, wie jQuery für Ajax-Anwendungen
eingesetzt wird und wie Sie Ihre Webseiten mit auffälligen
Effekten und Funktionen ausstatten.
� Effekte und Animationen mit jQueryMittlerweile werden HTML-Elemente oft per Sliding auf Webseiten
ein- und ausgefahren bzw. per Fading ein- und ausgeblendet. Mit dem
Easing bietet jQuery darüber hinaus einen Parameter, der besondere
Einstellmöglichkeiten für einen spektakulären benutzerdefinierten
Animationsverlauf bietet. Die besonderen grafischen Darstellungen in
diesem Buch zeigen Ihnen, wie sich die jeweiligen Einstellungen auf
den Verlauf der Animation auswirken.
� Warenkorb mit Drag and DropIntuitive Bedienung bedeutet bei einem Warenkorb, dass man die Produkte
mit einem Mausklick aufnimmt und über dem virtuellen Warenkorb wieder
fallen lässt. Wie dies mit jQuery realisiert wird und auch das Sortieren
von Produktlisten mit Drag and Drop erfolgen kann, zeigen Ihnen die
Beispiele in diesem Buch.
� Google Maps einbinden mit zusätzlichen FunktionenEine eingebundene Karte von Google Maps ist auf vielen Webseiten eine
Selbstverständlichkeit. Aber diese Karte mit zusätzlichen Funktionen
auszustatten, z. B. einer eigenen Entfernungsmessung für die Verbindung,
gehört zu den Besonderheiten, die Ihre Webseite auffällig machen. Hier
wird gezeigt, wie Sie solche Funktionalitäten mit Hilfe von jQuery erzeugen.
Aus dem Inhalt:• Was ist jQuery?
• Was kann jQuery?
• Die Entwicklungsumgebung einrichten
• jQuery einbinden
• Erste Erfolge an kleinen Beispielen
• Die Selektoren
• Das jQuery-Objekt
• Manipulieren von Elementeigenschaftenmittels jQuery-Methoden
• Formulare und jQuery
• Ajax und JSON
• Ereignisse: Events und Event Handling
• Animationen und Effekte: Sliding, Fading,Easing
• Das jQuery UI
• Drag and Drop
• Einen Warenkorb mit Drag and Drop erstellen
• Mehrstufige Navigationsmenüs
• Google Maps mit jQuery nutzen
• Eine Live-Suche als jQuery-Plug-in realisieren
• Tipps und Tricks
Über den Autor:IT-Profi Lars Schmidt ist seit 1995 als Software-entwickler in unterschiedlichen Unternehmentätig. Daneben hat er immer wieder auch eigene Software-Produkte entwickelt, z. B. die Audio-Software „Sonoscope“ für die Real-Time-Spektrum-Analyse, und Fachbeiträge inZeitschriften veröffentlicht. Sein Schwerpunktliegt seit einigen Jahren auf den Themen derWebentwicklung.
Auf www.buch.cdDer komplette Beispielcode aus dem Buch zum Download.
Lars Schmidt
30,– EUR [D]
ISBN 978-3-645-60100-9
Besuchen Sie unsere Website
www.franzis.de
Erleichtern Sie sich die Webseitenprogrammierung mit dem erfolgreichsten JavaScript-Framework!