Blog Interface utilisateur Yahoo! (YUIBlog)

À venir en YUI 3.2.0: SimpleYUI

La fonctionnalité décrite dans cet article est disponible en tant que de YUI 3.2.0pr2, et il sera une partie de la prochaine version 3.2.0. Vous pouvez commencer à jouer avec elle aujourd'hui en suivant le code dans cet article.

SimpleYUI est une nouvelle façon de chargement et de l'instanciation de YUI 3 . Le fichier contient un correctif cumulatif SimpleYUI de la fonctionnalité de bibliothèque de base Ajax: tâches DOM, l'abstraction d'événements, les effets d'interface utilisateur, et Ajax. Contrairement à d'autres moyens de chargement YUI, SimpleYUI crée une instance de YUI immédiatement après le chargement et lie toutes les composantes incluses à un plan global Y variable. Utilisation SimpleYUI est facile:

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

 <script>
  / / Y est prêt à utiliser; aucune instanciation nécessaire:
  . Y.one ("# foo") addClass ("highlight");
 </ Script>

Ce n'est pas une "lite" ou de-content version de YUI - vous avez toujours accès à l'ensemble de la puissance et les fonctionnalités de la bibliothèque entière lorsque vous démarrez avec le fichier SimpleYUI. Toutefois, SimpleYUI fournit un confort agréable en roulant des fonctionnalités communes et la création d'une instance globale ( Y ) qui est prêt à utiliser immédiatement.

Travailler avec le DOM

SimpleYUI vous donne toutes les interactions DOM standard dans l'API YUI 3:

 / / Obtenir une référence d'élément, ajouter un gestionnaire de clic
 Y.one ('# demo') sur ('click', function (e) {/ Cliquez sur la poignée * /}).;

 / / Ajouter du contenu à un élément
 Y.one («démo # ') append (' contenu supplémentaire ajouté à # demo.»).;

 / / Écoute pour un clic sur n'importe quel <li> qui descend du # demo:
 . Y.one ('# demo') délégué («clic», la fonction (e) {/ Cliquez sur la poignée * /}, «li»);

 / / Déplacer # demo à l'emplacement de tout clic sur le document
 Y.one («document»). Sur ('click', function (e) {
    	 . Y.one («démo # ') SetXY ([e.pageX, e.pageY]);
	 }
 );

Créer des effets d'assurance-chômage

Tous les effets d'assurance-chômage qui font partie du module (nouveau-pour-3.2.0) Transition YUI sont disponibles dans SimpleYUI:

 / / # Demo s'estomper, puis retirez-le DOM:
 Y.one («démo # '). De transition ({
     assouplissement: «la facilité-out»,
     durée: 2, / / ​​seconde
     opacité: 0
 }, La fonction () {
     this.remove ();
 });

Ajax

SimpleYUI fournit le module de base IO fonctionnalités Ajax:

 / / Faire une requête HTTP pour «get.php ':
 Y.io («get.php ', {
     le: {
         complète: function (id, réponse) {
             des données var = response.responseText; / / données de réponse.
             / / ...  gérer la réponse ...
         }
     }
 });

Le reste de YUI est restreinte à un usage () à l'écart

Vous n'êtes pas limité à ce qui est livré avec SimpleYUI. Vous pouvez apporter dans n'importe quel autre composant de YUI 3, YUI Galerie 3 du module, ou YUI 2 composant avec un simple use() déclaration à tout moment.

 / Glisser / déposer d'utilisation et, ce qui n'est pas inclus dans le correctif cumulatif SimpleYUI:
 Y.use ('dd-glisser', function (Y) {
     var dd = new Y.DD.Drag ({
         noeud: '# foo'
     });
 });

YUI 3 est bon sur le chargement de tout ce que vous avez besoin quand vous en avez besoin, il suffit de maîtriser l' use() déclaration et vous êtes toujours une seule ligne de code loin de tout dans la bibliothèque que vous avez besoin.

Utilisez SimpleYUI quand ...

• ... Vous voulez démarrer rapidement et d'apprendre les ficelles du métier de YUI;
• ... Vous voulez avoir de base des fonctionnalités Ajax bibliothèque disponibles à tout moment dans la vie de la page sans créer une nouvelle instance YUI.

Ne pas utiliser SimpleYUI quand ...

• ... La performance est plus que de convenance;
• ... Vous voulez bac à sable des parties de votre mise en œuvre dans des instances distinctes;
• ... Vous voulez avoir un caractère délibéré sur le moment où différents composants et la charge ce que le module précise / maquillage sous-module est sur la page.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!