Karussell YUI Widget
Als Aufsatz zu der Yahoo! User Interface Library hat Bill Scott hat eine “Karussell” Komponente entwickelt. Mit dieser Komponente ist es möglich Html Elemente horizontal oder vertikal mit oder ohne animierten Scrollen anzuzeigen.
Ein Vorteil dieser Komponente ist, dass das Laden der Elemente von der eigentlichen Komponente getrennt ist, so das die Komponente mit statischem Html oder dynamisch generierten Inhalt (DHtml oder Ajax) verwendet werden kann. Kompatibel ist die Komponente mit allen aktuellen Browsern.
Für die Karussell Komponente werden die YUI Komponenten “event“, “container_core“, “dom” und “animation” benötigt. Eine ausführliche Beschreibung der Anwendung, also der Anwendung von JavaScript, Html und CSS um ein solches Karussell zu erstellen, ist auf der Webseite enthalten, kann aber auch in dem verfügbaren Karussell zip File heruntergeladen werden.
Einige Live Beispiele für die verschiedenen Arten der Darstellung sowie des Ladens der Elemente werden auch angeboten:
- Static HTML – Carousel content expressed solely in HTML markup.
- DTHML Load – Carousel content loaded via JavaScript (client side load) displayed horizontally.
- DTHML Load (Vertical) – Carousel content loaded via JavaScript (client side load) displayed horizontally.
- Ajax Load – Loading Carousel via Ajax (server side load).
- Slide Show – Showing a carousel managing one large image at a time.
- Module Scrolling – Example of a news module supporting scrolling of content.
- Module Tabset – Example of showing one page of content at at time in tabs.
Hier die direkten Download Links:
- carousel.js
- carousel.css
- carousel-0.2.0.zip – enthält die Dokumentationsseite sowie Beispiele
Aktuelle Updates sowie die aktuellen Files können auf der Updates Seite verfolgt werden.
Die Karussell Komponente ist ein schöner Aufsatz auf die Yahoo! User Interface Library und zeigt die Möglichkeiten, die mit der YUI Library für die Entwicklung von eigenen Komponenten bestehen.
(via Bill Scotts “Looks Good Looks Well” Blog)
