Inizio Interfaccia utente sul blog (YUIBlog)

Utilizzando YUI a EtreProprio.com

EtreProprio.com mira a fornire annunci di alta qualità gratuitamente ( vedi un esempio di un elenco qui ). Ci sono attualmente più di 5000 i proprietari vendono le loro case sulla EtreProprio.com. Abbiamo voluto fornire una interfaccia semplice ma potente, e avevamo bisogno di un sacco di front-end logica. Dopo un po 'di sperimentazione, abbiamo scelto YUI che ci ha colpito come potente, robusto, molto ben documentato e altamente personalizzabile. Di conseguenza, EtreProprio.com sta usando YUI (2.8.0) pesantemente per il suo front-end.

I moduli vengono utilizzati i seguenti:

• CSS: Reset, Base
• Utilities: Animazione, Connection Manager, Cookie, Datasource, Drag and Drop, JSON
• Widget: completamento automatico, Button, Calendario, Container, DataTable, RTE, Slider, Visualizzazione a scheda, Caricatore

Andiamo più profonda su tre implementazioni: Ricerca Avanzata, Photo Uploader e visualizzazione a scheda.

Ricerca Avanzata

La forma utilizzata per trovare gli immobili si sviluppa sulla cima di completamento automatico e doppio cursore . Le etichette sopra i pollici cursore sono posizionati con l'ascolto di cambiare evento. Poi, sono riposizionati se si verifica una collisione tra min e max etichette. L'implementazione di completamento automatico in grado di visualizzare elementi misti come città, codici postali o regioni. Ogni elemento ha il proprio formato di visualizzazione.

Provare dal vivo .

Photo Uploader + Management

Abbiamo usato Uploader YUI , DataTable e Drag and Drop moduli al fine di creare semplice form per il caricamento di foto. In primo luogo, l'utente seleziona le foto sul suo computer. Poi clicca su "Invia tutti" e come le foto vengono inviate, una tabella che segue è popolata con le foto e dettagli. Drag and drop viene applicato alle righe della tabella, consentendo agli utenti di riordinare facilmente le foto. La descrizione di tutte le foto possono essere modificati utilizzando un input di testo semplice e utilità XMLHttpRequest YUI, Connection Manager .

Vedere il video qui sotto per una dimostrazione:

Visualizzazione a scheda

Come c'è un sacco di informazioni da visualizzare in un dettaglio classificati, abbiamo usato Visualizzazione a scheda per progettare la pagina. La capacità di personalizzazione del CSS Visualizzazione a scheda ci permettono di integrare perfettamente con il resto della pagina da un punto di vista del design. Visualizzazione a scheda salva anche noi larghezza di banda in quanto solo gli utenti interessati cliccare su tutte le schede - Visualizzazione a scheda ha il supporto per i contenuti lazyloading Tab , e quel modello funziona bene per noi.

Trova conversazioni: Bloglines | technorati

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