Web-Oberfläche aufmotzen

Abschnitte voreinstellen

15.2.2011 von Volker Hinzen

ca. 2:30 Min
Ratgeber
  1. JavaScript-Framework YUI Library
  2. Akkordeon-Effekt
  3. Abschnitte voreinstellen
  4. Sortierbare Liste
image.jpg
Verwandeln Sie eine gewöhnliche HTML-Aufzählung im Handumdrehen in eine per Maus sortierbare Buttonleiste.
© Volker Hinzen, Daniela Schrank

jeweils einen eigenen Abschnitt. Der Parameter id sorgt hier ebenfalls für eine individuelle Bezeichnung. JavaScript sorgt dafür, dass für geschlossene Bereiche Header mit entsprechenden Symbolen zu sehen sind. Für Fälle, in denen Surfer die Skriptsprache deaktiviert haben, stellen die folgenden Zeilen innerhalb des Akkordeon-Abschnitts die Möglichkeit der Bedienung sicher:

<div class="yui3-widget-hd"><a class="yui3-accordion-item-icon"></a><a class="yui3-accordion-item-label">
Label 1</a><div class="yui3-accordionitem-
icons"><a class="yui3-accordion-itemiconalwaysvisible"></
a><a class="yui3-accordion-itemiconexpanded"></
a><a class="yui3-accordion-itemiconclose"></
a></div></div>

Fügen Sie den Inhalt des jeweiligen Akkordeon- Bereichs in einen Abschnitt nach dem folgenden Muster ein:

<div class="yui3-widget-bd"><div id="pm1" style="position:
relative;">
Text des jeweiligen Abschnitts</div></div>

Abschnitte voreinstellen

Der Anfangszustand eines Akkordeon-Elements lässt sich durch zusätzliche Klassen und Attribute definieren. Einen Bereich, der beim Öffnen der Webseite erst einmal ausgeklappt ist, erhalten Sie durch Ergänzung der entsprechenden Klasse nach dem folgenden Beispiel:

<div id="item1" class="yui3-
accordion-item yui3-accordionitem-
expanded">

Alternativ lässt sich dasselbe Ergebnis auch mit einer zusätzlichen Json-Zeichenkette

<div id="item1" class="yui3-
accordion-item" yuiconfig=
"{"expanded": true}">

erzielen. Möchten Sie einen Bereich geöffnet lassen, auch wenn die Benutzer einen anderen anklicken, dann erweitern Sie das <div>-Tag entweder mit

class="yui3-accordion-item
yui3-accordion-item-alwaysvisible"

oder mit

yuiconfig="{"alwaysVisible": true}"

Beim Aufruf einer Seite lassen sich jetzt weitere Eigenschaften vorgeben. Legen Sie beispielsweise die Höhe sowie den Titel des jeweiligen Blocks fest und geben Sie an, ob ein Abschnitt geschlossen werden kann oder nicht. Auf der Projektseite des Widgets finden Sie den Link zu einer ausführlichen Dokumentation. Sie aktivieren das besondere Navigationsobjekt mit dem Skript:

<script type="text/Javascript">
YUI({
gallery : 'gallery-2010.06.09-20-45'
}).use( 'gallery-accordion',
function(Y) {
var accordion = new Y.Accordion({
srcNode: "#acc1",
useAnimation: true,
collapseOthersOnExpand: true
});
accordion.render();
});</script>

Geben Sie bei srcNode den selbst vergebenen Namen des Akkordeons ein.

Verschiebbares Seitenobjekt

Verschiedene Funktionen des YUI-Frameworks gewinnen erst eine richtige Bedeutung im Zusammenspiel mit ergänzenden Web-Lösungen.

image.jpg
Bieten Sie den Surfern die Möglichkeit, Seitenbereiche per Maus größer zu ziehen.
© Volker Hinzen, Daniela Schrank

Nutzen Sie YUI für die interaktive Oberfläche Ihrer Web-Anwendung und werten Sie die Benutzeraktionen mit selbst entwickelten Skripts aus. Sie legen beliebige Objekte Ihrer Seiten beispielweise nach dem folgenden Schema sehr einfach verschiebbar an: Definieren Sie einen Abschnitt, den die Besucher per Maus ziehen sollen, mit den folgenden Tags:

<div id="demo">Inhalt des
verschiebbaren Bereichs</div>

Gestalten Sie das Seitenelement beispielsweise mit der folgenden CSS-Angabe im Kopfbereich der Seite:

<style>
#demo {height:
100px; width: 100px;
border: 1px solid
black; backgroundcolor:
#FFDD66;
cursor: move;}</style>

Neben der Größe, dem Rahmen und der Hintergrundfarbe gestalten Sie mit cursor:move; die Anzeige des Mauszeigers, sobald dieser über das Objekt geführt wird.Mit der Angabe im Beispiel verwandelt er sich bei nahezu allen Browser in einen Pfeil, der in alle vier Richtungen weist. Mit dem folgenden Skript schalten Sie die YUI-Funktion scharf:

<script>
YUI().use('dd-drag', function(Y) {
var dd = new Y.DD.Drag({
node: '#demo'
});
});</script>

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.