Version 1.1.1 des Punkt . 16 PHP Kalender!

Mit der neuen Version des Kalenders, erweitert sich der Funktionsumfang um Feiertage & Ferien.

Als Beispiel fügen wir Silvester dieses Jahres hinzu. Da Silvester jedes Jahr statt findet, verwenden wir für die Jahreszahl ein Sternchen ( * ). Diese Sternchen könnt ihr Nutzen wie Ihr möchtet, d.h. auch für Tage und Monate.

$kalender->addHoliday('Silvester', '31.12.*');

Oder habt Ihr vllt an jedem 5. Tag im Monat ein Fest?

$kalender->addHoliday('Monats-Party', '05.*.*');

Schon gewusst?
Ihr könnt noch zwei Paramter bei “addHoliday” übergeben:
Eine URL, welche beim Klick auf den Eintrag auf eine Seite weiterleitet
Eine CSS-Klasse, welche dieser Tag bekommen soll!

So könnt Ihr z.B. Weihnachten (welches schon fest hinterlegt ist ) schön hinterlegen

$kalender->addHoliday('Weihnachten', '24.12.*',
'http://deineseite.de/weihnachten.html', 'weihnachten');

Der 24.12. wird zu http://deineseite.de/weihnachten.html verlinkt und bekommt die Klasse “weihnachten”, welche diesen Tag vielleicht rot hinterlegt?

Möchtet Ihr einen eingetragenen Feiertag wieder löschen, wie zum Beispiel “Heilige drei Könige” (fest Eingetragen), verwendet Ihr folgende Funktion:

$kalender->removeHoliday('06.1.*');

So werden genau die Feiertage ausgetragen, welche am 06.1.* stattfinden.

Weiter habt ihr die Möglichkeit, ganze Ferien einzutragen:

$kalender->addVacation('26.12.2009', '29.12.2009', 'Testferien');

Das erste Datum ist der Beginn, das zweite Datum das Ende (wird markiert). Der Dritte Parameter “Testferien” ist der Name dieser Ferien.
Hier könnt Ihr auch, wie oben, zwei weitere Parameter anhängen, welche eine URL und eine CSS-Klasse behinhalten.

Ferien könnt ihr löschen, in dem Ihr beim Funktionsaufruf von removeVacation den Namen dieser Ferien übergebt:

$kalender->removeVacation('Testferien');

Ein kompletter Code könnt nun so aussehen:

