Pfiffige Lösungen bei Platznot

Javascript und Code-Snippets

12.11.2008 von Redaktion pcmagazin und Volker Hinzen

Werden Ihre Webseiten auch immer voller? Wir zeigen Ihnen Techniken, mit denen Sie die Inhalte kompakt und übersichtlich unterbringen.

ca. 5:20 Min
Ratgeber
  1. Javascript und Code-Snippets
  2. Teil 2: Javascript und Code-Snippets
Webdesign: Javascript und Code-Snippets
Yahoos UI Tab View: Bieten Sie Inhalte kompakt über eine eingebettete Registernavigation an.
© Archiv

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:

Webdesign: Javascript und Code-Snippets
Yahoo UI Resize: Mit dem Resize-Tool lassen sich Seitenbereiche definieren, die von den Nutzern aufgezogen werden können.
© Archiv

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:

Webdesign: Javascript und Code-Snippets
Formular: Lassen Sie zuerst klein formatiert
© Archiv

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:

Webdesign: Javascript und Code-Snippets
Fx.Slide: Geben Sie den Besuchern die Möglichkeit, einzelne Abschnitte per Mausklick aus- und wieder einzublenden.
© Archiv
<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>

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.