Share
La scorsa settimana ti ho portato a creare un Dashboard / Desktop dall'aspetto pulito. Ragazzi, sarete totalmente FLIP quando sentirete cosa c'è in questo tutorial pieno zeppo! Maggiore attenzione al Dashboard (giuro che è più bello di quanto sembri e richiede un sacco di codice), e andrò anche a capire come creare uno stack (separato dal dock, mi dispiace jqDock non mi piace accoccolato
Come con il tutorial precedente, devo notare questo disclaimer! Non possiedo nessuna delle immagini utilizzate in questo tutorial, né tu. Sono copyright dei loro fornitori, che si tratti di Apple, inc, Adobe, ecc. L'uso delle icone è un po 'un problema di integrità, quindi non abusarne!
In secondo luogo, un nuovo file jQuery.UI sostituirà il file js trascinabile. Questo è fondamentalmente tutti i pacchetti di interazione. Scarica il codice jQuery.UI. Avrai anche bisogno del prodotto finale del tutorial della scorsa settimana! Assicurati di espanderlo nella propria directory! Ci aggiungeremo a questo. Un bel po 'se anche le immagini sono necessarie. Nuove immagini. Assicurati di espandere lo zip nella directory "images", in modo che tutte le nuove cartelle vengano unite alle rispettive controparti della scorsa settimana. Mi scuso per la confusione con questo. Struttura di file stupida, mia cattiva Così. File che devono essere aggiunti:
Allo stesso modo, i collegamenti jQuery.ui devono essere modificati.
Anche se potrebbe non sembrare così, è necessario un sacco di codice per queste poche cose:
Poco prima di iniziare, mi scuso davvero, ma c'erano alcune cose che dovevano cambiare dalla scorsa settimana. il #dock dovrebbe leggere:
#dock position: fixed; margine: 0 auto; fondo: 38 px; a sinistra: 40%; z-index: 0; stile elenco: nessuno;
Lo zIndex di # closeZone in dashboard.js sulla linea 24 dovrebbe essere 99 e non 9999
Quindi, immergiti subito e inizia con Stacks. O più una pila. Sfortunatamente, a causa del modo in cui funziona jqDock, è impossibile annidare gli stack all'interno di jqDock senza modificare il core js, che è molto più lontano di quanto previsto in questo tutorial. Quindi, invece, creeremo una pila in basso a destra della pagina. Le parti più difficili delle pile di codice sono: a) l'altezza di incremento per ogni oggetto e la curva. Fortunatamente, un ciclo combinato con la matematica può fare questo duro lavoro per noi.
Iniziamo con l'aggiunta della struttura HTML dello stack. Ora, a causa della natura della pila, se si desidera utilizzarla su un altro sito Web, è possibile! Fondamentalmente tutto inline all'interno del
- Acrobata
- Apertura
- Photoshop
- Safari
- mirino
La prima immagine è il segnaposto della cartella. Questo è ciò che attiva il dock, quindi è necessario. (Quando usiamo i selettori jQuery, tuttavia, sono sicuro che potresti usare: prima ottenere il primo oggetto dock se / davvero / non vuoi un cestino contenente).
Contrariamente al primo tutorial, includerò CSS e jQuery per ogni passaggio, solo che il design non si confonde completamente. Apri style.css dalla scorsa settimana e aggiungi alla fine:
.stack position: absolute; fondo: 0; a destra: 100 px; .stack ul list-style: none; posizione: assoluta; inizio: -30px; z-index: -9; .stack ul li position: absolute; .stack ul li span display: none; / * Sono per jquery * / .stack .openStack li span display: block; position: absolute; inizio: 17px; destra: 60px; altezza: 14px; altezza della linea: 14px; confine: 0; background-color: # 000; color: #fcfcfc; allineamento del testo: centro; opacità: .85; imbottitura: 3px 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; opera-border-radius: 10px; text-shadow: # 000 1px 1px 1px;
Il tuo stack ora assomiglia a uno stack chiuso, ma non puoi aprirlo. Questo semplicemente impila (hah, nessun gioco di parole previsto) tutte le icone l'una sopra l'altra, quindi sono compresse in un piccolo quadrato. L'ultimo selettore è per il jQuery. Quando la pila viene aperta, la classe 'openStack viene aggiunta all'ul. Mi scuso con gli odiatori di CSS3, è il modo più veloce ed efficiente per farlo nella maggior parte dei browser moderni.
In chiaro, lo stack deve aprirsi quando si fa clic sull'immagine, spingendo ciascuno (suggerimento ...) in incrememnts, e verso destra un po ', ridimensionando a dimensioni ridotte. Quindi, quando si fa nuovamente clic, tutto torna alla normalità.
Accentsconagua
$ ('. stack> img'). toggle (function () // questa funzione, per ogni elemento aumenta la posizione superiore a 50px, // e attraverso usando, l'equazione: valore = (valore + 1) * 2 Entrambe le variabili // iniziano da 0., function () // questo solo annulla il precedente.); La seconda funzione è semplice, ma il primo è un dolore.
var verticale = 0; var orizzontale = 0; $ ('~ ul> li'this) .each (function () $ (this) .animate (top:' - '+ vertical +' px ', a sinistra: orizzontale +' px ', 300); verticale = verticale + 50; orizzontale = (orizzontale + 1) * 2;); $ ('~ ul', this) .animate (top: '-50px', a sinistra: '10px', 300) .addClass ('openStack'); $ ('~ ul> li> img', this) .animate (width: '50px', marginLeft: '9px', 300); Woo, jampacked con interruzione di stringhe, variabili e matematica. Selettori interessanti, eh? Il ~ è 'fratelli di' Erg. Matematica. Lasciatemi spiegare. Le prime 2 variabili sono per la posizione verticale e la posizione orizzontale (curva).
L'incremento superiore è uguale ogni volta, dove, a meno che non si desideri una linea retta orizzontale, ciascuna posizione orizzontale deve essere leggermente superiore al resto. In questo caso, aumenta del numero precedente più uno, delle volte 2. quindi andrà 2, 6, 14, 30, 62, 126, ecc. So che sono numeri strani, ma funziona. Usa qualsiasi equazione che ti piace!
La funzione 'each' è simile a, ad esempio, un ciclo WordPress. Questa funzione si verifica ogni volta che viene utilizzato l'elemento successivo. L'equazione 'valore = (valore + 1) * 2', significa 'nuovo valore è uguale a vecchio valore più uno, poi questo volte Due.
La prima linea animata aggiunge le variabili (all'interno del segno più) ogni volta che viene eseguita in loop tramite la suddivisione delle stringhe. Le ultime due righe sono solo la dimensione. L'altra metà della funzione di commutazione, riporta semplicemente tutto alla normalità:
$ ('~ ul', this) .removeClass ('openStack'). children ('li'). animate (top: '20px', a sinistra: '-10px', 300); $ ('~ ul> li> img', this) .animate (width: '79px', marginLeft: '0', 300); Semplice! Ora i tuoi stack jQuery si animeranno con successo, persino curvando! Sfortunatamente la rotazione è un po 'più difficile. Sebbene HTML5 esca nel 2022 (-_-), il tag canvas potrebbe avere pieno supporto per questo.
Quindi aggiungeremo un po 'il dashboard. In primo luogo, un pannello Aggiungi widget (non eseguire l'aggiunta effettiva fino a tardi). Dopodiché, la chiusura dei widget sarà possibile quando questo pannello sarà aperto. Infine, essere in grado di aggiungere i propri widget da questo pannello. Utilizza alcuni metodi di selezione molto diversi. L'aggiunta dei widget copre anche Droppables in modo estensivo, poiché la funzione di rilascio è piuttosto grande.
Innanzitutto, l'HTML. Aggiungi questo appena prima della chiusura #dashboardWrapper div.
Aggiungi / rimuovi i widget
Appiccicoso
'OpenAddWidgets' è la piccola croce / più che apre e chiude il Pannello. Le voci dell'elenco sono i widget disponibili (crea quanti ne vuoi!). Le immagini che hai scaricato sono i pollici piccoli. Questi diventeranno draggabili, e tu sarai in grado di rilasciarli sulla #closeZone e, infine, i widget aggiunti all'elenco #widgets.
Al momento, sembra un po 'un casino;
Ma con alcuni CSS lo sistemeremo.
#addWidgets position: absolute; z-index: 9999; fondo: 0; a sinistra: 0; larghezza: 96%; altezza: 164px; background: url (images / dashpanel.png) bottom repeat-x; imbottitura: 0 2%; #openAddWidgets display: block; larghezza: 36px; altezza: 36px; background: url (images / opendashpanel.png) center; posizione: relativa; z-index: 9999; text-indent: -9999em; #dashPanel ul list-style: none; margin-top: 27px; #dashPanel ul li float: left; padding-right: 30px; #dashPanel ul li img display: block; #dashPanel ul li span width: 74px; blocco di visualizzazione; allineamento del testo: centro; font-weight: bold; text-shadow: #fff 1px 0 1px; colore: # 17243e; padding-top: 10px;
A causa del posizionamento, dello z-indexing e del floating, questo dovrebbe generare un effetto come questo (il Panel è lì, non nascosto):
Finalmente, il jQuery per nasconderlo e mostrarlo. Aggiungere quanto segue sotto il commento "// draggables definition" (per ragioni di organizzazione):
$ ('# addWidgets ul li img'). draggable (helper: 'clone'); E aggiungilo sotto il blocco '// occultamento iniziale del cruscotto + aggiunta di' closeZone ':
// occultamento iniziale di #dashPanel e widget aggiuntivi $ ('# addWidgets'). css (bottom: '-118px'); Ora per il codice di attivazione. In inglese, quando si fa clic sul pulsante "apri", far scorrere il pannello verso l'alto. Quando viene fatto nuovamente clic, fai scorrere il pannello verso il basso. Iniziamo con l'interruttore.
// apre / chiude il dashpanel $ ('# openAddWidgets'). toggle (function () // apre la dashboard, l'animazione e tutti, function () // opposto a precedente); Quindi la funzione di apertura sarà nel primo spazio, mentre la chiusura nel secondo. Il primo:
$ (this) .css (background: 'url (images / closedashpanel.png)'); $ ('# addWidgets'). animate (bottom: '0px', 500); E il secondo, invertendo sopra:
$ (this) .css (background: 'url (images / opendashpanel.png)'); $ ('# addWidgets'). animate (bottom: '-118px', 500); Infine, come Leopard, dovrebbe chiudersi quando l'utente torna sul desktop, giusto? Aggiungilo a // # closeZone's job: chiudendo la funzione 'Dashboard' (al suo interno!):
$ ('# openAddWidgets'). css (background: 'url (images / opendashpanel.png)'); $ ('# addWidgets'). animate (bottom: '-118px', 500); Ora se fai clic sul piccolo vantaggio in basso a sinistra quando la Dashboard è aperta, dovrebbe animare! Eccezionale!
Questo si è rivelato una bestia e mezza. Un sacco di codice per questo ... Yay! Fortunatamente, è solo jQuery! Iniziamo definendo il Droppable; #closeZone. Posiziona questo sotto le definizioni Draggables:
// droppable definition $ ('# closeZone'). droppable (accept: '.widgetThumb', drop: function (ev, ui) ); Fondamentalmente, #closeZone può ora accettare i pollici nel Pannello come oggetti inutilizzabili, e stiamo per approfondire cosa succede nella caduta.
In un linguaggio comprensibile, è così che va. Le variabili per la posizione del mouse devono essere trovate in modo che la posizione della goccia possa essere dove vogliamo. È necessaria un'altra variabile per il tipo di widget da aggiungere. Alla caduta, è necessario aggiungere il widget, un'immagine diversa a seconda della variabile widgetType. Ora per essere diversi, gli stickies saranno modificabili (Assolutamente no!). Una textarea verrà aggiunta per consentire la scrittura. Poiché tutte le definizioni trascinabili avvengono sul carico del documento, dovranno essere ridefinite ogni volta che un widget viene aggiunto al DOM, in modo che venga applicato al più recente di tali.
Inizieremo con le variabili.
var x = ev.clientX - 100; var y = ev.clientY - 50; var widgetType = $ (ui.draggable) .attr ('id'); Purtroppo non possiamo ottenere la larghezza e l'altezza dell'immagine che sta per essere aggiunta troppo facilmente (per centrare la goccia). Quindi, invece, dobbiamo indovinare, spostando la posizione del mouse di 100 e 50, quindi non è in alto a sinistra. Le variabili JavaScript 'cleintX' e 'clientY' sono fondamentalmente la posizione del mouse. E questo interessante selezionatore; ui.draggable, è l'elemento che è stato appena trascinato! Grazie a jQuery.ui! Ora per l'appendice:
$ ( '# Widgets'). Accodare ('
Consentitemi di spiegare come funzionano le variabili in allegato. Per assegnare una classe al nuovo widget per la personalizzazione, aggiungendo "... '+ widgetType +' Widget '..." restituirà una classe simile a' stickyWidget 'o' weatherWidget '. Lo stile in linea (mi dispiace è in linea! Non spararmi!) Determina la posizione assoluta del widget in base alle variabili, che sono ovviamente le coordinate del mouse. Come ho già detto, i membri DOM più recenti hanno bisogno di riapplicare eventuali modifiche o aggiunte di jQuery [apportate al carico del documento], poiché jQuery non riconosce i nuovi membri DOM. Per le ultime due righe, jQuery deve aggiungere la textarea (in modo da poter modificare il testo) e il nuovo Widget deve diventare trascinabile.
Per far funzionare tutto questo, è necessario un po 'di CSS. Sostituisci, in style.css, il selettore ".widget" e gli attributi con:
.widget position: absolute; z-index: 9999; fluttuare: a sinistra; margine: 1em; stile elenco: nessuno; .stickyWidget padding: 15px 20px; larghezza: 185 px; altezza: 155 px; background: url (images / widgets / sticky.png) centro senza ripetizione; .stickyWidget> img display: none; .stickyWidget textarea height: 100%; larghezza: 100%; sfondo: 0; confine: 0; contorni: 0; font-size: 16px; font-family: 'Marker Felt'; overflow: nascosto;
Questo rende tutto appiccicoso come un appiccicoso. L'utente o non avrà il carattere Marker Felt, è quello che usa il widget effettivamente appiccicoso. Affinché il widget originale rimanga bello, avvolgi il testo anziché in
s ma con: