Web-Oberfläche aufmotzen

Abschnitte voreinstellen

image.jpg

© 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.

image.jpg

© 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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".