Web-Oberfläche aufmotzen

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.

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.
Ben Stiller Owen Wilson Zoolander Hansel
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im September mit Highlights wie "Zoolander 2", "Die Tribute von Panem – Mockingjay 2" und der neuen Staffel von "Mr.…