Javascript und Code-Snippets
Werden Ihre Webseiten auch immer voller? Wir zeigen Ihnen Techniken, mit denen Sie die Inhalte kompakt und übersichtlich unterbringen.
- Javascript und Code-Snippets
- Teil 2: Javascript und Code-Snippets
Werden Ihre Webseiten auch immer voller? Wir zeigen Ihnen Techniken, mit denen Sie die Inhalte kompakt und übersichtlich unterbringen. Ihre Webseiten platzen aus allen Nähten und der Überblick geht langsam verloren. Dennoch sind manche Themen so wichtig, dass sie auf Seite 1 müssen. Die Besuch...
Werden Ihre Webseiten auch immer voller? Wir zeigen Ihnen Techniken, mit denen Sie die Inhalte kompakt und übersichtlich unterbringen.
Ihre Webseiten platzen aus allen Nähten und der Überblick geht langsam verloren. Dennoch sind manche Themen so wichtig, dass sie auf Seite 1 müssen. Die Besucher scannen vor allem den oberen Bereich einer Seite nach interessanten Wörtern und Bildobjekten. Alles Wichtige sollte also bereits beim Aufruf im Blick sein, ohne dass die Seite zu überladen erscheint.
Seitenbereich mit Tab-Steuerung
Auf vielen Websites finden Sie kleinere, abgegrenzte Bereiche mit einer eigenen Registernavigation. Mit dieser Technik lässt sich der zur Verfügung stehende Platz effizienter nutzen. Wählen Sie jedoch die Bezeichnung der Reiter so, dass die Nutzer auf einen Blick erkennen, was Sie beim Mausklick erwartet. In Yahoos UI Library finden Sie das Modul TabView, mit dem sich die gewünschte Navigation sehr einfach umsetzen lässt. Entpacken Sie die gesamte Skript-Bibliothek und übernehmen Sie die Dateien build tabview/assets/skins/sam/tabview.css, build/yahoo-dom-event/yahoo-dom-event.js, build/element/element-beta-min.js und build tabview/tabview-min.js in ein neues Verzeichnis mit dem Namen tabview. Verknüpfen Sie sie mit den folgenden Befehlen im - Bereich der Webseite:
Bei der Tab-View-Funktion haben Sie die Wahl, die Struktur des Registers entweder selbst mit HTML-Befehlen in die Seite zu schreiben, oder dies dynamisch durch Javascript erledigen zu lassen. Wir zeigen Ihnen die Lösung für die erste Variante. Erstellen Sie das Gerüst nach dem Muster:
<link rel="stylesheet" type="text/
css" href="tabview/tabview.css"><script type="text/javascript" src=
"tabview/yahoo-dom-event.js"></script><script type="text/javascript" src=
"tabview/element-beta-min.js"></script><script type="text/javascript" src=
"tabview/tabview-min.js"></script>Der Codebaustein besteht aus einer Liste mit Links, die auf die nachfolgenden Abschnitte tab1 bis tab2 verweisen. Das gewünschte Layout verpassen Sie dem Register mit einer Erweiterung des - Befehls:
<div id="demo" class="yui-navset"><ul class="yui-nav"><li class="selected"><a href=
"#tab1"><em>Tab 1</em></a></li><li><a href="#tab2"><em>Tab 2</em></a></li><li><a href="#tab3"><em>Tab 3</em></a></li></ul><div class="yui-content"><div id="tab1">Inhalt von Tab 1</div><div id="tab2">Inhalt von Tab 2</div></div></div>Sie schalten das Modul scharf, indem Sie am Ende der Seite einfügen:
<body class="yui-skin-sam">Das Register lässt sich flexibel an die Gestaltung Ihrer Website anpassen. Ändern Sie dazu die Styles in der Datei tabview.css. So ist auch die Breite fest einstellbar. Ergänzen Sie dafür beispielsweise das Format .yui-navset {width:300px;} am Ende der Datei.
<script type="text/javascript">
var tabView = new YAHOO.widget.
TabView(,demo');</script>Aufziehbare Seitenbereiche
Ein weiteres Feature von Yahoo UI: Ermöglichen Sie den Besuchern, einen Seitenbereich per Maus größer zu ziehen. Dieser Bereich kann sowohl Text, als auch HTML-Objekte enthalten. Voraussetzung ist, dass Ihre Seite als HTML Strict deklariert ist.
Kopieren Sie die Dateien build/yahoo-dom-event/yahoo-dom-event.js, build/dragdrop/dragdrop-min.js, build/element/element-beta-min.js, build/resize/resize-beta-min.js und build/assets/skins/sam/resize.css aus dem ZIP-Archiv in den Ordner Ihrer Webseite. Verknüpfen Sie die Seite im -Bereich mit den Skripts und CSS:
Die Größe der Ziehfläche legen Sie im Kopfbereich der Seite fest:
<script type="text/javascript" src=
"yahoo-dom-event.js"></script><script type="text/javascript" src=
"dragdrop-min.js"></script><script type="text/javascript" src=
"element-beta-min.js"></script><script type="text/javascript" src=
"resize-beta-min.js"></script><link rel="stylesheet" type=
"text/css" href="resize.css">Noch wird das Feld von einem dünnen schwarzen Rahmen umgeben. Die Möglichkeit des Ziehens wird für die User erst deutlich, wenn am rechten und unteren Rand Balken mit kleinen Anfassern eingeblendet sind. Kopieren Sie dazu die Datei build/resize/assets/skins/sam/layout_sprite.png ins Verzeichnis und erweitern Sie das -Tag:
<style type="text/css">
#resize {border: 1px solid black;
height: 200px; width: 300px; background-color: #FFF;}
#resize div.data {overflow: hidden;
height: 100%; width: 100%;}</style>Fügen Sie den Bereich selbst als verschachtelte Abschnitte in den -Bereich ein. Verwenden Sie die folgenden Zeilen:
<body class="yui-skin-sam">Der innere Abschnitt dient als Container für die Inhalte. Mit dem folgenden Skriptblock hinter den beiden Abschnitten erstellen Sie die benötigte Instanz des Resize-Objekts:
<div id="resize"><div class="data">
... </div></div><script>
var resize = new YAHOO.util.Resize
(,resize');</script>Abschnitte ausblenden lassen
Geben Sie den Besuchern die Möglichkeit, selbst Seiteninhalte per Mausklick aus- und wieder einzublenden. So behalten die User auch bei vollen Seiten den Überblick. Das folgende Skript im -Bereich schaltet zwischen sichtbar und unsichtbar um:
Definieren Sie die betreffenden Abschnitte nach dem folgenden Muster:
<script type="text/javascript">
function toggle(abschnitt) {
if (document.getElementById
(abschnitt).style.display == 'block') {
document.getElementById(abschnitt).
style.display = 'none';
} else {
document.getElementById(abschnitt).
style.display = 'block';
}
}</script>Vergeben Sie über den Parameter id jeweils einen eindeutigen Namen. Fügen Sie oberhalb eines Abschnitts folgenden Link ein:
<div id="ab1" style="display:block;
">Inhalt des Abschnitts</div>Sie rufen durch Anklicken des Links die Funktion toggle() auf und übergeben dieser den Namen des gewünschten Abschnitts. Die Funktion Fx.Slide der Moo-Tools-Bibliothek) bietet die gleiche Funktionalität, jedoch gleitet der Abschnitt sanft in den jeweiligen Anzeigezustand. Binden Sie die Dateien demo.css, mootools.js und demo.js in die Seite ein:
<a href="#" onclick="toggle(,ab1')">[+/-]</a>Die Links für die Surfer definieren Sie oberhalb des Abschnitts mit
<link rel="stylesheet" href=
"demo.css" type="text/css" /><script type="text/javascript" src=
"mootools.js"></script><script type="text/javascript" src=
"demo.js"></script>und den Abschnitt selbst mit
<div class="marginbottom"><a id="v_slideout" href="#">aus</a>
| <a id="v_slidein" href="#">ein</a></div><div id="vertical_slide">Inhalt</div>
