Yahoo! User Interface Blog (YUIBlog)

In der YUI 3 Galerie: Das Carousel-Modul

Was ist ein Karussell?

Ein Karussell-Steuerelement stellt ein Widget für das Surfen innerhalb einer Menge von Objekten wie vertikal oder horizontal in einer überladenen Seite Region angeordnet. Das "Karussell" Metapher stammt aus einer Analogie zu Karussells in den Tagen der Fotografie Film gleiten, die Karussell-Steuerung kann der Treue zu dieser Metapher, indem eine kontinuierliche, runde Navigation durch den gesamten Inhalt Blöcke aufrechtzuerhalten.

Das Karussell ist Teil einer Familie von Widgets, die es Ihnen ermöglichen, "Überlast", ein Platz auf der Seite und bietet mehr Inhalte für diesen Raum als fügt sich in seinen Dimensionen und bietet eine einfache, intuitive Mechanismus für den Benutzer zu entdecken und zu navigieren die zusätzlichen Inhalte . Akkordeons, Tabs, Bäume und ScrollViews sind weitere Beispiele dieses Genres.

Warum noch ein Karussell zu kontrollieren?

YUI 3 braucht einen robusten, funktionsreichen Carousel (wie wir in haben YUI 2 ). Das Entwicklungsziel für diese Karussell war, um sie schlank und sauber, und fügen Sie zusätzliche Konfigurationen durch Plugins, unter Ausnutzung der YUI 3 ' s intrinsische Unterstützung für Modularität zu beschleunigen bewahren Leichtigkeit und.

YUI 3 Widget Framework

Einer der größten Vorteile des Schreibens eigene Widgets mit YUI 3 ist das Widget Rahmen (mehr Widget Rahmen: Bedienungsanleitung , eingehende Video-Einführung ). Vergleicht man die Karussell in YUI 2.8.2 auf meinem YUI 3 Galerie Carousel , YUI-3-Version ist die schlanke und elegant. Das ist, weil die meisten schweres Heben in Bezug auf die Bereitstellung der Stiftung zur Schaffung einheitlicher Satz von Widgets im Internet, eine disziplinierte Lebenszyklus, Progressive Enhancement Unterstützung usw. kommen mit der Widget-Klasse.

Die YUI 3 Widget Rahmen bietet auch eine konsequente MVC-Muster, die jedes Widget fördert auf Trennung von Staat versus Methoden UI Update-Methoden anzunehmen. Dies macht den Code sehr sauber und wartbar. In der Tat ist dies einer der wichtigsten Faktoren, warum die YUI 3 Carousel ist besser als seine früheren YUI 2-basierten Vetter.

Die YUI 3 Plugin -Modell ermöglicht es Entwicklern, neue Funktionen oder vorhandene Verhaltensweisen an Objekte. Dies erlaubt das Hinzufügen zusätzlicher Funktionalität auf der Carousel dynamisch Zugelemente durch Ajax usw. Also, das YUI 3 Carousel keine Animation Code gebacken hinein, sondern ich geschaffen habe ein Plugin, welches Animation Unterstützung für Fälle, in denen dies erforderlich ist, fügt . Dies hilft dabei, die Komponente sehr leicht.

Eine Galerie Carousel für Ihre eigene Website

Nach der Lektüre über das, was ein Karussell ist und wie es Ihnen helfen, Ihre Website zu verbessern, Sie hoffentlich fühlen möchte unbedingt die Hände schmutzig. Keine Sorge, mit unseren YUI 3 Galerie Carousel Erweiterung, Umsetzung eines Karussells auf Ihrer Website ist so einfach wie die Bereitstellung einer Liste mit Aufzählungszeichen in HTML. Das ist nicht nur ein Verkaufsargument - das ist, wie wir vor kurzem eine Galerie Carousel in die Yahoo! Sports Suchergebnisseite integriert.

Ein einfaches Beispiel