$deutscheDaten=array('daysLong'=>array('Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'),'daysShort'=>array('Mo','Di','Mi','Do','Fr','Sa','So',),'monthsLong'=>array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'),'monthsShort'=>array('Jan','Feb','März','Apr','Mai','Juni','Juli','Aug','Sep','Okt','Nov','Dez'));
 
$kalender= new Punkt16_Calendar($deutscheDaten);
$kalender->addHoliday('Silvester', '31.12.*');
$kalender->addHoliday('Monats-Party', '05.*.*');
$kalender->removeHoliday('06.1.*');
$kalender->addVacation('26.12.2009', '29.12.2009', 'Testferien');
$kalender->removeVacation('Testferien');
 
echo $kalender->getCalendar();

Ein Beispiel mit den neuen Funktionen könnt ihr euch hier ansehen: http://examples.punkt16.de/PHP/Kalender1.1.1/
Die benötigten Dateien könnt Ihr euch hier downloaden!

Ein Backlink zu www.punkt16.de ist erwünscht, aber nicht Pflicht!

Ein PHP-basierender Kalender, welcher den aktuellen Tag markiert.

Heute gibt es ein Skript für einen PHP-basierenden Kalender! Das Skript selbst erkläre ich nicht, da es den Rahmen mehr als sprengen würde. Allerdings erkläre ich euch, wie einfach es Anzuwenden ist! Die PHP-Klasse, welche ihr benötigt, könnt ihr euch hier downloaden.

Als ersters solltet Ihr das Skript includen:

include('calendar.class.php');

Nun müsst Ihr ein neues Objekt instanzieren. Das heisst nichts anderes, als den Kalender aufzurufen und in einer Variable fest zu halten.

$kalender = new Punkt16_Calendar();

Jetzt noch die Funktion getCalendar aufrufen, und mit echo ausgeben:

echo $kalender->getCalendar();

Der komplette Code für den Standard-Kalender sieht wie folgt aus:

include('calendar.class.php');
$kalender = new Punkt16_Calendar();
echo $kalender->getCalendar();

Ihr habt nun aber englische Monats- und Tagesnamen. Um diese zu ändern, müsst Ihr beim instanzieren des Objekts ein Array mit den deutschen Namen übergeben.
Euer Array sieht so aus:

$deutscheDaten = array(
					   'daysLong' => array(
										   		'Montag',
												'Dienstag',
												'Mittwoch',
												'Donnerstag',
												'Freitag',
												'Samstag',
												'Sonntag'
										   ),
 
					   'daysShort' => array(
												'Mo',
												'Di',
												'Mi',
												'Do',
												'Fr',
												'Sa',
												'So',
											),
 
					   'monthsLong' => array(
											 	'Januar',
												'Februar',
												'März',
												'April',
												'Mai',
												'Juni',
												'Juli',
												'August',
												'September',
												'Oktober',
												'November',
												'Dezember'
											 ),
 
					   'monthsShort' => array(
											  	'Jan',
												'Feb',
												'März',
												'Apr',
												'Mai',
												'Juni',
												'Juli',
												'Aug',
												'Sep',
												'Okt',
												'Nov',
												'Dez'
											  )
					   );

Falls Ihr euren Code nicht so aufblähen möchtet, hier die kurze Fassung:

$deutscheDaten=array('daysLong'=>array('Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'),'daysShort'=>array('Mo','Di','Mi','Do','Fr','Sa','So',),'monthsLong'=>array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'),'monthsShort'=>array('Jan','Feb','März','Apr','Mai','Juni','Juli','Aug','Sep','Okt','Nov','Dez'));

Übergebt nun dem Objekt diese Daten:

$kalender = new Punkt16_Calendar($deutscheDaten);

Kompletter Code:

include('calendar.class.php');
$deutscheDaten=array('daysLong'=>array('Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'),'daysShort'=>array('Mo','Di','Mi','Do','Fr','Sa','So',),'monthsLong'=>array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'),'monthsShort'=>array('Jan','Feb','März','Apr','Mai','Juni','Juli','Aug','Sep','Okt','Nov','Dez'));
$kalender = new Punkt16_Calendar($deutscheDaten);
echo $kalender->getCalendar();

Eure Ausgabe sieht wohl noch etwas sehr weiss aus. Deswegen benötigt Ihr noch eine passende CSS, welche dem Download oben beiliegt:

table.calendar { width:210px; border:1px solid #a6c9e2; margin:50px auto auto;}
table.calendar table.title { width:100%; height:30px; broder:1px solid #c5dbec; background:#5c9ccc; text-align:center;}
table.calendar table.title td.monthBackwardA { width:30px; color:#fff; }
table.calendar table.title td.monthBackwardA a { font-size:18px; color:#fff; width:30px; height:30px; line-height:30px; display:block; text-decoration:none; }
table.calendar table.title td.monthYear { font-size:14px; line-height:30px; color:#fff;}
table.calendar table.title td.monthForwardA { width:30px; color:#fff;}
table.calendar table.title td.monthForwardA a { font-size:18px; color:#fff; width:30px; height:30px; line-height:30px; display:block; text-decoration:none;}
table.calendar td.dayName { text-align:center; font-weight:bold; }
table.calendar td.dayA { border:1px solid #c5dbec; background:#dfeffc; color:#2e6e9e; text-align:center;}
table.calendar td.dayA.dayTodayA { border:1px solid #fad42e; background:#fbec88; color:#363636;}
table.calendar td.dayA.dayOther { border:1px solid #e6f4ff; background:#f6fbff; color:#98d3ff; }

Ein Beispiel mit deutschen Namen könnt ihr euch hier ansehen: http://examples.punkt16.de/PHP/Kalender/

Ein Backlink zu www.punkt16.de ist erwünscht, aber nicht Pflicht!

Als Webentwickler muss man die Design-Umsetzung in allen möglichen Browser testen. Bei Firefox muss man sich entscheiden: Version 3.5, 3.0 oder 2.0? Nicht nötig!

Installiert euch als Hauptbrowser die Version 3.5! Version 3.0 und 2.0 kann man ebenso installieren, ohne 3.5 deinstallieren zu müssen. Wie das geht? Ich zeig es euch!

Als erstes ladet Ihr euch eine Version runter. Ich verwende für diese Tutorial Version 3.0!
Macht einen Rechtsklick auf die Exe-File und entpackt diese. (z.B. mit WinZip).

Kopiert den Inhalt des Ordners localized in den Ordner nonlocalized. Die Dateien removed-files.log, setup.exe und den Ordner optional könnt ihr löschen.

Wenn Ihr möchtet, könnt ihr den Ordner nonlocalized nun an einen beliebigen Ort kopieren, wiech z.B. nach C:FireFox3_Test

Als nächstest müsst ihr den Profil-Manager aufrufen:

firefox -profilemanager -no-remote

Klickt auf Profil erstellen….

Gebt einen Benutzernamen ein, z.B. FF3Test und geht dann auf Fertigstellen.

Erstellt eine neue Verknüpfung: Wählt den Pfad zur firefox.exe im nonlocalized-Ordner und schreibt, hinter dem Dateipfad, folgende Angabe:

-P FF3Test -no-remote

In meinem Fall sieht die Textzeile nun folgendermaßen aus:

C:FireFox3_Testnonlocalizedfirefox.exe -P FF3Test -no-remote

Nun könnt Ihr Firefox 3.0 ohne Probleme aufrufen: parallel zu Firefox 3.5!

Ein Layout mit DIVs anstatt Tabellen und iFrames?
Kein Problem! Mit diesem Tutorial und einer passenden Vorlage lernt ihr ganz schnell wie das geht.

Du möchtest also ein DIV Layout erstellen? Also gut, ich werde dir zeigen wie man eines Macht.
Zu nächsteinmal werde ich dir erklären was ein DIV ist und welche Vorteile ein DIV-Layout gegenüber ein Table-Layout’s hat.
Ich werde dann Schritt für Schritt erklären wie ich genau diese Webseite hier erstellt habe (übrigens, ich habe hierfür nur 20 Minuten gebraucht!)

Achtung!
Dieses Tutorial bezieht sich auf folgende Vorlage:
http://takeyo.de/div.html

Wieso DIVs?

Diese Frage musste ich mir am Anfang auch stellen, da ich dachte, dass man mit Tabellen viel besser Layouts aufbauen kann. Tatsächlich denken viele Leute so, doch Tabellen sind nicht für Layoutstrukturierungen gedacht. DIVs sind viel flexibler und man kann leicht ihre Größe ändern oder sie mit Javascript hin und herschieben.
Es wird am Anfang bestimmt schwer von Tabellen und iFrames loszulassen, aber mit DIVs bist du echt im Trend

Das DIV Objekt

Ein Div ist eine Art Box. Quadratisch, praktisch, gut! Ein Div wird in HTML so geschrieben:

<div>Inhalt</div>

Zunächst geben wir dem DIV eine ID oder eine Klasse.
ID: Eine ID ist ein einmaliges Objekt im Dokument. Man kann nicht mehrere Objekte mit der gleichen ID besetzen.
Klasse: Eine Klasse (Class) kann für unendlich viele Objekte im Dokument benutzt werden. Es gibt kein Limit.

Wir besetzen unser DIV also mit der ID “box”:

// Beispiel für eine ID
<div id="box"></div>
 
// Beispiel für eine Klasse
<div class="box"></div>

Bis jetzt hat sich aber noch nichts getan.
Nun müssen wir die ID in dem Stylesheet Bereich mit Eigenschaften belegen. Der Stylesheet Bereich kommt in den Head Bereich des Dokuments. Das ganze sollte dann so aussehen:

<head>
<style type="text/css">
 
// Beispiel für eine ID
#box { width: 50px; height: 50px; background-color: red; }
 
// Beispiel für eine Klasse
.box { width: 50px; height: 50px; background-color: red; }
 
</style>
</head>

Unser DIV sollte nun als roter quadratischer Kasten angezeigt werden.

Jeder mit Mensch mit Englischkenntnissen versteht was hier passiert ist.
Ich habe dem DIV folgende Eigenschaften Zugeteilt:

• width: 50px; ← bedeutet, dass das DIV 50px breit ist.
• height: 50px; ← bedeutet, dass das DIV 50px hoch ist.
• background-color: red; ← bedeutet, dass das DIV eine rote Hintergrundfarbe hat.

Man kann ein DIV natürlich noch mit vielen weiteren Eigenschaften bearbeiten.
Nun, du solltest nun wissen was ein DIV ist und wie man es mit Eigenschaften sichtbar macht.

Ein Layout erstellen – Schritt 1

So, nun da du ungefähr weißt was DIVs sind können wir Anfang diese Webseite hier nachzubauen.
Dieses Layout besitzt einen Header, eine Navigation und einen Content.
Wir müssen nun diese 3 Bereiche als DIVs scheiben:

<divid="header">Meine Homepage</div>
<divid="navi">Inhalt</div>
<divid="content">Inhalt</div>

Unglaublich aber war, mehr brauch man nicht für ein DIV Layout.
Nun müssen wir aber diese 3 DIVs natürlich noch in unserem Stylesheet Bereich bearbeiten. Doch bevor das passiert müssen wir erst etwas anderes bearbeiten. Und zwar den Body Tag. Der Body Tag schließt alles sichtbare auf der Webseite ein. Ich habe unsere Seite mal mit folgenden Eigenschaften belegt:

body {
width: 800px;/* Breite des Layouts */
margin-left: auto;/* Der Wert "auto" platzieren das Layout mittig. Vorraussetzung: width. */
margin-right: auto;
background-color: #5d5d5d;/* Hintergrundfarbe */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;/* Schriftart */
font-size: 12px;/* Schriftgröße */
}

Ich habe die einzelnen Eigenschaften mit Kommentaren versehen um ihre Auswirkungen zu beschreiben.
Nun kommt der Header:

#header {
height: 80px;/* Höhe des Headers */
max-width: 800px;/* Max. Breite, damit der Header das Layout nicht sprengt. */
background-color: #fff;/* Hintergrundfarbe */
text-align: center;/* Text wird mittig ("center") platziert. */
padding-top: 50px;/* 20px innerer Abstand vom Rand zum Text */
font-size: 24px;/* Schriftgröße soll 24px betragen. */
font-weight: bold;/* Schrift soll FETT erscheinen */
}

Nun sollte die Seite aus einem grauen Hintergrund und unserem Header bestehen.
Machen wir also weiter mit den anderen DIVs um das Layout zu vervollständigen. Hier kommt die Navigation:

#navi {
float: left;/* Div wird nach links ("left") ausgerichtet. */
width: 120px;/* Breite der Navigation */
background-color: #fff;/* Hintergrundfarbe */
padding: 3px;/* 3px innerer Abstand vom Rand zum Text */
}

Hier kommt jetzt die Eigenschaft “float” ins Spiel, welche sehr wichtig ist. Denn DIV’s haben die Angewohnheit sich untereinander zu Positionieren. Doch wenn wir alle DIVs untereinander machen würden, hätten wir keine Seitennavigation mehr. Also, “float” setzt das DIV in die angegebene Position, sodass das folgende DIV anstatt darunter, daneben gesetzt wird. Allerdings muss dieses nachfolgende DIV die gleiche Eigenschaft besitzen, so wie ich es hier beim Content gemacht habe:

#content {
float: left;/* Div wird nach links ("left") ausgerichtet. */
width: 668px;/* Breite des Contents */
background-color: #fff;/* Hintergrundfarbe */
padding: 3px;/* 3px innerer Abstand vom Rand zum Text */
}

So, nun solltest du schon eine Ähnlichkeit zu diesem Layout hier und dem, welches du gemacht hast erkennen.
Allerdings fehlt jetzt noch der Inhalt des Contents und der Navigation, also auf zu Schritt 2!

Ein Layout erstellen – Schritt 2

So, das Grundgerüst steht. Nun kümmern wir uns um den Inhalt. Angefangen im Content. Wir machen nun eine Überschrift, ebenfalls als DIV.
Wir schreiben also nun in das Content DIV folgendes:

<div class="titel">Titel</div>

Dieses DIV unterscheidet sich ein wenig von den anderen. Es hat anstatt einer ID eine Klasse. Wieso? Weil wir davon ausgehen, dass diese Titel mehrmals in einem Dokument vorkommen werden. Nun müssen wir es auch dementsprechend in dem Stylesheet Bereich bearbeiten:

</span>
.titel {
width:100%;<em>/* Breite des DIVs ("100%" = automatische max. Breite) */</em>
height: 17px;<em>/* Höhe des DIVs */</em>
background-color: #069;<em>/* Hintergrundfarbe */</em>
color: #fff;<em>/* Schriftfarbe */</em>
text-align: center;<em>/* Textausrichtung ("center" = mittig)*/</em>
padding-top: 3px;<em>/* 3px innerer Abstand zum Rand */</em>
margin-bottom: 10px;<em>/* 10px äußerer Abstand zum Rand */</em>
}

Diesen DIV kannst du immer dann einsetzen, wenn du einen neuen Titel brauchst.
Nun kommen wir zu der Navigation, hier kommen etwas mehr Eigenschaften auf uns zu.
Als erstes füllen wir unsere Navigation mit einem Titel und ein paar Links. Das kann dann so aussehen:

<div id="navi">
<div class="titel">Navigation</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

So und nun kommen wir zu dem Stylesheet Bereich. Die Links in dem Navi DIV werden so angesprochen:

#navi a {
color: black;/* Schriftfarbe */
text-decoration: none;/* Link wird nicht unterstrichen */
display: block;/* Setzt alle Links untereinander */
background-color: #DDD;/* Hintergrundfarbe */
max-width: 116px;/* Breite des Links */
margin-bottom: 3px;/* 3px äußerer Abstand zum Rand */
padding: 3px;/* 3px innerer Abstand zum Rand */
}

Nun sollten die Links in der Navigation aussehen wie in diesem Layout hier.
Doch wir müssen noch zwei kleine extras zu den Links einbauen.
Extra nr.1 ist ein “Hover”-Effekt, der erscheint, wenn man mit der Maus über einen Link fährt.
Und das machen wir so im Stylesheet Bereich:

#navi a:hover {
background-color: #CCC;/* Hintergrundfarbe */
color: #fff;/* Schriftfarbe */
}

So und jetzt noch als letztes eine Einstellung, die bereits besuchte Links nicht Lila verfärbt:

#navi a:visited {
color: black;/* Schriftfarbe */
}

So, nun ist alles Fertig!!

Du hast nun ein komplettes Layout aus DIVs erstellt und kannst es jetzt noch weiter bearbeiten.
Wenn du sehen willst, wie ich die DIVs mit dem HTML Code gemacht habe oder den Footer am unteren Rand, schau einfach im Quelltext.

Du kannst dieses Layout weiterhin verwenden wenn du magst.

Liebe Grüße Take!

Weiter gehts mit einer weiteren Einführung in das machtvolle jQuery-Framework!

Wir möchten heute die Funktionen vom letzten mal ein bisschen vereinfachen. Es gibt in jQuery einen Interaction-Helper, der sich “toggle” nennt. In diesen Helperkann man beliebig viele Funktionen packen, welche nacheinander ausgeführt werden.

Wir hängen die toggle-Funktion an den Selector der vorherigen Einführung an.

$(function(){
	$("#klapp").toggle();
});

toggle ist, dem Event nach, click gleich zu stellen – d.h., Funktionen in toggle, werden bei einem Click ausgeführt. Um das zu veranschaulichen, mal folgende Funktionserweiterung.

$(function(){
	$("#klapp").toggle(function(){
		alert("Funktion 1 ausgeführt!");
	}, function(){
		alert("Funktion 2 ausgeführt!");
	});
});

Hier wird beim ersten Klick auf “Auf- / Zuklappen” die Funktion 1 ausgeführt. Bei einem weiterem, dem zweiten Klick wird Funktion 2 ausgeführt. Beim dritten Klick ist es nun nicht so, dass garnichts passiert. Im Gegenteil. Es wird wieder die erste Funktion ausgeführt.

In unserem Fall wissen wir, dass das Div, welches wir Auf- und Zuklappen möchten, geöffnet ist. Somit können wir die erste Funktion dementsprechend anpassen und das Div schließen. In der zweiten Funktion öffnen wir es wieder.

$(function(){
	$("#klapp").toggle(function(){
		$(".klappen").hide(300);
	}, function(){
		$(".klappen").show(300);
	});
});

Auch lässt sich der Inhalt eines Elements ganz einfach ändern. Der Einfachheit halber verwenden wir die obige toggle-Funktion sowie das passende HTML. Das einzige was wir ändern, ist die Effekt-Funktion hide & show. Wir ändern beide zur Manipulations-Funktion html.

$(function(){
	$("#klapp").toggle(function(){
		$(".klappen").html();
	}, function(){
		$(".klappen").html();
	});
});

Da dies zu keinem Ergebnis führen würde, muss der Funktion noch ein Inhalt mitgegeben werden.

$(function(){
	$("#klapp").toggle(function(){
		$(".klappen").html("Hallo!");
	}, function(){
		$(".klappen").html("<b>Boa</b>, ich tick aus!");
	});
});

Wie Ihr seht, kann man in der html-Funktion auch HTML mitgeben. Dies wird natürlich sofort angewendet.

jQuery ist ein mächtiges und auch sehr beliebtes JavaScript-Framework! Ich möchte Euch heute eine Einführung in jQuery geben und ein paar Dinge zeigen.

Zu beginn müsst Ihr euch die jQuery-Bibliothek zu downloaden. Dazu geht auf die jQuery-Page und klickt auf den großen Button rechts. Nun können wir beginnen!

[ 1 ] Wir bereiten erst einmal unser HTML-Document vor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Einführung</title>
</head>
 
<body>
</body>
</html>

Nachdem wir die Datei abgespeichert haben, binden wir die jQuery-Bibliothek in den -Bereich der HTML-Datei ein. (Bitte denkt daran, die JS-Datei in den gleichen Ordner zu packen, wie eure HTML-Datei. Ansonsten Dateipfade anpassen. )

<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js "></script>

Als nächstes schreiben wir unseren ersten jQuery-Code. Dieser Teil kommt wieder in den -Bereich, unter den oberen Teil.

<script type="text/javascript" language="javascript">
$(function(){
     //Hier stehen weitere Anweisungen
});
</script>

Alle Anweisungen, welche in dieser Funktion stehen, werden erst Ausgeführt, wenn die ganze Seite geladen ist. Somit gehen wir Sicher, dass unser Code immer funktioniert.

[ 2 ] Als erstes Zeige ich Euch, wie ihr HTML-Elemente ganz einfach Anzeigen (Aufklappen) und Verstecken (Zuklappen) könnt. Wir schreiben also folgenden HTML-Code in den -Bereich der HTML-Datei:

<b id="klapp">Auf- / Zuklappen</b>
 <div class="klappen">Mich kann man Auf- und Zuklappen!</div> 
<div class="nichtklappen">Mich kann man <b>nicht</b> Auf- und Zuklappen!</div>

Anderst, wie normal in JavaScript, benötigen wir keinen Funktionsaufruf im HTML-Bereich. Das übernehmen für uns so genannte “Selectoren” & “Event-Helper”. Selectoren geben an, auf welchem Element ein Event-Helper ausgeführt werden soll. Event-Helper bestimmen, wann eine Funktion ausgeführt werden soll. Dazu gehören z.B. “click”, “hover”, “mouseup”, “focus” und noch viele mehr.

Selectoren: Selectoren zeigen auf einen bestimmten Tag im HTML-Breich. Genauso, wie in CSS, können ID’s, Klassen und normale Tags angesprochen werden (#MeineId, .meineKlasse, span). In unserem Fall möchten wir, bei einem Klick auf das b-Tag mit der ID “klapp” das Div mit der Klasse “klappen” Auf- / Zuklappen. Also sprechen wir die ID an: $(“#klapp”).

Event-Helper: Wie oben schon gesagt, bestimmen Event-Helper, bei welcher User-Aktion (Mausklick, Tastendruck, …) eine Funktion ausgeführt werden soll. In unserem Beispiel verwenden wir den Event-Helper “click”. Hängen wir unserem Selector also den Event-Helper mit einer Funktion an: .click(function(){});. Euer JS-Code müsste nun so aussehen:

$(function(){
	$("#klapp").click(function(){
 
	});
});

Nun müssen wir das Div mit der Klasse “klappen” verstecken. Dazu benötigen wir nur einen weiteren Selector (welcher auf “.klappen” zeigt) und eine Effekt-Funktion (hide, show).

$(function(){
	$("#klapp").click(function(){
		$(".klappen").hide(); //Hier verstecken wir das Div mit der Klasse klappen
	});
});

Bei jedem Klick würde jQuery nun versuchen, das Div zu verstecken. Also prüfen wir, ob das Div schon versteckt ist, wenn nicht, verstecken wir es. Beim verstecken wird der CSS-Style “display” auf “none” gestellt. Wir können mit der jQuery-Funktion .css Prüfen, ob das Div versteckt ist.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").hide();
		}
	});
});

Jetzt einfach noch eine else-Anweisung an die If-Abfrage packen und das Div wieder anzeigen.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").hide();
		}
		else
		{
			$(".klappen").show();	
		}
	});
});

