Abschnitte voreinstellen
- JavaScript-Framework YUI Library
- Akkordeon-Effekt
- Abschnitte voreinstellen
- Sortierbare Liste
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 folgende...
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.
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>
