Share
jQuery aggiunge un sacco di fantastiche funzionalità ai tuoi siti web. Può fare una serie di cose, dall'animazione all'AJAX. Di solito è disapprovato fare affidamento su jQuery per progettare i tuoi siti, ma è divertente scatenarsi di tanto in tanto. In questo tutorial ti insegnerò come usare jQuery per creare una Dashboard completamente codificata, proprio come Leopard! Questo può essere utile per nascondere un sacco di gadget o widget per i quali non hai spazio!
Questo tutorial ha un numero di componenti su di esso. Un carico di immagini, un terzo
party Dock plugin, e il componente jQuery UI.draggable, insieme, ovviamente,
il nucleo jQuery (v1.2.6). Nota: molte delle immagini sono probabilmente
copyright dei rispettivi proprietari. Alcune icone del dock sono state prese dai loro pacchetti
e ho usato lo sfondo predefinito di Leopard. Ma sono [sfondi] intercambiabili!
Metti tutti questi in una directory. Una cartella chiamata 'images' (con le immagini all'interno),
una cartella chiamata 'js' con il codice JavaScript al suo interno.
Il piano di attacco per questo tutorial è il seguente. Sul desktop, ci sarà un
Finestra trascinabile e un bacino. C'è un altro div chiamato #dashboardWrapper
si nasconde quando si usa jQuery. Si degrada senza JS, ma non bene. Il piano JS
di attacco spiegherò quando arriveremo.
A parte le icone utilizzate, vorrei anche sottolineare che questo non è così ampio
come andare fuori tutto, ottenere widget dinamici, ecc. Puoi farlo tu stesso! Questo
fornisce solo il "framework" di base su cui lavorare. In effetti, quando ho iniziato a scrivere
questo tutorial è iniziato come tema WordPress, con i widget come widget
sul cruscotto. È ancora possibile! Ti spiegherò come in seguito.
Crea un file chiamato index.html. Questa sarà la pagina che assomiglia a Leopard.
Devi inserire tutto il codice JavaScript e lo style.css che creeremo in seguito. Appena
inizia con questo:
Leopard Dashboard
La pagina ha quindi 3 sezioni minime. 2 Div all'interno del # wrapper (una finestra e il
dashboard effettivo) e il dock fuori dal wrapper. Aggiungi queste sezioni in:
Leopard Dashboard
Ora abbiamo i nostri 3 div vuoti di base. Dobbiamo riempirli con i rispettivi
soddisfare. Poiché la finestra trascinabile è una qualsiasi vecchia finestra, puoi riempirla
ciò che vuoi. Ho creato una sorta di oggetto TextEdit, che è fondamentalmente un generico
finestra con testo. Sarà in stile dopo! Inseriscilo nella '.draggableWindow'.
Leopard Dashboard con jQuery
jQuery è fantastico!
jQuery è davvero bello. Voglio dire, guarda tutte le cose interessanti che può fare. Un dock (Sourced da Wizzud.com! Grazie!), Un cruscotto e finestre trascinabili! Eccezionale! Se non ci sei arrivato via, questa è la demo di un tutorial di Nettuts.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Come detto, questo è solo un testo di riempimento per la nostra finestra. Sembra un po 'schifoso, proprio come
una pagina senza stile.
Il prossimo riempimento del contenuto è il Dashboard. Essenzialmente questo può essere qualunque cosa
Tu vuoi. Seriamente ragazzi, se lo prendete nelle vostre mani, impazzisci. Puoi
stile tutto ciò che vuoi all'interno di questo per assomigliare a widget. Come ho detto, non è ampio,
non mostra i veri widget. Spiegherò alla fine come integrare con WordPress.
Inseriscilo in #dashboardWrapper:
Uno dei widget ha del testo. Questo è solo per mostrare che puoi fare tutto ciò che vuoi.
Tratta i li come div! Metti qualunque cosa! Un mini-blog!
Infine, abbiamo bisogno del dock. A causa della natura di come funziona il plugin jqDock, noi
non posso usare un ul troppo facilmente. Dolore, eh? Quindi, invece, sono solo alcune immagini
uno accanto all'altro in un div:
Vedi quello con l'id di dashboardLaunch? Questo verrà manipolato con jQuery in seguito
sopra.
Tutto va secondo i piani, la tua pagina dovrebbe avere un mucchio di testo e immagini. widget
e icone, testo e intestazioni. È tutto spazzatura al momento.
Il CSS essenzialmente farà il del desktop parte della pagina. Comprenderà
lo sfondo, ecc. Passiamo ad esso. Crea un nuovo file chiamato 'style.css',
e posizionarlo nella stessa directory degli altri file. Inizia la modifica:
Generalmente aggiungo alcune informazioni nella parte superiore del mio CSS con il mio reset, quindi so qual è il file
per:
/ * Nome: Leopard Autore: Nettuts / Harley Alexander Descrizione: For a Tutorial su http://net.tutsplus.com/, ha lo scopo di mostrare come jQuery e jQuery UI possono creare un Web desktop in stile leopardo. Anche se di base, è in grado di comprendere Dashboard e Windows! * / * margine: 0; padding: 0; a color: # 005693;
Semplice. Avanti, il corpo e lo stile della finestra:
body background: url (images / background.jpg) top senza ripetizione; font: 75% / 18px "Lucida Grande", Lucida, Verdana, sans-serif; overflow: nascosto; .draggableWindow width: 500px; overflow: auto; chiaro: entrambi; imbottitura: 0 20px; fluttuare: a sinistra; margine: 40px; .draggableWindow h1 width: 100%; altezza: 21px; fluttuare: a sinistra; font-size: 10px; allineamento del testo: centro; text-indent: -67px; background: url (images / h1long.png) no-repeat; text-shadow: #fff 1px 0 1px; cursore: predefinito; .draggableWindow h1 span width: 67px; altezza: 21px; fluttuare: a sinistra; background: url (images / h1short.png) no-repeat left; .content background: white; imbottitura: 36px; .content h2 margin-bottom: 1em; #smaller width: 300px; float: giusto; margine: 10px; margin-top: -100px;
tutto relativamente facile. Il modo in cui le h1 sono codificate con le precedenti li usa
la tecnica delle porte scorrevoli per assicurarsi che la barra superiore si ridimensiona di conseguenza. Il
ID #smaller era un'altra piccola scatola modale che ho creato, solo per verificare che funzionasse. Controllare
tu stesso, crea semplicemente un nuovo div con l'ID di #smaller e con un contenuto h1 / #
div, puoi digitare un breve messaggio. Perché #smaller è stato definito per essere una larghezza
di 300px, sarà proprio questo: una piccola casella modale.
Sono necessari solo pochi stili per la dashboard effettiva ... Solo per rendere l'elemento della lista
i widget sembrano carini e modellano il widget del blocco note!
.widget posizione: relativo; z-index: 9999; fluttuare: a sinistra; margine: 1em; stile elenco: nessuno; #notepad padding: 10px 20px; larghezza: 185 px; altezza: 191 px; background: url (images / widgets / sticky.png) centro senza ripetizione; font-size: 10px;
Generalmente la maggior parte del CSS del Dock è fatto nel plugin jQuery, ma è degradabile
ragioni, e * rough * centratura, ha ancora bisogno di un po 'del proprio CSS:
#dock position: fixed; margine: 0 auto; fondo: 36px; a sinistra: 37,5%; larghezza minima: 20px; larghezza massima: 400 px; z-index: 9999; #dock img float: left;
E dopo tutto quel codice, (anche se ancora grezzo come budella!) Il tuo Leopard Desktop dovrebbe
assomiglia a questo:
Woohoo! La parte divertente! Troppo tutti quei signori del web che disprezzano l'uso eccessivo di JS, mi scuso
ma ne vinci qualcuno impari un po '? Ora la ragione per cui volevo scrivere questo tutorial
così male è perché in realtà mi ha fatto pensare per farcela
- per non dire altro lavoro no! Questo in realtà ho dovuto pensare molto lateralmente
per arrivare al prodotto finito. Con gratitudine sarò in grado di applicarlo ad altri progetti
- lascia sperare che anche tu lo faccia!
Prima di iniziare jQuery, scrivo sempre una versione inglese di ciò che è necessario. Come una regola
di pollice.
Fortunatamente (o sfortunatamente, a seconda di come la si guarda) si scopre dopo
capendo che c'è un po 'di più in quello. Crea un file chiamato "dashboard.js",
e posizionarlo nella directory JS. Il file JS ha vacillato in epoche precedenti (in alto nell'HTML
sezione) è ora lì! Inizia la modifica!
Inizia sempre con un document.ready ()!
// Nome: jQuery -> Leopard $ (document) .ready (function () );
Molto commentato, quindi auto esplicativo. Fondamentalmente avviare il dock, avviare il
draggables:
Accentsconagua
// launch dock $ ('# dock'). jqDock (); // draggables defenition $ ('. widget'). draggable (); $ ('. draggableWindow'). draggable (handle: 'h1'); Se guardi ora il tuo dock, ingrandisce (o dovrebbe comunque)! Nota:
noi qui a Nettuts probabilmente non ti aiuteremo troppo spesso con questo pezzo di tecnologia,
poiché quello è il lavoro di Wizzud !. Dovresti anche essere in grado
per trascinare i widget visualizzati e la finestra di dialogo (solo lungo l'h1)
la parte superiore come la maniglia!).
> Eh? Chiudi la zona? Vedi se hai semplicemente detto a jQuery di chiudere la Dashboard quando #dashboardWrapper
è stato cliccato in ogni caso (compresi i widget cliccati), quindi sarebbe diventato un dolore
perché non si è in realtà in grado di muoversi intorno ai widget. Quindi una "zona vicina" deve
essere creato che è un fratello dei widget (non annidato) che prende uno z-index
di meno che i widget, ma più del desktop. Tricky, eh? Lo sguardo stratificato
qualcosa come questo:
> Viene utilizzato un sacco di CSS. Questo è per espandere la Dashboard per adattarsi al browser attuale
finestra e imposta l'opacità su 0 in modo che l'animazione possa sbiadirla. Nasconde l'intero
elemento anche dalla vista.
// occultamento iniziale della dashboard + aggiunta di 'closeZone' $ ('# dashboardWrapper') .css (position: 'absolute', top: '0px', a sinistra: '0px', larghezza: '100%', altezza: '100%', opacità: '0') .hide () .append (''); Vai tranquillo!
Come #dashboardWrapper, la Close Zone deve essere fatta saltare per riempire la finestra.
La Close Zone è ciò che in realtà ha anche lo sfondo nero semitrasparente!
// Posizione e occultamento di "#closeZone". $ ('# closeZone') .css (position: 'absolute', top: '0px', a sinistra: '0px', larghezza: '100%', altezza: '100%', opacità: '0.5', sfondo : '# 000'); Ora la magia accade! Mostrando la Dashboard quando si fa clic su #dashboardLaunch,
viene mostrata anche la Zona chiusa. Questo bit di codice, tuttavia, avvia solo il
Cruscotto. Attualmente non c'è modo di evitarlo tranne l'aggiornamento - Close Zone's
Il lavoro è il prossimo!
// Avvia Dashboard + avvio di 'closeZone' $ ('# dashboardLaunch'). Click (function () $ ('# dashboardWrapper') .show () .animate (opacity: '1', 300); ); 
> Alla fine la Zona chiusa diventa protagonista.
// closeZone's job: escaping the Dashboard $ ('# closeZone'). click (function () $ ('# dashboardWrapper') .animate (opacity: '0', 300) .hide (1);) ; Ora questo ha una nota interessante. Per qualche ragione, jQuery non farà l'animazione
a meno che la '.hide' abbia un tempo di 1 decimo di millisecondo. Grande funzionalità sfuggente!
A parte la zona chiusa, l'unica altra cosa ovvia che dovrà fuggire
la Dashboard con animazione è se si fa clic su un collegamento. Come? Semplicemente la stessa 'funzione'
come con la zona chiusa.
// fadeout di dashboard e quando si fa clic su un link all'interno di $ ('# dashboardWrapper a'). click (function () $ ('# dashboardWrapper'). animate (opacity: '0', 300);) ; E questo è tutto! Il tuo dashboard.js dovrebbe assomigliare a qualcosa
questo file js
Come promesso, una semplice spinta nella giusta direzione su come utilizzare questo con WordPress.
Fondamentalmente, tutto il codice è alla fine HTML e JavaScript quando arriva al browser
fine, giusto? Niente PHP, niente ASP.NET, solo forse un po 'di XML. Questo principio è essenziale
per capire, in quanto significa che è possibile applicare il codice a qualsiasi medio, fornito
ha gli stessi ID e classi.
Considera il div "#content" del tuo blog WordPress, data una classe di "draggableWindow".
Dagli un h1 in cima, e presto! Contenuto post finestra. La barra laterale, data
un ID (o cambiarlo all'interno del codice JS) di "#dashboardWrapper", lo farà automaticamente
nascondi fino a chiamare. Ciò significa che tutti i tuoi widget per archivi e categorie
e tutto ora sono widget separati.
Anche le barre laterali dinamiche hanno una lis con classi specifiche, che consentono loro di essere stilizzate
come veri widget! Il Dock, direi che è l'unica cosa che avrebbe davvero bisogno
Essere aggiunto. Da non preoccuparsi! A causa del suo posizionamento, è solo un div con un mucchio di
immagini in esso.
Se vuoi che le tue altre icone del Dock colleghino luoghi, Un tag in linea non romperà nulla!
L'HTML statico che sputa fuori da WordPress (o qualsiasi tecnologia web, in realtà) lo è
applicabile a qualsiasi CSS o JS creato, purché gli ID e le Classi siano allineati.
OK, metti a riposo il nonnoso-grandissimo utilizzo di JS-Grandaddys, e fai del tuo meglio no
usare jQuery in questa misura. Questo tutorial è stato solo per mostrare quanto è divertente l'animazione
può essere davvero, e quanto è semplice creare effetti. In effetti, se qualcuno ha visto
qualsiasi effetto attenderò volentieri fino a 5 sono stati proposti e scrivere un articolo su
come fare ciascuno!