Nun öffnet euer HTML-Dokument im Browser und testet eure soeben geschrieben jQuery-Funktion!

[ 2 ] Sicherlich ist das nichts besonders, aber mit dem fast gleichem Code, kann man einen ganz anderen Effekt erzielen. Wir setzten nun in die Effekt-Funktion hide() & show() jeweils eine Zahl.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").hide(1000);
		}
		else
		{
			$(".klappen").show(1000);	
		}
	});
});

[ 3 ] Es gibt aber noch eine weitere Möglichkeit, ein Element Auf- bzw Zuklappen zu lassen. Ändern wir doch mal show(1000) zu slideDown(1000) und hide(1000) zu slideUp(1000).

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").slideUp(1000);
		}
		else
		{
			$(".klappen").slideDown(1000);	
		}
	});
});

[ 4 ] Lassen wir das Div doch mal Aus- / Einfaden. Also ändern wir wieder die Effekt-Funktionen.

$(function(){
	$("#klapp").click(function(){
		if($(".klappen").css("display") != "none")
		{
			$(".klappen").fadeOut(1000);
		}
		else
		{
			$(".klappen").fadeIn(1000);	
		}
	});
});

Wie Ihr seht, kann mit ganz wenig Code große Effekte erzielen. Experimentiert doch ein bisschen herum!

Lg,
euer Flo