Beginnen wir mit einem einfachen Beispiel, dass fast alles, was Sie wissen müssen, umfassen wird. Der einfachste Weg für Sie, die neue Galerie Carousel verwenden ist, damit YUI 3 automatisch laden von Content-Delivery-Netzwerk von Yahoo. Hinweis was für ein Karussell, ist einer Liste von Gegenständen, erstellen wir eine Liste in HTML. Wir schließen die Liste in einem div, die unsere JavaScript, leicht zu finden und mit ihr arbeiten können. Wenn Sie bereits einige Daten, die in einer Liste wie Weg in das Markup vertreten ist, können Sie auch einfach den Karussell div um ihn herum und testen Sie Ihr Glück! Es ist sehr wichtig zu sagen, dass, obwohl wir mit einem Bild Beispiel hier können Sie Galerie Carousel für alles, was Sie wollen verwenden!

  <div class="carousel" id="container">
   <ol>
     <li> <img src="img/c1.jpg"> </ li>
     <li> <img src="img/c2.jpg"> </ li>
     <li> <img src="img/c3.jpg"> </ li>
     <li> <img src="img/c4.jpg"> </ li>
     <li> <img src="img/c5.jpg"> </ li>
     </ Ol>
 </ Div> 

Nun, da wir unsere Daten zu arbeiten, wollen wir die aussieht, indem alle fünf Elemente mit dem Karussell Widget verbessern. Vorausgesetzt, dass Sie bereits mit YUI 3 ist dies eine einfache Aufgabe. Das einzige, was Sie vielleicht nicht vorher gesehen haben, je nachdem wie tief man graben in YUI 3 und die Galerie in der Vergangenheit, ist, dass wir die Angabe einer Galerie Version explizit. Dies ist notwendig, weil wir mit einem brandneuen Widget, die nicht mit in die Galerie zu bauen, YUI Loader aus standardmäßig geladen versucht werden. Doch wie YUI und YUI Galerie reifen, wird dies nicht mehr nötig in die Zukunft, wenn die Standard-Build-Nummer wird erhöht.

  YUI ({Galerie: "Galerie-2010.10.20-19-33 '})
  . Verwenden ("Galerie-Karussell", "Galerie-Karussell-anim", "Ersatz", function (Y) {
   var Karussell = new Y. Carousel ({boundingBox: "# container"
    contentBox: "# container> ol"});
   carousel.plug (Y. CarouselAnimPlugin, {Animation: {Geschwindigkeit: 0,7}});
   carousel.render ();
 }); 

(By the way, wenn Sie neue Slideshows sind daran interessiert, Marke können Sie die YUI 3 Galerie Repository auf github oder Gopals Gabel , wo er entwickelt Karussell. Wenn Sie Fehler finden, halten wir es sind immer glücklich über zu hören.)

Zurück zu unserem Beispiel ... YUI wird es von hier zu nehmen. Der Lader zieht automatisch Galerie Carousel und ihre Abhängigkeiten von Yahoos Content Delivery Network. Danach wird das Karussell wird initialisiert und angezeigt. Der Benutzer kann dann auf die linke oder rechte Pfeiltaste blättern um. Bitte vergib mir für die Erhebung in einer Linie von unnötiger Komplexität, aber ich konnte nicht widerstehen. Ich habe Y.CarouselAnimPlugin auf der Folie lassen unsere Karussell reibungslos von einer Seite zur anderen statt nur die Anzeige der nächsten Seite sofort. Fühlen Sie sich frei, um mit der Geschwindigkeit Parameter spielen, wenn Sie es wünschen.

Wie Sie aus dem obigen Screenshot sehen kann, ist das Karussell in Betrieb. Doch die CSS vielleicht nicht sehr gut in den Rest der Seite. Dies führt uns zu unserem nächsten Abschnitt, wo wir diskutieren, wie Galerie Carousel anpassen kannst.

Customizing Galerie Carousel

Nun, da Sie Ihre Carousel haben und läuft und identifiziert ein Anwendungsfall für Ihre Website, Sie wollen es hoffentlich nahtlos zu integrieren. Wie bereits erwähnt, haben wir so für unsere Sport Suchergebnisseite. Wenn Sie die Anzahl der sichtbaren Elemente, zum Beispiel von drei auf vier erhöhen wollen, so können Sie dies durch Ändern der Linie, die Carousel instanziiert.

  var Karussell = new Y. Carousel ({boundingBox: "# container"
  contentBox: "# container> ol", numVisible: 4}); 

Immer noch nicht gut genug? Ja, richtig. Glücklicherweise CSS ermöglicht es uns, unseren eigenen Stil Definitionen hinzuzufügen und auch überschreiben die ursprünglichen diejenigen ohne jede Berührung mit CSS vorhanden. Also der erste Schritt wird wahrscheinlich bis an die Grenzen zu entfernen, weil sie recht aufdringlich sind. Fügen Sie einfach das folgende CSS zu Ihrem Seitenkopf.

  . YUI 3-Karussell {
   border: none wichtig;!
 }
 . YUI 3-Karussell-nav {
   Hintergrund: keine Bedeutung;!
 }
 . Karussell ol li {
   border: none wichtig;!
 } 

Jetzt sieht das besser. Ich habe auch eine negative Marge verwendet, um die Lücke zwischen meinem Karussell und die Überschrift zu reduzieren. Allerdings sind wir noch nicht ganz da. Ich nehme an, Sie wollen auch Ihre eigenen benutzerdefinierten Schaltflächen, die sich harmonisch in Ihre Seite integrieren Layout verwenden. Für dieses Beispiel verwenden wir die gleichen Tasten, die auch auf Yahoos Suchergebnisseiten verwendet werden. Dies erfordert ein bisschen mehr, aber immer noch einfacher, CSS.

  . YUI 3-Karussell-Taste {
   background: url ("sprite_button.png") no-repeat scroll 0 0 transparent wichtig;!
   Höhe: 20px wichtig, Breite: 28px wichtig;!
 }
 . YUI 3-Karussell-nav-Element {
   background: url ("sprite_button.png") no-repeat scroll 0 0 transparent wichtig;!
   background-position: 133px-0 Wichtige;!
 }
 . YUI 3-Karussell-first-Taste {
   background-position: 90px-0 Wichtige;!
   margin-right: 35px wichtig;!
 }
 . YUI 3-Karussell-first-Taste-disabled {
   background-position: 60px-0 Wichtige;!
   margin-right: 35px wichtig;!
 }
 . YUI 3-Karussell-next-button {
   background-position: 30px-0 Wichtige;!
 }
 . YUI 3-Karussell-button-disabled {
   background-position: 0 0 wichtig;!
 }
 . YUI 3-Karussell-nav-Element-Auswahl {
   background-position: 121px-0 Wichtige;!
 } 

Wir werden es dabei belassen für heute und hoffe, Sie fühlen sich bereit, um loszulegen. Zumindest das war alles was wir brauchten. Allerdings, je nachdem wie groß Ihre Website ist und wie interessiert Sie befinden sich in seiner Leistung, gibt es allgemeine Meinung über das Laden etwas von einem Drittanbieter Content Delivery Network, dass auch hier gelten. Zum Beispiel legte Sidnei da Silva einige interessante Gedanken in einem Blog-Post Anfang dieses Monats. Wir würden uns freuen, eine, wie man das erklärt, wie ein YUI Widget und ihre Abhängigkeiten zu Ihrer eigenen Website bewegt werden kann, oder auch Content-Delivery-Netzwerk, so können Sie die Anzahl der HTTP-Anforderungen so gering wie möglich zu halten. Lassen Sie uns wissen, wenn Sie interessiert sind, freuen wir uns auf Ihre Rückmeldung!

Mehr in der Galerie entdecken

Die ausgezeichneten Team von Eduardo Lundgren und Nate Cavanaugh von Liferay haben ein Karussell Komponente in der Galerie sowie - sicherlich lohnt sich, wenn Sie die Kontrolle sind auf dem Markt für diese Art von.

Finden Gespräche: Bloglines | technorati

Sagen und erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!