Web-Oberfläche aufmotzen
Sortierbare Liste
- JavaScript-Framework YUI Library
- Akkordeon-Effekt
- Abschnitte voreinstellen
- Sortierbare Liste
Die Verbindung zum Abschnitt stellt Zuweisung von #demo zum Parameter node her.
Sortierbare Liste
Bereits mit wenigen Zeilen Code lassen sich komplexe Aufgaben lösen. Verwandeln Sie beispielsweise eine klassische HTML-Liste in eine Reihe von Buttons, die sich frei mit Maus sortieren lassen. Die Liste legen Sie in der üblichen Art an mit
<div id="demo"><ul><li>Eintrag 1</li><li>Eintrag 2</li><li>Eintrag 3</li></ul></div>
Die Zahl der Einträge ist nicht begrenzt. Sie formatieren die einzelnen Elemente der Aufzählung mit der CSS-Angabe
#demo li {list-style-type: none;
padding: 3px; width: 150px;
border: 1px solid black; margin: 3px;
background-color: #AAFF88; }
umrandet, mit farbigem Hintergrund und ohne Bullet-Symbole. Der Aufruf der folgenden Skriptfunktion genügt, um den beabsichtigten Erfolg zu erzielen:
<script>
YUI().use('sortable',
function(Y) {
var sortable =
new Y.Sortable({
container: '#demo',
nodes: 'li',
pacity: '.1'
});
});</script>
Änderbare Größe
YUI 2 und YUI 3 lassen sich problemlos nebeneinander einsetzen. Dies macht auch Sinn, so lange YUI 3 noch nicht den kompletten Funktionsumfang der Vorgängerversion abbildet. Probieren Sie am Beispiel des Resize-Tools aus, wie sich YUI 2 für Ihre Zwecke nutzen lässt. Sie geben den Besuchern damit die Möglichkeit, einen Seitenbereich per Maus größer zu ziehen. Dieser Bereich kann sowohl Text, als auch HTML-Objekte enthalten. Voraussetzung ist, dass Ihre Seite als HTML Strict deklariert ist.Laden Sie das Full Developer Kit von der Seite developer.yahoo.com/yui/2/ und kopieren Sie die Dateien build/yahoo-domevent/yahoo-dom-event.js, build/dragdrop/dragdrop-min.js, build/element/elementmin.js, build/resize/resize-min.js und build/assets/skins/sam/resize.css aus dem ZIP-Archiv in den Ordner Ihrer Webseite. Verknüpfen Sie die Seite im <head>-Bereich mit den Skripts und der CSS-Datei:
<script type="text/Javascript"
src="yahoo-dom-event.
js"></script><script type="text/
Javascript" src=
"dragdrop-min.js"></script><script type="text/
Javascript" src="elementmin.
js"></script><script type=
"text/Javascript" src="resizemin.
js"></script><link rel="stylesheet" type="text/
css" href="resize.css">
Die Größe der Ziehfläche legen Sie im Kopfbereich der Seite fest:
<style type="text/css">
#resize {border: 1px solid black;
height: 200px; width: 300px;
background-color: #FFF;}
#resize div.data {overflow: hidden;
height: 100%; width: 100%;}</style>
Noch wird das Feld von einem dünnen schwarzen Rahmen umgeben. Die Möglichkeit des Ziehens wird für die User erst deutlich, wenn am rechten und unteren Rand Balken mit kleinen Anfassern eingeblendet sind. Kopieren Sie dazu die Datei build/resize/assets/skins/sam/layout_sprite.png in das Verzeichnis. Fügen Sie den Bereich selbst als verschachtelte Abschnitte in den <body>-Bereich ein. Verwenden Sie dazu:
<div id="resize"><div class="data">
...</div></div>
Der innere Abschnitt dient als Container für die Inhalte. Mit dem folgenden Skriptblock hinter den beiden Abschnitten erstellen Sie die benötigte Instanz des Resize-Objekts:
<script>
var resize = new YAHOO.util.Resize
(,resize');</script>
CSS-Komponenten
Die Grundgestaltung des YUI Framework übernehmen drei zentrale CSS-Dateien.
- CSS Reset (developer.yahoo.com/yui/3/cssreset/ ) stellt nahezu alle CSS-Eigenschaften auf einen definierten, neutralen Ausgangszustand ein.
- Das optionale CSS Base (developer.yahoo.com/yui/3/cssbase/ ) sorgt für ein sinnvolles Grundlayout für die wichtigsten HTML-Objekte wie Überschriften, Listen und Tabellen.
- CSS Fonts (developer.yahoo.com/yui/3/cssfonts/ ) legt den typografischen Grundstein für Ihre Webseiten. An der vorgegebenen Größe der Grundschrift orientieren sich zudem die Maße bei relativen Layouts.
