Digg è una delle reti di notizie sociali più popolari fino ad oggi. Raccolgono un vasto pubblico in milioni di membri. Recentemente la società ha tracciato una nuova direzione con il lancio di Digg v4. L'intero sistema è stato sostituito con nuove statistiche e follower / networking successivo.
Uno dei cambiamenti più importanti è nell'estetica della pagina. Con il lancio di Digg v4 vanta un nuovo design con un look and feel unico. In questo tutorial vedremo come è possibile creare il proprio modulo di input in stile Digg v4 utilizzando alcune proprietà CSS3 di base.
Useremo anche jQuery per manipolare ciascuna divisione chiave per un effetto di animazione elegante. Qui non useremo nessuna telefonata Ajax, sebbene jQuery supporti tale funzionalità. Il modulo principale che utilizzeremo si basa sulla pagina di invio corrente di Digg.
Demo dal vivo - Download
Lavorare con CSS3 e jQuery
Come non può essere implicito, non c'è nulla di speciale richiesto per lavorare con CSS3. Non è necessario includere alcun file o libreria esterni poiché la maggior parte dei browser moderni supporterà un nuovo motore di rendering. jQuery deve essere incluso nel nostro file. Fortunatamente per noi Google Code ospita tutte le versioni di script popolari online.
Utilizzando i documenti delle API di Google possiamo iniziare a lavorare con jQuery 1.4.1. Ho incluso la versione minified per risparmiare larghezza di banda a lungo termine (sempre una buona idea per gli ambienti di produzione). A parte questo, avremo anche bisogno dei nostri file principali. Per fare ciò includerà un semplice index.html, global.css per gli stili e script.js per la nostra funzionalità jQuery.
Strutture nude
Iniziamo con il nostro codice HTML. Dovrebbe essere abbastanza semplice, ma non fa male rompere le cose in sezioni.
Questa è la porzione principale del nostro documento HTML. Contiene tutte le meta informazioni insieme a un doctype transitorio XHTML. Le uniche inclusioni di file con cui stiamo lavorando sono CSS e codice JavaScript esterno. Entrambi questi file sono archiviati localmente mentre la nostra mappa jQuery è inclusa tramite http://ajax.googleapis.com/.
Successivamente abbiamo un codice di base per il layout del nostro core body. Ciò includerà la parte di intestazione e logo Digg della pagina. Questo include anche il nostro piccolo modulo con alcuni pulsanti di input e caselle di divisione.
Digg it AnnullaSuccessivamente dovrebbe essere semplice coprire alcune delle comuni query CSS. Ci sono alcune proprietà e ID che dovrebbero essere capiti bene quando si modifica un simile script di stile. Inoltre abbiamo utilizzato alcune proprietà CSS3 nuove per i browser moderni.
CSS di prossima generazione
Il nostro file inizia in modo semplice con i margini di ripristino e gli stili di intestazione / corpo. Non c'è davvero molto in termini di caratteri, aree di blocco o altri elementi comuni. Poiché lo scopo del nostro codice è guidato da tutorial, non mi sono preoccupato di creare un elenco completo di proprietà CSS.
Nota come c'è una piccola classe chiamata? Sprite ?. Questo utilizza un file master.png che contiene tutte le icone e la grafica per il layout di Digg. Questa è una tecnica di spit usata per salvare la larghezza di banda e le chiamate al server per la grafica di sfondo.
Più in basso nella pagina abbiamo alcuni blocchi più recenti relativi alle query CSS3. Molti campi e pulsanti di input del modulo includono effetti generati nel browser tramite CSS. Come esempio, tutti i campi di testo di input hanno -webkit-box-shadow impostato con una caduta di inset.
Questo produce un effetto 3D diverso da molti visti prima. I nuovi standard web generano tonalità bellissime e con queste proprietà CSS possiamo progettare interfacce sorprendenti.
Un po 'più in basso abbiamo un blocco di codice adatto a poche classi. presentazione-detail-campo e ora-editing contiene alcune proprietà interessanti che dovrebbero essere esaminate un po 'oltre. Inizialmente tutto il contenuto all'interno di una classe di editing non ha alcuna visualizzazione. Questo è cambiato usando jQuery per manipolare come dovremmo le nostre forme.
I moduli di invio sono impostati di default per assomigliare alle etichette. Una volta cliccato per modificarli, cambiamo la classe di divisione genitore per modificarla e rimuoverla display: none; clausola.Da qui possiamo alternare i due stati con facilità.
Questi stili CSS possono funzionare praticamente con qualsiasi cosa. Noterai subito alcuni bug nel sistema. Come esempio, qualsiasi pulsante o collegamento all'interno del div non mostrerà il puntatore del mouse su hover. Invece si otterrà la barra di testo utilizzata per evidenziare blocchi di testo - questo può essere modificato tramite la proprietà del cursore CSS.
Costruire il nostro script
JavaScript richiesto è abbastanza semplice da utilizzare. Fortunatamente jQuery aiuta a sbarazzarsi di molte righe di codice richieste per indirizzare e manipolare oggetti DOM.
Iniziamo con il nostro controllo evento standard pronto per il completamento del caricamento del nostro documento. Questo è un modo più preciso per il targeting dello sviluppo di script, poiché tutto ciò di cui abbiamo veramente bisogno è un modello di oggetti documento completamente caricato per muoversi. Molte risorse più piccole in tutta la pagina continueranno a caricarsi, ma invece di aspettare il nostro script è eseguibile all'istante.
All'interno dei nostri parametri di funzione pronti passiamo un nuovo funzione() progettato per gestire gli ascoltatori di eventi. Questi controlleranno la presenza di un determinato evento e quando lo eseguirà eseguirà il codice impostato all'interno di una nuova funzione.
Questo avrà più senso con un esempio, quindi iniziamo con il primo campo di input.
La prima riga sta controllando il nostro documento per ogni elemento con la classe? Edit-input? e vincola un gestore di eventi ad esso (o loro). L'evento che stiamo cercando è un evento click che significa che ogni volta che l'utente fa clic su questo elemento chiamiamo un'altra funzione. Nel nostro codice HTML .edit ingresso è una classe applicata ai nostri link di modifica.
Una volta che la funzione ha inizio, stiamo estraendo il nome della classe dal nostro elemento padre contenente. Stiamo inoltre acquisendo l'ID corrente del nostro link di modifica poiché possiamo determinare se stiamo modificando il titolo o la descrizione della storia. Più in basso abbiamo il codice per scambiare le due classi rendendo il nostro campo di testo modificabile.
Successivamente ci sono alcune linee di codice necessarie per mettere a fuoco automaticamente il campo di testo e salvare qualsiasi risultato. Avremmo potuto usare una chiamata Ajax per salvare i dati in un database con ogni clic, tuttavia i dettagli per farlo vanno oltre lo scopo di questo tutorial. Avremmo anche bisogno di supporto da un linguaggio di back-end come PHP o Ruby.
C'è un evento di collegamento simile legato alle nostre due divisioni in campo modulo. Verificherà l'area di testo contenente la descrizione della nostra storia e funzionerà in modo simile a quello precedente. Nota che puoi collegare più listener di eventi in questo modo per creare script di moduli dinamici in pochi minuti.
Conclusione
Questo tutorial ha fornito una solida panoramica delle nuove tecniche CSS3 e della classica funzionalità jQuery. Il nostro prodotto finale sembra molto simile al modulo di invio Digg senza estrarre immagini da un URL che richiede tecniche Ajax.
Tutti gli stili e i disegni CSS sono stati creati in modo molto simile a Digg v4. Meglio ancora, molti dei blocchi di codice sono stati resi semplici da copiare e manipolare nella tua pagina.
Come affermato in precedenza, ho aggiornato sia il codice demo live che un file .zip per il download. Puoi controllare il mio codice demo Digg qui su DesignShack e anche scaricare l'archivio per i tuoi lavori. Se avete domande / commenti sentitevi liberi di offrire le vostre idee nell'area di discussione qui sotto.