JavaScript-Framework YUI Library
Gestalten Sie Ihre Website dynamischer. Mit dem Open Source Framework YUI Library nutzen Sie professionelle JavaScript- und CSS-Techniken sehr einfach für Ihre Seiten.
- JavaScript-Framework YUI Library
- Akkordeon-Effekt
- Abschnitte voreinstellen
- Sortierbare Liste
Bieten Sie bei Ihren Web- Oberflächen einen ähnlichen Komfort, wie ihn die Besucher auch von der Windows- Bedienung gewohnt sind. Lassen Sie Objekte frei verschieben sowie per Maus größer und kleiner ziehen. Mit Tab-Registern bringen Sie umfangreiche Inhalte auf möglichst kleiner Fläche unter....
Bieten Sie bei Ihren Web- Oberflächen einen ähnlichen Komfort, wie ihn die Besucher auch von der Windows- Bedienung gewohnt sind. Lassen Sie Objekte frei verschieben sowie per Maus größer und kleiner ziehen. Mit Tab-Registern bringen Sie umfangreiche Inhalte auf möglichst kleiner Fläche unter. Sie erstellen diese und viele weitere dynamische Funktionen mit einer geschickten Kombination aus JavaScript und CSS. Mit Techniken wie DOM-Scripting, DHTML und Ajax lassen sich Seitenelemente direkt ansprechen und unmittelbar ändern, ohne dass die jeweilige Seite neu geladen werden muss.Sie müssen den Quellcode für diese Lösungen jedoch nicht mühsam selbst programmieren. Machen Sie sich das Entwicklerleben mit vorgefertigten Skriptbausteinen leichter. Zahlreiche frei verfügbare Frameworks bieten ausgereifte Module, die sich ohne großen Zeitaufwand in die eigenen Projekte einbauen lassen. Yahoo stellt Webdesignern beispielsweise den Skriptbaukasten YUI Library (developer.yahoo.com/yui/ ) unter Open Source BSD Lizenz zur Verfügung. Gestalten Sie damit interaktive Oberflächen, die browserübergreifend funktionieren und ohne langwierige Tests sofort einsetzbar sind.
Version 2 oder 3?
Yahoo nutzt seine Skriptbibliothek auch selbst für die Seiten seiner eigenen Webdienste. Sie können daher auf einen ausgereiften und vor allem sehr schlanken Code vertrauen. Entwickler haben die Wahl zwischen den beiden Versionen YUI 2 und YUI 3. Die noch weiter gepflegte Version 2 ist bereits seit mehreren Jahren im Einsatz und wird von zahllosen Projekten genutzt.
Entsprechend reichhaltig ist das Angebot an sogenannten Utilities und Widgets. Mit der im letzten Jahr gestarteten Version 3 hat Yahoo das Framework auf eine technisch komplett neue Basis gestellt. Die Neuimplementierung verwendet CSS-Selektoren zur Auswahl von DOM-Elementen und bietet ein übergreifendes Datenmodell.Das System ist zudem deutlich modularer und damit ressourcenschonender angelegt. Sie müssen sich jedoch nicht strikt für eine der beiden Versionen entscheiden. Dank eines unterschiedlichen globalen Namensraums ist daher ein paralleler Einsatz problemlos möglich.YUI 3 besteht im Kern aus einem lediglich 6,9 KByte großen Loader, der alle übrigen Module bei Bedarf dynamisch einbindet. Laden Sie das zentrale Skript YUI Seed von der Website developer.yahoo.com/yui/3/ herunter und binden Sie es mit
<script type="text/
Javascript" src=
"yui-min.js"></script>in den Kopfbereich Ihrer Webseiten ein. Über die Funktion YUI().use geben Sie dann jeweils die weiteren Module an, die Sie in den konkreten Fällen benötigen.
Wenn es die besonderen Umstände Ihrer Website erfordern oder wenn Sie die Module bewusst einzeln zum Projekt hinzufügen möchten, dann lassen sich die Skripts auch statisch in Ihre Seiten einbinden.Stellen Sie die Verknüpfungen, die Sie für Ihren Quelltext benötigen, mit dem YUI Configurator (developer.yahoo.com/yui/3/configurator/ ) zusammen. Sämtliche Dateien des Frameworks stehen als Full Developer Kit zum Download bereit. Die Grundgestaltung übernehmen die unter "CSS-Komponenten" beschriebenen Formatierungsdateien. Binden Sie diese per Link-Befehl in den <head>-Bereich Ihrer Seiten ein. Die Grundschrift geben Sie beispielsweise mit
<link type="text/css" rel=
"stylesheet" href="fonts-min.css" />vor. Erweitern Sie das <body>-Tag, bevor Sie einzelne Funktionen nutzen, schließlich noch um die beiden folgenden Klassen:
<body class="yui3-skin-sam yui-skinsam">
Tab-Register
Auf vielen Websites finden Sie kleinere, abgegrenzte Bereiche mit einer eigenen Registernavigation. Mit dieser Technik lässt sich der zur Verfügung stehende Platz effizienter nutzen. In Yahoos User Interface Library finden Sie das Modul Tabview, mit dem sich die gewünschte Navigation sehr einfach umsetzen lässt.
Bei der Tabview- Funktion haben Sie die Wahl, die Struktur des Registers entweder selbst mit HTML-Befehlen in die Seite zu schreiben, oder dies dynamisch durch JavaScript erledigen zu lassen. Wir zeigen Ihnen ein Beispiel für die erste Variante. Legen Sie mit
<div id="demo"></div>einen Abschnitt an, der das komplette Register enthalten soll. Geben Sie diesem über den id-Parameter einen eindeutigen Namen. Fügen Sie in diesen Container zuerst die Bezeichnungen der einzelnen Tabs als Liste nach dem folgenden Muster ein:
<ul><li><a href="#tab1">Tab 1</a></li><li><a href="#tab2">Tab 2</a></li><li><a href="#tab3">Tab 3</a></li></ul>
