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

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