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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017