Yahoo! User Interface Blog (YUIBlog)

Kommend in YUI 3.2.0: SimpleYUI

Die Feature-Artikel beschrieben ist in diesem 3.2.0pr2 als von YUI, und es wird Freigabe eines Teils der kommenden 3.2.0. Sie können mit ihm spielen heute im Anschluss an die in diesem Artikel.

SimpleYUI ist eine neue Art der Beladung und Instanziierung YUI 3 . Die Datei enthält eine SimpleYUI Rollup grundlegende Ajax-Bibliothek Funktionalität: DOM Aufgaben, Event-Abstraktion, UI-Effekte und Ajax. Im Gegensatz zu anderen Arten der Verladung YUI, schafft SimpleYUI ein YUI Instanz sofort nach Be-und bindet alle globalen enthaltenen Komponenten zu einer Y -Variable. Mit SimpleYUI ist einfach:

 <Script type = "text / javascript"
  src = "http://yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js"> </ script>

 <script>
  / / Y ist gebrauchsfertig, keine Instanziierung notwendig:
  Y.one ("# foo") addClass ("Highlight").
 </ Script>

Dies ist kein "lite" oder de-begnügte Version von YUI - haben Sie noch Zugriff auf alle von der Macht und Merkmale der gesamten Bibliothek, wenn Sie mit dem SimpleYUI Datei zu starten. Allerdings ist SimpleYUI eine nette Annehmlichkeit durch Aufrollen einige allgemeine Funktionen und die Schaffung einer globalen Instanz ( Y ), das ist sofort einsatzbereit.

Die Arbeit mit dem DOM

SimpleYUI gibt Ihnen alle Standard-DOM-Wechselwirkungen in der YUI 3 API:

 / / Get ein Element Referenz, fügen Sie einen Click-Handler
 Y.one ('# Demo "). Auf (" Klick ", function (e) {/ * Handle klicken */});

 / / Hinzufügen von Inhalten zu einem Element
 . Y.one ('# Demo') append ("Zusätzliche Inhalte hinzugefügt # Demo. ');

 / / Für jeden Klick auf eine <li> dass von # Demo hinab zu hören:
 . Y.one ('# Demo ") übertragen (" Klick ", function (e) {/ * Handle klicken * /},' li ');

 / / Move # Demo auf den Aufenthaltsort eines jeden Klicken Sie auf das Dokument
 Y.one ("Dokument"). Auf ("Klick", function (e) {
    	 Y.one ('# Demo') SetXY ([e.pageX, e.pageY]).
	 }
 );

Erstellen UI-Effekte

Alle UI Effekte, die Teil des (neu-for-3.2.0) YUI Transition Modul sind in SimpleYUI:

 / / Fade # Demo, dann entfernen sie aus dem DOM:
 Y.one ('# Demo "). Übergangs ({
     Lockerung: "Leichtigkeit-out ',
     Dauer: 2, / / ​​Sekunden
     Deckkraft: 0
 } Function () {
     this.remove ();
 });

Ajax

SimpleYUI bietet die IO-Modul die grundlegenden Ajax-Funktionalität:

 / / Stellen Sie eine HTTP-Anfrage zu "get.php":
 Y.io ('get.php', {
     auf: {
         Ergänzen: function (id, Response) {
             var data = response.responseText / / Response-Daten.
             / / ...  Griff die Antwort ...
         }
     }
 });

Der Rest ist nur ein YUI () verwenden weg

Sie sind nicht zu dem, was kommt mit SimpleYUI gebündelt begrenzt. Sie können, bringen in jedem anderen YUI 3 Komponente YUI 3 Galerie -Modul oder YUI 2 -Komponente mit einem einfachen use() -Anweisung ist jederzeit möglich.

 / / Verwenden Sie Drag & Drop, die nicht in der SimpleYUI Rollup enthalten sind:
 Y.use ('dd-ziehen', function (Y) {
     var dd = new Y.DD.Drag ({
         Knoten: '# foo'
     });
 });

YUI 3 ist gut zum Einlegen alles was Sie brauchen, wann immer Sie es brauchen, gerade Meister der use() -Anweisung und du bist immer nur eine Zeile Code weg von allem in der Bibliothek, die Sie benötigen.

Verwenden SimpleYUI, wenn ...

• ... Sie schnell loslegen und lernen die Seile von YUI;
• ... Sie möchten grundlegende Ajax-Bibliothek verfügbaren Funktionen jederzeit in das Leben der Seite, ohne ein neues YUI Instanz haben.

Verwenden Sie keine SimpleYUI, wenn ...

• ... Leistung zählt mehr als Bequemlichkeit;
• ... Sie Sandbox Teile Ihrer Anwendung in separate Instanzen;
• ... Sie werden absichtlich über, wenn verschiedene Komponenten zu laden und einen genauen Modul / Submodul Make-up auf der Seite.

Finden Gespräche: Bloglines | technorati

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