Web-Oberfläche aufmotzen

Abschnitte voreinstellen

© Volker Hinzen, Daniela Schrank

Verwandeln Sie eine gewöhnliche HTML-Aufzählung im Handumdrehen in eine per Maus sortierbare Buttonleiste.

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.

© Volker Hinzen, Daniela Schrank

Bieten Sie den Surfern die Möglichkeit, Seitenbereiche per Maus größer zu ziehen.

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 -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

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

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

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

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

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