Share
Săptămâna trecută, te-am făcut să creezi un tablou de bord / Desktop desktop. Voi o să vă plimbați complet când veți auzi ce este în acest tutorial plin de gemuri! Mai multă concentrare pe tabloul de bord (jur că este mai rece decât suna și necesită mult cod) și chiar mă duc în modul de a crea un stack (separat de doc, îmi pare rău că jqDock nu-i place cuibărit
Ca și în tutorialul precedent, trebuie să notez această declarație de declinare a responsabilității! Nu dețin nici unul dintre imaginile folosite în acest tutorial, și nici tu. Sunt drepturi de autor pentru vânzătorii lor, fie că este vorba de Apple, inc, Adobe, etc. Folosirea icoanelor este o chestiune de integritate, deci nu-l abuzați!
În al doilea rând, un nou fișier jQuery.UI va înlocui fișierul js draggable. Aceasta este în esență toate pachetele de interacțiuni. Descărcați codul jQuery.UI. Veți avea nevoie și de produsul final al tutorialului din săptămâna trecută! Asigurați-vă că o extindeți în directorul propriu! Vom adăuga asta. O mulțime dacă sunt necesare și imagini. Imagini noi. Asigurați-vă că extindeți acel zip în directorul "imagini", astfel încât orice foldere noi să fie îmbinate cu părțile lor counter de săptămâna trecută. Îmi cer scuze pentru această confuzie. Structură de fișier prost, rău. Asa de. Fișierele care necesită adăugarea:
La fel, link-urile jQuery.ui necesită editare.
Deși ar putea să nu pară așa, este nevoie de o mulțime de cod pentru aceste câteva lucruri:
Chiar înainte de a începe, chiar îmi cer scuze, dar au fost câteva lucruri care trebuiau schimbate de săptămâna trecută. CSS-ul #dock ar trebui să citească:
#dock position: fixed; marja: 0 auto; fund: 38px; stânga: 40%; z-index: 0; listă: nu există;
ZIndex-ul # closeZone din dashboard.js pe linia 24 ar trebui să fie 99 nu 9999
Deci, vă permite să scufundați chiar în ea, și începeți cu Stacks. Sau mai mult un Stack. Din nefericire datorită modului în care jqDock funcționează, este imposibil să cuibuiți stive în jqDock fără a edita core core, care este mult mai departe decât intenționează acest tutorial. Deci, în schimb, vom crea un stiva în partea dreaptă jos a paginii. Particulele mai grele ale stivei de codare sunt a) înălțimea de incrementare pentru fiecare element și curba. Din fericire, o bucla combinata cu matematica poate face aceasta munca grea pentru noi.
Să începem cu adăugarea structurii HTML a stivei. Acum, datorită naturii stiva, dacă doriți să o utilizați pe un alt site web, puteți! În principiu, nimic în linie în cadrul
- Acrobat
- Deschidere
- Photoshop
- Safari
- căutător
Prima imagine este substituentul dosarului. Aceasta este ceea ce activează docul, deci este necesar. (Cu toate acestea, când folosim selectorii jQuery, sunt sigur că ați putea folosi: mai întâi pentru a obține primul element de andocare în cazul în care / nu / doriți un coș care conține).
Spre deosebire de primul tutorial, voi include CSS și jQuery pentru fiecare pas, doar ca design-ul să nu se încurce complet. Deschideți stil.css de săptămâna trecută și adăugați în partea de jos:
.stivă poziție: absolută; fund: 0; dreapta: 100px; .stack ul list-style: none; poziția: absolută; top: -30px; z-index: -9; .stack ul li poziție: absolută; .stack ul li span afișare: nici una; / * Sunt pentru jquery * / .stack .openStack li span display: bloc; Poziția: absolută; top: 17px; dreapta: 60 px; înălțime: 14px; linia-înălțime: 14px; frontieră: 0; background-color: # 000; culoare: #fcfcfc; text-align: centru; opacitate: .85; padding: 3px 10px; raza de graniță: 10 pixeli; -webkit-border-radius: 10px; -moz-border-radius: 10px; opera-border-raza: 10px; text-shadow: # 000 1px 1px 1px;
Stiva dvs. va arata acum ca o stivă închisă, dar nu o puteți deschide. Acest stive doar (nu, nici un joc de cuvinte) toate pictogramele deasupra fiecăruia, astfel încât acestea să fie comprimate într-un mic pătrat. Ultimul selector este pentru jQuery. Când stiva este deschisă, clasa 'openStack este adăugată la ul. Îmi cer scuze pentru acei hărțuitori ai CSS3, este cea mai rapidă și cea mai eficientă metodă de ao obține chiar în majoritatea browserelor moderne.
În limbajul englezesc, stiva trebuie să se deschidă atunci când se face clic pe img, împingând fiecare (indiciu ...) li în incrememnts, și în dreapta puțin, în timp ce redimensionați la o dimensiune mai mică. Apoi, când faceți clic din nou, totul revine la normal.
() (functie () // aceasta functie, pentru fiecare element creste pozitia de sus cu 50px, // si intreaga folosire, ecuatia: value = (value + 1) * 2 Ambele variabile // încep de la 0., funcția () // aceasta inversează doar cele de mai sus);
A doua funcție este ușoară, dar prima este o durere.
Accentsconagua
var vertical = 0; var orizontal = 0; (top: '-' + vertical + 'px', stânga: orizontală + 'px', 300); verticale = vertical + 50; orizontal = (orizontal + 1) * 2;); $ ('~ ul', acest) .animate (top: '-50px', stânga: '10px', 300) .addClass ('openStack'); $ ('~ ul> li> img', acest) .animate (lățime: '50px', marginLeft: '9px', 300); Woo, jampacked cu șir de întreruperi, variabile și matematică. Selecționari interesanți, nu? - Sunt "frații" lui Erg. Math. Lasă-mă să explic. Primele 2 variabile sunt pentru poziția verticală și poziția orizontală (curba).
Creșterea incrementală este aceeași de fiecare dată când, dacă nu doriți o linie dreaptă orizontală, fiecare poziție orizontală trebuie să fie puțin mai mare decât restul. În acest caz, crește cu numărul precedent plus unu, de 2 ori, așa că va merge 2, 6, 14, 30, 62, 126 etc. Știu că sunt numere ciudate, dar funcționează. Utilizați orice ecuație doriți!
Funcția "fiecare" este similară, de exemplu, o buclă WordPress. Această funcție se produce de fiecare dată când se folosește elementul următor. Ecuația "value = (value + 1) * 2" înseamnă "valoare nouă" este egală valoare veche la care se adauga una, atunci asta ori Două.
Prima linie de animație adaugă variabilele (în plus) de fiecare dată când este ruptă prin șarja de șir. Ultimele două linii sunt de dimensiune. Cealaltă jumătate a funcției de comutare, readuce totul la normal:
(top: '20px', stânga: '-10px', 300); $ ('~ ul', acest) .removeClass ('openStack'). $ ('~ ul> li> img', aceasta) .animate (lățime: '79px', marginLeft: '0', 300); Simplu! Acum, stivele dvs. de jQuery se vor anima cu succes, chiar și în curbe! Din nefericire, rotația este mai dificilă. Deși atunci când HTML5 iese în 2022 (-_-), eticheta de pânză ar putea avea suport complet pentru asta.
Așa că vom adăuga un pic la Tabloul de bord. În primul rând, un panou Adăugați widgeturi (Wont face adăugarea reală mai târziu). După aceasta, închiderea widget-urilor va fi posibilă atunci când acest panou este deschis. În cele din urmă, posibilitatea de a adăuga propriile widget-uri din acest panou. Utilizează câteva metode de selecție foarte diferite. Adăugarea widget-urilor acoperă extensiv Droppables, deoarece funcția drop este destul de mare.
În primul rând, HTML. Adăugați acest lucru chiar înainte de închiderea #dashboardWrapper div.
Adăugați / eliminați widget-uri
Lipicios
"OpenAddWidgets" este crucea / plusul mic care deschide și închide panoul. Elementele din listă sunt widgeturile disponibile (creați cât de mult doriți!). Imaginile descărcate sunt micile degete. Acestea vor deveni traggables, și veți putea să le aruncați pe #closeZone și, eventual, widget-uri adăugate la lista #widgets.
În prezent, acest lucru pare a fi un pic de mizerie;
Dar cu unele CSS vom rezolva asta.
#addWidgets position: absolute; z-index: 9999; fund: 0; stânga: 0; lățime: 96%; înălțime: 164px; fundal: url (imagini / dashpanel.png) partea de jos repeat-x; umplutură: 0 2%; #openAddWidgets display: block; lățime: 36px; înălțime: 36px; fundal: url (imagini / opendashpanel.png) centru; poziție: relativă; z-index: 9999; text-liniuță: -9999em; #dashPanel ul style-style: none; margin-top: 27px; #dashPanel ul li float: stânga; padding-right: 30px; #dashPanel ul li img afișare: bloc; #dashPanel ul li span lățime: 74px; afișare: bloc; text-align: centru; font-weight: bold; text-shadow: #fff 1px 0 1px; culoare: # 17243e; padding-top: 10px;
Grea cu poziționare, z-indexare și plutitoare, acest lucru ar trebui să adune un astfel de efect (panoul nu este ascuns):
În cele din urmă, jQuery să se ascundă și să o arate. Adăugați următoarele sub comentariul "// draggables definition" (de dragul organizării):
$ ('# addWidgets ul li img'). draggable (helper: 'clone'); Și adăugați aceasta sub "// ascunderea inițială a tabloului de bord + adăugarea blocului" closeZone ":
// ascunderea inițială a #dashPanel și a widgeturilor adiționale $ ('# addWidgets'). css (bottom: '-118px'); Acum pentru codul de comutare. În limba engleză, când se face clic pe butonul "Deschis", glisați panoul în sus. După ce faceți clic din nou, glisați panoul în jos. Să începem cu trecerea.
// deschide / închide panoul dashpanel ('# openAddWidgets') comuta (funcția () // deschide tabloul de bord, animație și toate, funcția () // opusă cele de mai sus); Astfel, funcția de deschidere va fi în primul gol, în timp ce închiderea în al doilea. Primul:
$ (acest) .css (background: 'url (images / closedashpanel.png)'); $ ('# addWidgets'). animați (bottom: '0px', 500); Și al doilea, inversând de mai sus:
$ (acest) .css (fundal: 'url (images / opendashpanel.png)'); $ ('# addWidgets'). animați (bottom: '-118px', 500); În cele din urmă, la fel ca Leopard, ar trebui să se închidă atunci când utilizatorul revine la Desktop, nu? Adăugați acest lucru pentru a închide funcția # # closeZone: închiderea funcției Dashboard (în cadrul acesteia!):
$ ('# openAddWidgets'). css (background: 'url (images / opendashpanel.png)'); $ ('# addWidgets'). animați (bottom: '-118px', 500); Acum, dacă faceți clic pe micul plus în partea stângă jos atunci când tabloul de bord este deschis, ar trebui să animați! Minunat!
Aceasta sa dovedit a fi o fiară și jumătate. O mulțime de cod pentru asta ... Yay! Din fericire, este doar jQuery! Să începem prin definirea Droppable; #closeZone. Plasați aceasta sub definițiile Draggables:
/ / droppable (accepta: '.widgetThumb', drop: functie (ev, ui) );
Practic, #closeZone poate accepta degetul mare în panoul de control ca și droppables și suntem pe punctul de a facem ce se întâmplă în legătură cu căderea.
În limbaj ușor de înțeles, așa merge. Variabilele pentru poziția mouse-ului trebuie să fie găsite astfel încât poziția picăturii să fie acolo unde o dorim. O altă variabilă pentru tipul de widget de adăugat este necesară. Pe drop, widgetul trebuie să fie atașat, o imagine diferită în funcție de variabila widgetType. Acum, pentru a fi diferit, stickiile vor fi editate (Nici un fel!). O textare va fi adăugată, pentru a permite scrierea. Deoarece toate definițiile dragi se întâmplă în sarcina documentului, acestea vor trebui redefinite de fiecare dată când un widget este atașat DOM, astfel încât să fie aplicat celui mai nou.
Vom începe cu variabilele.
var x = ev.clientX - 100; var y = ev.clientY - 50; var widgetType = $ (ui.draggable) .attr ('id'); Din păcate, nu putem obține lățimea și înălțimea imaginii care urmează să fie atașată prea ușor (pentru a centra în picătură). Deci, trebuie să ghicim, prin compensarea poziției mouse-ului cu 100 și 50, deci nu este în partea stângă sus. Variabilele JavaScript "cleintX" și "clientY" sunt în principiu poziția mouse-ului. Și selectorul interesant; ui.draggable, este elementul care tocmai a fost târât! Multumesc jQuery.ui! Acum pentru appendage:
$ ( '# Widget-uri'). Adăugați (“
Permiteți-mi să explic cum funcționează variabilele în anexă. Pentru a da o clasă noului widget pentru personalizare, adăugarea "..." + widgetType + "Widget" ... "va reveni la o clasă similară cu" stickyWidget "sau" weatherWidget ". Stilul inline (îmi pare rău că este în linie! Nu mă împușca!) Determină poziția absolută a widgetului de variabilele, care sunt, desigur, coordonatele mouse-ului. Așa cum am menționat, cei mai noi membri DOM au nevoie de orice modificări sau anexe jQuery [făcute pe încărcarea documentului], deoarece jQuery nu recunoaște noi membri DOM. Pentru ultimele două rânduri, jQuery trebuie să atașeze textarea (astfel încât să puteți edita textul), iar noul Widget trebuie să devină un draggable.
Pentru ca toate acestea să funcționeze, este necesar un CSS. Înlocuiți, în stil.css, selectorul ".widget" și atributele cu:
.widget poziție: absolut; z-index: 9999; plutește la stânga; marja: 1em; listă: nu există; .stickyWidget padding: 15px 20px; lățime: 185px; înălțime: 155px; fundal: url (imagini / widget-uri / sticky.png) centru non-repeat; .stickyWidget> img afișare: niciunul; . stickyWidget textarea înălțime: 100%; lățime: 100%; fundal: 0; frontieră: 0; contur: 0; font-size: 16px; font-family: 'Marker Felt'; overflow: ascuns;
Acest lucru face ca lipiciosul să arate ca un lipicios. Tu, sau nu vei avea fontul Marker Felt, asta folosește widgetul lipicios. Pentru ca widgetul original să rămână destul, împachetați textul, mai degrabă decât în
dar cu: