Anleitung: JQuery Karteikarten/Tabellenreiter Ansicht

Montag, 9. Februar 2009 |  Autor:

Tabreiter Informationen übersichtlich darzustellen ist oft nicht leicht. Mit Hilfe von Karteikarten bzw. Tabellenreitern lassen sich Informationen in Gruppen zusammenfassen und auch auf kleinem Platz übersichtlich darstellen. Mit HTML führt aber jeder Wechsel der Karteikarte zu einem Seitenreload. Aber auch hier hilft uns JQuery und AJax Magie.

Wie bei der Anleitung: JQuery/Thickbox mit einem AJAX Login Formular und PHP müssen wir uns ein paar Dateien runterladen. Basis des Ganzen ist das hideAllExcept-Script von Charles Stuart

Ein bisschen JavaScript:

Das aktuelle JQuery jquery.js (compressed) 
Das Hide-All-Except-One Script von Charles Stuart

Ein bisschen CSS:
style.css

Für das Beispiel legen wir uns folgende Verzeichnisstruktur an:

./css hier legen wir unsere CSS Dateien ab
./img hier legen wir unsere Bild Dateien ab
./js hier legen wir unsere js Dateien ab
./ hier legen wir unsere php und html Dateien ab

Ich will den Inhalt der Karteikarten bzw. Tabellenreiter aus einer Datenbank lesen, dazu legen ich eine Tabelle in der Datenbank test an und füge drei Testsätze zu:

CREATE TABLE IF NOT EXISTS tbl_text 
 (text_id int(11) NOT NULL AUTO_INCREMENT,
 text_fld text,
 lang varschar(10),
 PRIMARY KEY (text_id) );
 insert into tbl_text ( lang, text_fld )
 values ('Lateinisch', 'Sed ut perspiciatis ... quo voluptas nulla pariatur?'); 
 insert into tbl_text ( lang, text_fld )
 values ('Deutsch', "Damit Ihr indess erkennt ... Lust hervorgeht?");
 insert into tbl_text ( lang, text_fld )
 values ('Deutsch', "But I must explain ...produces no resultant pleasure?");

Damit sind die Vorbereitungen erledigt und wir können ans Coden schreiten.
Ich erweitere bzw. erstelle meine index.php (Die Login Teile kommen aus dieser Beschreibung)

<?php
/**
 * Created on 02.02.2009
 * @author David Krcek switch2mac.de
 */
	session_start();
echo <<<EOF
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>jQuery ThickBox Login Box</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hideAllExcept.js"></script>
<script type="text/javascript" src="js/thickBox.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="js/logout.js"></script>
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/login.css" type="text/css" media="screen" />
</meta></head>

<body>
EOF;
echo '<div id="content">';
echo '<h2>Ein bisschen AJAX Magie</h2><br />Meinen Seitenreload ess ich nicht';
echo '<div id="content">';
echo '<h3>Login mit Thickbox</h3><br />';

if (empty($_SESSION['username'])) {
echo '<a href="login.htm?height=200&width=300" class="thickbox"> -> Bitte hier Einloggen</a>';
} else {
echo 'Willkommen '.$_SESSION['username'].'<a href="logout.htm?height=200&width=300" class="thickbox">  -> Bitte hier Ausloggen</a>';
}
echo '</div>';

require_once('demo.class');
// PHP Login Instanz erzeugen
$demo = new demo();
$rows = ($demo->getDemoText());
echo '<div id="content">';
echo '<h3> Tabreiter Anzeige </h3><br />';
echo '<ul id="buttons">';
foreach ($rows as $row) {
	echo ' <li><a href="#'.$row["lang"].'" class="toggle">'.$row["lang"].'</a> </li>';
}
echo '</ul><br />';
echo '<div id="toggleThis">';
foreach ($rows as $row) {
	echo '<div id="'.$row["lang"].'">';
	echo $row["text_fld"];
	echo '</div>';
}

echo <<<EOF
</div>
</div>
</div>
</body>
</html>
EOF;
?>

Die Daten werden durch den Methodenaufruf 

$demo = new demo();
$rows = ($demo->getDemoText());

geladen.
Die Methode getDemoText legen ich mir in der Datei demo.class ab

<?php
/**
 * Created on 02.02.2009
 * @author David Krcek switch2mac.de
 */

class demo {

	public function __construct()
	{
		$this->_result = array();
	}

	public function getDemoText()
	{
		(isset($RESULT))?$RESULT:$RESULT='';
		(isset($row))?$row:$row=array();
		(isset($rows))?$rows:$rows=array();
		$db = mysqli_connect("localhost", "root", "", "test");
		$sql = 'SELECT * FROM tbl_text';
		if ($db) {
//		if ($stmt= $db->prepare($sql)) {
//			$stmt->execute();
//			$stmt->bind_result($text_id, $text_fld, $lang);

			if($result = $db->query($sql)) {
				while($row = $result->fetch_assoc()) {
					$rows[$row["text_id"]] = array("text_fld"=>$row["text_fld"], "lang"=>$row["lang"]);
				}
			}
		}
		return $rows;
    }
}
?>

Die Magie steckt im Aufruf der Linkzeile 

foreach ($rows as $row) {
	echo ' <li><a href="#'.$row["lang"].'" class="toggle">'.$row["lang"].'</a> </li>';
}

Hier werden für alle oben ermittelten Zeilen ein Link erzeugt und dann über den Link mit dem Anker ‘#irgendwas” angezeigt.
Jetzt brauchen wir nur noch etwas CSS und schon sieht das das Ganze gut aus, ich nenne die Datei style.css

@CHARSET "ISO-8859-1	";

.hide { display: none; } /* required */

body { background-color: #F0F0EE; }
#content { margin: 1.4em; padding: 1em; border: 1px solid #ccc; background-color: #fff; }

body, h1, h3, span, ul, li, a, div, p { font-family: 'news gothic mt', 'lucida grande', 'bitstream vera sans', helvetica, sans-serif; margin: 0; padding: 0; }

h1 { margin: 0 0 .2em 0; }
h1 span.smaller { font-weight: normal; font-size: 70%; }
h2, h3 { margin-bottom: -.5em; }
p { margin-top: 1em; line-height: 1.4; }

ul { padding-left: 0; }
li { float: left; display: block; margin-right: 0 em; }
ul#about li:before { content: "*"; }
ul#buttons { margin: em 0 0em 0em; }
<!-- ul#buttons li { padding: .2em .5em; background-color: #eee; border: 1px solid #ccc; border-bottom: 0; } -->
ul#buttons li { padding: 0.15em 0.55em ; background-color: #eee; border: 1px solid #FFF; border-bottom: 0; }

div#toggleThis { margin: .4em 0 2em; border: 1px solid #ccc; }
<!--div#toggleThis div { background-color: #eee; padding: 1em; color: #444; font-family: georgia, serif; } -->
div#toggleThis div { background-color: #FFF; padding: 1em; color: #666; font-family: georgia, serif; }
a, a:link, a:visited { color: #111; text-decoration: none; }
a.code { border-bottom: 1px solid #888; }
a.active { color: green; font-weight: bold; }
a.active { margin: -0.15em -0.6em ; padding: 0.1em 0.5em ; background-color: #fff; border: 1px solid #ccc; border-bottom: 2px; border-bottom-style:solid; border-bottom-color: #FFF; }
a:hover { color: green;  }

#me { text-align: center; }
#me a { color: #aaa; }
#me a:hover { color: red; }

#info
{
color: grey;
font-weight: bold;
font-size: 9px;
}
#warning
{
color: red;
font-weight: bold;
font-size: 9px;
}

Mehr, gibts nicht, das wars, bei Fragen die Kommentarfunktion verwenden.

screen-capture-3
screen-capture-2

Tags »   , , , , , , , «

Trackback: Trackback-URL | Feed zum Beitrag: RSS 2.0
Thema: AJAX, Anleitung, PHP

Diesen Beitrag kommentieren.

Ein Kommentar

  1. 1
    DATA 

    Hallo,
    so ich hab das mal nachgebaut … funktioniert wir gewohnt sehr gut ! [bei der test Tabelle bitte varschar in varchar (!) korrigieren und das 2x Deutsch in English ändern ! ... für alle nachfolgenden]. Des weitern fehlt die Funktion logout.js ! [könnte ggf. auch in die Beschreibung von ajax login integriert werden.]
    vielen Dank
    [nun schau ich mal wie ich das in mein HP einbaue *hehe*]
    P.S. deine zwei Bilder am Ende sind doch gleich? *wunder*

Kommentar abgeben