Inizio Interfaccia utente sul blog (YUIBlog)

Venendo in YUI 3.2.0: SimpleYUI

3 Settembre 2010 alle 10:18 da Eric Miraglia e Adam Moore | In Sviluppo | 9 commenti

La funzione descritta in questo articolo è disponibile sotto forma di YUI 3.2.0pr2, e sarà parte della prossima versione 3.2.0. Si può iniziare a giocare con lui oggi, seguendo il codice in questo articolo.

SimpleYUI è un nuovo modo di carico e istanze YUI 3 . Il file SimpleYUI contiene un aggiornamento cumulativo di funzionalità di base della libreria Ajax: compiti DOM, astrazione evento, effetti di interfaccia utente, e Ajax. A differenza di altri modi di carico YUI, SimpleYUI crea un'istanza YUI immediatamente dopo il carico e lega tutti i componenti in dotazione ad una globale Y variabile. Utilizzando SimpleYUI è facile:

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

 <script>
  / / Y è pronto all'uso, senza necessità di istanze:
  . Y.one ("# foo") addClass ("luce");
 </ Script>

Questa non è una "lite" o de-contento versione di YUI - hai ancora accesso a tutta la potenza e le caratteristiche della libreria quando si avvia con il file SimpleYUI. Tuttavia, SimpleYUI fornisce una bella comodità facendo rotolare un po 'di funzionalità comuni e la creazione di un'istanza globale ( Y ) che è pronto per l'uso immediato.

Lavorare con il DOM

SimpleYUI ti dà tutte le interazioni standard DOM nelle 3 YUI API:

 / / Ottiene un riferimento elemento, aggiungere un gestore di clic
 Y.one ('# demo'). Acceso ('click', function (e) {/ * clicca gestire */});

 / / Aggiungere contenuti ad un elemento
 . Y.one ('demo #') append ('contenuti aggiuntivi aggiunto # demo.');

 / / Ascolta per ogni clic su una qualsiasi <li> che scende dal # demo:
 Y.one ('# demo') delegato ('click', function (e) {/ * clicca gestire * /}, 'li').;

 / / Sposta # demo per la posizione di ogni clic sul documento
 Y.one ('documento'). Acceso ('click', function (e) {
    	 . Y.one ('demo #') SetXY ([e.pageX, e.pageY]);
	 }
 );

Creare effetti di interfaccia utente

Tutti gli effetti interfaccia utente che fanno parte del (nuovo-per-3.2.0) Modulo di transizione YUI sono disponibili in SimpleYUI:

 / / Fade # demo, poi rimuoverlo dal DOM:
 Y.one ('demo #'). Transizione ({
     easing: 'facilità-out',
     durata: 2, / / ​​secondi
     opacità: 0
 } Function () {
     this.remove ();
 });

Ajax

SimpleYUI fornisce funzionalità di base del modulo IO Ajax:

 / / Prendi una richiesta HTTP a 'get.php':
 Y.io ('get.php', {
     su: {
         completo: function (id, risposta) {
             var data = response.responseText; / / Risposta di dati.
             / / ...  gestire la risposta ...
         }
     }
 });

Il resto della YUI è solo un uso () via

Non si sono limitati a ciò che viene fornito in bundle con SimpleYUI. Si può portare in qualsiasi altra YUI 3 componenti, YUI 3 Galleria modulo o YUI due componenti con un semplice use() dichiarazione in qualsiasi momento.

 / Drag / Usa-and-drop, che non è inclusa nel rollup SimpleYUI:
 Y.use ('dd-drag', function (Y) {
     var gg = new Y.DD.Drag ({
         nodo: '# pippo'
     });
 });

YUI 3 è buona sul caricamento di qualsiasi cosa hai bisogno quando ne hai bisogno, basta padroneggiare l' use() dichiarazione e si è sempre solo una riga di codice lontano da qualsiasi cosa nella libreria di cui avete bisogno.

Usa SimpleYUI quando ...

• ... Si vuole iniziare rapidamente e imparare le corde di YUI;
• ... Si vuole avere funzionalità di base di libreria disponibili Ajax in qualsiasi momento nella vita della pagina senza creare una nuova istanza YUI.

Non usare SimpleYUI quando ...

• ... Le prestazioni le questioni più di convenienza;
• ... Vuoi sandbox porzioni della vostra implementazione in istanze separate;
• ... Vuoi essere deliberare circa quando diverse caricare i componenti e ciò che il preciso modulo / modulo di trucco è nella pagina.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!