Share
jQuery adaugă o mulțime de funcționalitate misto pe site-urile dvs. web. Poate face o serie de lucruri, de la animație la AJAX. De obicei, se încruntă să se bazeze foarte mult pe jQuery pentru a proiecta site-urile dvs., dar este distractiv să mergem sălbatic din când în când. În acest tutorial vă voi învăța cum să utilizați jQuery pentru a crea un tablou de bord complet codat, la fel ca Leopard! Acest lucru poate fi util pentru a ascunde o mulțime de obiecte gadget sau widget-uri pentru care nu aveți spațiu!
Acest tutorial are o serie de componente care merg pe el. O încărcătură de imagini, a treia
party Dock plugin, și componenta jQuery UI.draggable, împreună cu, desigur,
miezul jQuery (v1.2.6). Notă: multe dintre imagini sunt probabil
protejate de proprietarii lor. Cateva icoane de docuri au fost luate din pachetele lor
și am folosit Wallpaper-ul Leopard Default. Dar ele [wallpapere] sunt interschimbabile!
Plasați toate acestea într-un director. Un director numit "imagini" (cu imaginile din interiorul),
un folder numit "js" cu JavaScript în el.
Planul de atac pentru acest tutorial este după cum urmează. Pe desktop, va exista a
Fereastră trasă și o docă. Există o altă div numită #dashboardWrapper
se ascunde când jQuery este folosit. Se va degrada fără JS, dar nu bine. Planul JS
de atac le voi explica când ajungem acolo.
În afară de icoanele folosite, aș dori să subliniez că acest lucru nu este atât de extins
ca să ieșiți din afară, să obțineți widget-uri dinamice etc. Puteți să faceți asta singuri! Acest
oferă doar "cadrul" de bază pentru a lucra cu. De fapt, când am început să scriu
acest tutorial a inceput ca o tema WordPress, cu widget-urile ca widget-uri
pe tabloul de bord. Este încă posibil! Îți voi explica mai târziu.
Creați un fișier numit index.html. Aceasta va fi pagina care arată ca Leopard.
Trebuie să vă relocați toate JavaScript-urile și stil.css pe care îl vom crea mai târziu. Doar
începeți cu aceasta:
Leopard Tablou de bord
Pagina are apoi 3 secțiuni minime. 2 Divs în cadrul #wrapper (o fereastră și
tabloul de bord real) și docul din afara ambalajului. Adăugați aceste secțiuni în:
Leopard Tablou de bord
Acum avem 3 divizii noastre de bază goale. Trebuie să-i umplem pe aceștia
conţinut. Deoarece fereastra Draggable este doar o fereastră veche, o puteți completa
Ce vrei. Am creat un fel de lucru TextEdit, care este în principiu generic
fereastră cu text. Va fi ulterior stilat! Plasați-o în cadrul ferestrei ".draggableWindow".
Tabloul de bord Leopard cu jQuery
jQuery este minunat!
jQuery este destul de rece. Adică, uitați-vă la toate lucrurile minunate pe care le poate face. Un doc (Sourced from Wizzud.com! Thanks!), Un tablou de bord și ferestre draggable! Minunat! Dacă nu ați ajuns aici prin intermediul acestuia, acesta este demo-ul unui tutorial de la Nettuts.
Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ultima lucrătoare aliquip ex a commodo consequat. Duis aute irure dolor în republicarea în voluptate comandă esse cillum dolore eu fugiat nulla pariatur. Cu excepția cazului în care nu există un prozident, sunt în culpa qui officia deserted molit anim id est laborum.
După cum sa spus, acesta este doar un text de umplere pentru fereastra noastră. Se pare cam gros, la fel
o pagină neatinse.
Următoarea încărcare a conținutului este tabloul de bord. În esență, acest lucru poate fi indiferent de
Tu vrei. Serios, băieți, dacă luați asta în mâinile voastre, mergeți la pământ. Poti
stilul pe care îl doriți în cadrul acestuia ar arăta ca widget-uri. Așa cum am spus, nu este extinsă,
nu arată widget-uri reale. Voi explica la sfârșit cum se integrează cu WordPress.
Plasați-o în cadrul #boardboardWrapper:
Una dintre widget-uri are un text. Aceasta este doar pentru a arăta că puteți face tot ceea ce doriți.
Trateaza-le ca divs! Pune orice! Un mini-blog!
În cele din urmă, avem nevoie de doc. Datorită naturii modului în care pluginul jqDock funcționează, noi
nu poate folosi un ul pentru el prea ușor. Durere, nu? Deci, în schimb, sunt doar câteva imagini
unul lângă celălalt în div:
Vedeți unul cu id de tablou de bordLaunch? Acesta va fi manipulat ulterior cu jQuery
pe.
Totul merge conform planului, pagina dvs. ar trebui să aibă o grămadă de text și imagini. Widget-uri
și icoane, text și anteturi. Totul e nesolicitat momentan.
CSS va face în esență desktop- parte a paginii. Va include
fundalul, etc. Să trecem la asta. Creați un fișier nou numit 'style.css',
și plasați-l în același director ca și celelalte fișiere. Începeți editarea:
In general, adaug informatii pe partea de sus a CSS-ului meu cu resetul meu, asa ca stiu ce este fisierul
pentru:
/ * Nume: Leopard Autor: Nettuts / Harley Alexander Descriere: Pentru un tutorial la http://net.tutsplus.com/, scopul său este de a arăta cum jQuery și jQuery UI pot crea un desktop de tip leopard. Deși de bază, acesta incompresează tabloul de bord și Windows! * / * marja: 0; umplutura: 0; a culoare: # 005693;
Simplu. În continuare, corpul și stilul ferestrei:
corp fundal: url (images / background.jpg) centru de vârf; font: 75% / 18px "Lucida Grande", Lucida, Verdana, sans-serif; overflow: ascuns; .rapidăWindow width: 500px; overflow: auto; clar: ambele; padding: 0 20px; plutește la stânga; margine: 40px; .cărturisireWindow h1 lățime: 100%; înălțime: 21px; plutește la stânga; font-size: 10px; text-align: centru; text-indent: -67px; fundal: url (imagini / h1long.png) no-repeat; text-shadow: #fff 1px 0 1px; cursor: implicit; .rapidăWindow h1 span width: 67px; înălțime: 21px; plutește la stânga; fundal: url (imagini / h1short.png) no-repeat stânga; .content fundal: alb; padding: 36px; .content h2 margin-bottom: 1em; #smaller lățime: 300px; float: dreapta; margine: 10 pixeli; margin-top: -100px;
toate relativ ușor. Modul în care h1-urile sunt codificate cu cele folosite anterior
tehnica ușii glisante pentru a vă asigura că bara superioară este redimensionată corespunzător.
ID-ul #smaller era o altă cutie modală pe care am făcut-o, doar pentru a verifica dacă a funcționat. A verifica
singur, creați o div nouă cu ID-ul #smaller și cu un conținut h1 / #
div, puteți introduce un mesaj scurt. Deoarece #smaller a fost definit ca fiind o lățime
de 300px, va fi doar asta - o cutie modală mică.
Doar câteva stiluri sunt necesare pentru tabloul de bord propriu ... Doar pentru a face elementul listei
widget-urile arata destul, si stil widget-ul notepad!
.widget poziție: relativă; z-index: 9999; plutește la stânga; marja: 1em; listă: nu există; #notepad padding: 10px 20px; lățime: 185px; înălțime: 191px; fundal: url (imagini / widget-uri / sticky.png) centru non-repeat; font-size: 10px;
În general, cea mai mare parte a CSS-ului Dock-ului se face în plug-in-ul jQuery, dar este degradabil
motive, și * centrarea * dur, are încă nevoie de un pic de propriile CSS:
#dock position: fixed; marja: 0 auto; fund: 36px; stânga: 37,5%; min-lățime: 20 pixeli; max-lățime: 400px; z-index: 9999; #dock img float: stânga;
Și, după toate acestea, codul (deși încă dur ca curaj!), Ar trebui să fie Desktop-ul tău Leopard
arata cam asa:
Woo hoo! Partea distractivă! Prea toți acei domnitori web care disprețuiesc excesul de JS, îmi cer scuze
dar ai câștigat pe alții învățați ceva? Acum, motivul pentru care am vrut să scriu acest tutorial
atât de rău este pentru că ma făcut de fapt gândi pentru a face acest lucru
- nu pentru a spune alte lucruri nu! De asta trebuia să mă gândesc foarte lateral
pentru a ajunge la produsul finit. Cu răbdare, o să pot aplica și altor proiecte
- vă permite să sperați și voi!
Înainte de a începe jQuery întotdeauna scriu o versiune în limba engleză a ceea ce este necesar. Ca o regula
de Thumb.
Din fericire (sau, din păcate, în funcție de modul în care te uiți la ea) se dovedește după
imaginându-l, este mai mult decât atât. Creați un fișier numit "dashboard.js",
și plasați-l în directorul JS. Fișierul JS a fost înrădăcinat cu vârste în urmă (în HTML
secțiune) este acum acolo! Începeți editarea!
Începeți întotdeauna cu document.ready ()!
// Nume: jQuery -> Leopard $ (document) .ready (function () );
A comentat intens, prin urmare, auto-explicativ. Introduceți, de fapt, docul, inițiați
draggables:
Accentsconagua
// lansați docul $ ('# dock') jqDock (); // draggables defenition $ ('. widget') draggable (); $ ('. draggableWindow'). draggable (handle: 'h1'); Dacă vă uitați acum la docul dvs., se mări (sau ar trebui oricum)! Notă:
noi, cei de la Nettuts, probabil că nu vă vom ajuta prea mult cu această tehnologie,
ca acesta este treaba lui Wizzud !. Ar trebui, de asemenea, să puteți
pentru a glisa în jurul widget-urilor afișate și fereastra de dialog (numai de h1 de-a lungul
partea de sus ca mâner!).
> Eh? Închideți zona? Vedeți dacă tocmai i-ați spus lui jQuery să închidă tabloul de bord atunci când #dashboardWrapper
a fost clickat oricum (inclusiv widget-urile care au fost apasate), atunci ar deveni o durere
pentru că nu puteați să vă mutați în jurul widget-urilor. Deci, o "Zonă Închisă" trebuie să
să fie creat care este un frate pentru widget-uri (nu cuibărit în jurul), care are un z-index
mai puțin decât widget-urile, dar mai mult decât desktop-ul. Drăguț, nu? Apare stratul
ceva de genul:
> Sunt folosite multe CSS-uri. Acest lucru este de a extinde tabloul de bord pentru a se potrivi cu browser-ul real
fereastră și setați opacitatea la 0, astfel încât animația să se poată stinge. Ascunde întregul
element din vedere.
// ascunderea inițială a tabloului de bord + adăugarea lui 'closeZone' $ ('# dashboardWrapper') .css (position: 'absolute', top: '0px', left: '0px' '100%', opacitate: '0') .hide () .append ('„); Pesă ușoară!
La fel ca #dashboardWrapper, zona Close trebuie să fie aruncată în sus pentru a umple fereastra.
Zona apropiată este ceea ce de fapt are și fundalul negru semipreparat!
// Poziționați și ascundeți "#closeZone". $ ('# closeZone') .css (poziția: 'absolută', top: '0px', stânga: '0px', lățimea: '100%', înălțimea: '100%', opacitatea: : '# 000'); Acum, magia se întâmplă! Afișând tabloul de bord atunci când se face clic pe butonul #dashboardLaunch,
se afișează zona închisă. Acest cod de cod, însă inițiază numai
Tablou de bord. În prezent nu există nici o modalitate de a scăpa de ea, cu excepția răcoritoare - Close Zone lui
Jobul este următorul!
// lansați tabloul de bord + inițiază 'closeZone' $ ('# dashboardLaunch') faceți clic pe (funcția () $ ('# dashboardWrapper') .show () .animate (opacity: '1', 300); ); 
> Zona închisă primește în cele din urmă lumina reflectoarelor.
// jobul lui closeZone: a scăpa de tabloul de bord $ ('# closeZone'). faceți clic (funcția () $ ('# dashboardWrapper') .animate (opacity: 0 ', 300). ; Acum, aceasta are o notă interesantă. Din anumite motive, jQuery nu va face animația
cu excepția cazului în care ".hide" are un timp de 1/10 din milisecundă. Excelent funcționalitate escapabilă!
În afară de zona din apropiere, singurul alt lucru evident care va trebui să scape
Tabloul de bord cu animație este dacă se face clic pe o legătură. Cum? Pur și simplu aceeași "funcție"
ca și în zona închisă.
// fadeout a tabloului de bord și atunci când se face clic pe un link în $ ('# dashboardWrapper a') faceți clic pe (funcția () $ ('# dashboardWrapper') animate (opacity: '0', 300) ; Si asta e! Dashboard.js ar trebui să arate ceva de genul
acest fișier js
Așa cum a promis, o simplă împingere în direcția corectă cu privire la modul de utilizare a acestui Cu WordPress.
În mod fundamental, tot codul este în cele din urmă HTML și JavaScript când ajunge la browser
end, nu? Nu PHP, nici ASP.NET, poate doar XML. Acest principiu este esențial
pentru a înțelege, deoarece înseamnă că puteți aplica codul oricui mediu, prevăzut
au aceleași identități și clase.
Luați în considerare divulgarea "#content" a blogului dvs. WordPress, dată fiind o clasă de "draggableWindow".
Dați-i o h1 în partea de sus, și hei presto! Conținutul postat al ferestrei. Bara laterală, dată
un ID (sau o schimbați în codul JS) din "#dashboardWrapper", va fi automat
ascunde până când este sunat. Asta înseamnă că toate widgeturile dvs. pentru arhive și categorii
și totul este acum widget-uri separate.
Chiar și lateralele laterale dinamice au lis cu clase specifice, permițându-le să fie decorate
cum ar fi widget-urile reale! Dock-ul, aș spune că este singurul lucru care ar avea de fapt nevoie
adaugat. Nu-ți face griji! Datorită poziționării sale, este doar un div cu o grămadă de
imagini în el.
Dacă doriți ca celelalte pictograme Dock să facă legătura între locații, o etichetă în linie nu împiedică nimic!
HTML-ul static care este scos din WordPress (sau orice tehnologie web, într-adevăr) este
aplicabile oricărui CSS sau JS creat, cu condiția ca ID-urile și clasele să fie aliniate.
Bine, puneți-i în pace pe cei de la Grandaddy-urile care nu folosesc JS-Extensive-JS și nu faceți tot ce este mai bun
să folosiți jQuery în această măsură. Acest tutorial a fost doar pentru a arăta cât de distractiv animație
poate fi într-adevăr, și cât de simplu este de a crea efecte. De fapt, dacă cineva a văzut
orice efecte voi aștepta de bunăvoință până la 5 au fost propuse și scrie un articol despre
cum se face fiecare!
