WEAVE 01.10 – WebApp mit jQuery

le — Sun, 10 Jan 2010 05:00:53 +0000

Intelligente Menü-Boxen

Web-Designer und –Entwickler René Schulze zeigt in WEAVE 01.2010, wie Sie auf Ihrer Website Menü-Boxen anlegen können, die sich dem Kontext anpassen. Die Arbeitsmaterialien dazu gibt es hier zum Herunterladen.

WEAVE 01.10 – Twitter Maps

le — Sun, 10 Jan 2010 05:00:31 +0000

Google & jQuery für Twitter-Maps

In der WEAVE 01.2010 zeigen Daniel Mies und Johannes Kretzschmar wie sich Google Maps und Twitter verbinden lasssen. Die Listings und Arbeitsmaterialien dazu finden Sie hier zum Download.

WEAVE 05.09 – Animierte Button erzeugen mit jQuery

fwolf — Tue, 25 Aug 2009 05:00:17 +0000

jQuery als Flash-Alternative

Das JavaScript-Framework jQuery erzeugt mit wenigen Zeilen Code sehr professionell wirkende Animationen. Anhand des folgenden Quellcodes von Johannes Kretschmar und Daniel Mies können Sie damit beispielsweise in nur 60 Minuten eine interaktive Karte erstellen.

GRUNDLEGENDES

Basis von jQuery ist die so genannte jQuery-Funktion:
$('p').hide();

Mögliche Beispiele für die Verwendung von Selektoren sind:
$('p') – jeder Absatz im Objekt
$('div > p') – jeder Absatz der Kindelement eines div-Element
$('ul.klasse li:first') – das erste li-Element in der unsortierten Liste mit der Klasse “klasse”
$('h1, h2, h3, h4, h5, h6') – alle Überschriften

Mögliche Funktionen, die auf selektierte Elemente angewendet werden können, sind zum Beispiel:
.hide() – das Element wird versteckt
.show() – das versteckte Element wird angezeigt
.fadeIn() – das Element wird langsam eingeblendet
.slideDown() – das Element wird von oben nach unten ausgefahren

Viele weitere Beispiele für Selektoren und Methoden finden Sie in der sehr ausführlichen Dokumentation unter http://docs.jquery.com

DAS GRUNDGERÜST

Stadtkirche

DAS ERSTE ANIMIERTE ELEMENT MIT jQUERY

Laden Sie die jQuery-Quelldatei von http://www.jquery.com herunter und benennen Sie diese um in jquery.js. Dann binden Sie sie über
in den >head<-Bereich Ihrer Webseite ein.

Codegerüst, in das Sie Ihren Code einfügen müssen:

<script type="text/javascript">
$("document").ready(function(){
});
script>

Die jQuery-Anweisungen hide[] und hover[]:

$(".infobox_wrapper h2").hide();
$(".infobox_wrapper img").hover(
function(){ $(this).next().fadeIn(500); },
function(){ $(this).next().fadeOut(500); }
);

DER AUSKLAPPTEXT

Der Ausklapptext soll zunächst unsichtbar sein:

$(".infobox_text").hide();
$(".infobox_wrapper img").click(
function() {$(this).nextAll(".infobox_text").slideDown(500);}
);

Zustände speichern:

$(“.infobox_wrapper img”).data(“clicked”,false);

Die Fallunterscheidung:
<pre lang="javascript">
$(".infobox_wrapper img").click(
function() {
if ($(this).data("clicked") == true)
{
$(this).nextAll(".infobox_text").slideUp(500);
$(this).data("clicked",false);
}
else
{
$(this).nextAll(".infobox_text").slideDown(500);
$(this).data("clicked",true);
}
}
);

Erweiterung:

$(".infobox_wrapper img").hover(
function() {
$(this).next().fadeIn(500);
},
function() {
if ($(this).data("clicked") == false)
{
$(this).next().fadeOut(500);
}
}
);

EINE WEITERE ZOOMSTUFE

... InfoPunkte Zoomstufe 1 ...

... InfoPunkte Zoomstufe 2 ...

Aktuellen Zoom-Container verstecken:

$(".zoomOut").click(
function() {
$(this).parent(".zoom").hide();
$(this).parent(".zoom").next(".zoom").show();
$("#karte").css("background-image","url(karte_out.jpg)");
}
);
$(".zoomIn").click(
function() {
$(this).parent(".zoom").hide();
$(this).parent(".zoom").prev(".zoom").show();
$("#karte").css("background-image","url(karte_in.jpg)");
}
);

Alle Zoomstufen verstecken und ersten Zoom-Container anzeigen:

$(".zoom").hide();
$(".zoom:first").show();

WAS IST, WENN KEIN JAVASCRIPT AKTIVIERT IST

Zoom-out-Button über jQuery explizit wieder hervorholen:

$(".zoomOut").show();