Accentsconagua
Exemplu de titlu articol
Lorem ipsum dolor ...
Share
Stocarea locală HTML5 este ca și cookie-urile pe steroizi; este incredibil de simplu de utilizat și totuși atât de puternic. În acest tutorial, vă vom arăta cum să creați funcționalitatea "note lipicioase", care permite utilizatorilor să ia note persistente în timp ce navighează pe site-ul dvs..
Datorită naturii dinamice a acestui proiect, nu există prea multe pentru a codifica în mod obișnuit marcajul semantic vechi. Vom simula doar o pagină web prin a pune împreună un conținut de umplere:
HTML 5 este complet Exemplu de titlu articol
Lorem ipsum dolor ...
Există câteva lucruri importante de observat aici: includeți două fișiere CSS: primul este stilul simplu pentru pagină, pe care l-am numit default.css. Apoi, avem un fișier CSS special pentru stilurile legate de notele noastre lipicioase; se numeste stickies.css, și după cum puteți vedea, el trăiește în dosarul "stickies". În partea de jos, avem patru scripturi:
stickies.js, care trăiește în directorul "stickies"Apoi, avem o etichetă de script goală pe care o vom folosi pentru a porni motorul puțin mai târziu.
Și asta este pentru HTML!
Conținutul default.css este incredibil de simplu:
corp marja: 0; padding: 0; fundal: #ccc; font: 14px / 1.5 "Helvetica Neue", Helvetica, Arial, san-serif; articol, subsol, antet display: block; articol width: 880px; fundal: #fff; margin: auto; padding: 40px; antetul articolului color: # 474747; border-bottom: 1px solid # 474747 footer articol font-size: 90%; Culoare: #ccc;
Asta e; acum, există CSS de la stickies.css să avem grijă ... dar nu avem încă acel markup. Deci, haideți să începem un JavaScript, iar când sa terminat, vom examina CSS pentru notele lipicioase.
Iată scheletul pentru aplicația noastră JavaScript:
var STICKIES = (functie () var initStickies = functie () , openStickies = function () , createSticky = , markUnsaved = functie () ; retur open: openStickies, init: initStickies; ());
Avem câteva tehnici interesante care se petrec aici. Prima este funcția de auto-implicare: s-ar putea să pară că atribuim o funcție variabilei colante, dar dacă vă uitați atent la sfârșitul funcției, veți vedea că o conducem imediat. Ca o sugestie - pentru a ne reaminti că aceasta nu este o funcție normală - împachetăm întreaga funcție în paranteze. Asa de, colante nu este o funcție, este valoarea returnată din acea funcție, care este un obiect, în acest caz.
Asta ne aduce la următoarea tehnică: închiderea. Observați că dintre cele șase funcții create, doar două dintre ele sunt expuse utilizatorului (într-adevăr, doar una este necesară pentru utilizarea pe care o planificăm; dacă vrem să construim suport pentru crearea de note pe site-ul dvs., am putea expune createSticky și deleteSticky). Chiar dacă funcția de auto-implicare se termină înainte de a folosi metodele, vom putea folosi celelalte funcții pe care le-am definit.
Bine, să trecem la conținutul acestor funcții.
Vom începe să vă uitați la initStickies funcţie:
var initStickies = funcția initStickies () $ ("", text:" + "," class ":" add-sticky ", faceți clic pe: function () createSticky ();, Acest lucru este destul de simplu. Vom folosi jQuery pentru a crea elemente destul de puțin și folosim o sintaxă specială în v. 1.4: care trece un obiect literal cu specificațiile elementului ca al doilea parametru pentru funcția jQuery. Aici creăm un buton pentru a crea o notă nouă. Asta înseamnă că avem nevoie de un nou div; setăm textul la "+" și îi oferim o clasă "add-sticky"; apoi setăm un handler pentru apelare createSticky (este important să apelați createSticky din interiorul unei funcții, și nu aveți apelul de preluare a clicurilor direct la createSticky; asta pentru ca createSticky poate lua un singur parametru și nu vrem ca acesta să fie obiectul evenimentului). În cele din urmă, noi suntem pregătiți pentru asta div la corp. Încheiem prin setare initStickies la nul; da, în mod esențial scăpăm de funcția pe care o conducem. Acest lucru ne asigură că această funcție va fi executată o singură dată; nu vrem ca utilizatorul API-ului nostru să adauge în mod inadecvat mai multe butoane "add note" pe pagină.
Să trecem la următoarea metodă, openStickies:
openStickies = funcția openStickies () initStickies && initStickies (); pentru (var i = 0; i < localStorage.length; i++) createSticky(JSON.parse(localStorage.getItem(localStorage.key(i)))); ,
Începem prin a alerga initStickies... dar ce e cu sintaxa fantezie? Păi, probabil că ești familiarizat && operator: operatorul boolean ȘI. De obicei, îl folosești pentru a verifica mai multe condiții într-o declarație if. Iată ce face de fapt: el evaluează prima expresie, iar dacă rezultă adevărat, va continua să evalueze cea de-a doua expresie. În acest caz, dacă initStickies nu a fost încă setată la zero, vom rula funcția. Acest lucru evită eroarea care ar veni din încercarea de a rula o variabilă nulă ca o funcție.
Apoi, ne întoarcem peste fiecare element în localStorage. Iată ce facem în această buclă (din interior spre exterior):
localStorage.key () este o funcție excelentă care returnează numele cheii localStorage valoare; este nevoie de un număr ca parametru. Este o modalitate excelentă de a introduce buclă peste fiecare element localStorage.localStorage.getItem () pentru a obține valoarea sa.JSON.parse (); asta vine de la biblioteca lui Crockford. Pentru că stocăm câteva valori pentru fiecare notă pe care o folosim JSON.stringify () pe celălalt capăt pentru a transforma un obiect într-un șir JSON pe care îl stocăm. Aici, îl convertim dintr-un șir într-un obiect.createSticky (), care o transformă într-o notă lipicioasă.Acum, să ne uităm la asta createSticky metodă.
createSticky = funcția createSticky (date) data = data || id: + new Date (), top: "40px", stânga: "40px", text: "Notă aici" return $ ("", " class ":" lipicios "," id ": data.id) .prepend ($ ("", " class ":" sticky-header ") .append ($ ("", " class ":" status-lipicioase ", faceți clic pe: salvațiStick)) .append ($ ("", " class ":" close-sticky ", text:" gunoi ", faceți clic pe: funcția () deleteSticky ($ (this). ))) .append ($ ("", html: data.text, contentEditable: true," class ":" lipicioase ", tasta: markUnsaved)) (position: "absolute", "top": data.top, "left": data.left) .focusout (saveSticky) .appendTo (document.body);, Da, este lung, dar nu va fi prea greu. Mai întâi, observați că această funcție ia un obiect de date; după cum tocmai am văzut openStickies, transmitem datele stocate acestei funcții. Cu toate acestea, dacă nu transmitem date (adică creăm o notă de brand nou), vom crea obiectul notei implicite. Deoarece toate notele trebuie create la un moment dat, toate notele vor începe cu această configurație. Observați că pentru id-ul notei, folosim +data nouă (); că operatorul prealabil unary plus convertește data obținută de la o nouă dată la un număr, deci această afirmație are ca rezultat un număr reprezentând numărul de milisecunde din 1 ianuarie 1970. Evident, acest număr va fi în continuă schimbare, deci este o modalitate excelentă de a identificați în mod unic fiecare notă.
Restul funcției este un șir lung de metode jQuery înlănțuite. Înainte de a trece prin aceasta, observați că vom întoarce rezultatul. Dacă am expus această metodă dezvoltatorilor folosind mirco-API, vom reveni la o referință la elementul div divizibil.
Deci, iată ce se întâmplă:
Mai întâi, noi creăm div care este coaja notei lipicioase. Folosind acea sintaxă jQuery 1.4, îi oferim o clasă de "lipicios" și id-ul din obiectul de date.
Apoi, noi predispunem la a div la acel; acest div devine o clasă "sticky-header". div.sticky-header apoi se adaugă două spanuri. Primul, span.sticky status, primește un handler de apel care apelează saveSticky funcţie. Cu toate acestea, aceasta este de fapt o caracteristică ascunsă: acest interval va afișa starea lipicioasă: salvată sau nemântuită. Vor fi câteva moduri în care lipicioasa își salvează datele localStorage; este posibil ca utilizatorul să se gândească că apăsând butonul "nesigur" va salva nota, astfel că îi vom oferi acea funcționalitate. Al doilea interval, span.close-lipicios, va fi butonul de ștergere: atunci când utilizatorul face clic pe el, vom elimina materialul lipicios localStorage, prin deleteSticky metodă. Transmitem acea metodă id-ul notei.
Apoi, adăugăm o altă divă principală div.sticky; observați că am setat html proprietate la data.text; când salvăm textul notei, folosim jQuery html () metoda, deoarece utilizarea text() scapă de pauze de linie. Am stabilit și noi contenteditable: true pe acest div, pentru că este conținutul notei. Ca atare, devine, de asemenea, clasa lipicios conținut. În cele din urmă, atunci când o tastă este apăsată pe acest div (adică utilizatorul schimbă conținutul), dorim să îl marchem ca neșurat, așa că vom numi acea funcție (pe care o vom face în curând).
Acum, folosim caracteristica jQuery UI draggable pentru a face ca nota noastră lipicioasă să poată fi mutată. În obiectul parametrului nostru, folosim mâner proprietate pentru a face ca notele noastre să fie mobile numai din bara de antet. grămadă proprietatea este un selector pentru elementele draggable care doresc să "stiveze"; prin setarea acesteia, nota curentă târâtă va ajunge întotdeauna în partea de sus. În cele din urmă, când începem să tragem nota, vrem să o marchem ca fiind "nesăvârșită" (pentru că trebuie să-i salvăm și coordonatele) și atunci când ne oprim din dragoste, vom salva acele lipicioase.
Apoi, punem câteva stiluri pentru noi div.sticky; îl poziționăm absolut și apoi setăm valorile de sus și de stânga la cele din obiectul de date. În acest fel, nota își va păstra poziția și conținutul atunci când actualizăm pagina.
În cele din urmă, vom seta o funcție de gestionare a evenimentelor atunci când noi focusout din lipicios (în esență, faceți clic în afara acestuia după ce faceți clic în interiorul acestuia): vrem să salvăm lipicios. În sfârșit, o vom adăuga corpului. Pentru referință, iată structura html pe care ar trebui să o generăm:
GunoiNotă aici
Și asta e al nostru createSticky funcţie.
Acum avem deleteSticky funcţie; este foarte simplu:
deleteSticky = funcția deleteSticky (id) localStorage.removeItem ("sticky-" + id); $ ("#" + id) .fadeOut (200, funcția () $ (this) .remove ();); , După cum vă amintiți, deleteSticky funcția ia parametrul id al unei note. localStorage.removeItem () este metoda orcii: îi transmitem cheia la o valoare stocată local pentru a elimina acea pereche cheie-valoare (Observați că atunci când stocăm datele notei, suntem prepending "lipicios" la id). Apoi, găsim elementul cu id-ul dat, îl estompează și îl eliminăm. Notă șters!
A doua-la-ultima ar putea fi astăzi cea mai importantă metodă: saveSticky: acesta este cleiul care face ca totul să funcționeze.
SaveSticky = funcția saveSticky () var that = $ (this), sticky = (that.hasClass ("status-sticky")) || that.hasClass ("content-sticky"))? that.parents ('div.sticky'): ca, obj = id: sticky.attr ("id"), sus: sticky.css ("top"), left: sticky.css : sticky.children ("sticky-content"). html () localStorage.setItem ("sticky-" + obj.id, JSON.stringify (obj)); . Sticky.find ( "lipicios status ") text (" salvat"); , Prima linie este un pic de rezoluție: există trei elemente diferite pe care le putem numi această funcție. În primul rând, vom "jQuerify" acest în acea; atunci dacă elementul are clase "lipsite de stare" sau "conținut lipicios", vom obține părintele div.sticky; dacă nu are nici una dintre clasele respective, atunci este div.sticky ea însăși, așa că vom folosi doar asta.
Apoi, trebuie să obținem valorile pe care dorim să le stocăm. După cum puteți vedea, obținem ID-ul, compensat din partea de sus și din stânga și html-ul copilului .lipicios conținut; amintiți-vă, folosim html () in loc de text() pentru că vrem să păstrăm linia de rupere. Apoi, folosim localStorage.setItem pentru a stoca datele. Rețineți că este nevoie de doi parametri: cheia și valoarea de memorat. De cand localStorage stochează numai șiruri de caractere, pe care le folosim JSON.stringify () pentru a converti obiectul la un șir.
În cele din urmă, modificați starea lipicioasă la "salvat".
Avem o ultimă funcție, care este doar o funcție de ajutor:
markUnsaved = funcția markUnsaved () var that = $ (this), sticky = that.hasClass ("conținut lipicios")? that.parents ("div.sticky"): că; sticky.find ( "Sticky-stare. ") text (" nesalvate").; Din nou, trebuie să începem prin rezolvarea referinței la div.sticky; odată ce facem, putem găsi pur și simplu intervalul de stare și setăm textul la "unsaved".
Credeți sau nu, asta-i tot JavaScript-ul.
Acum, căci știm ce este marcajul lipicios al notei, îl putem modela. Este destul de simplu; dar uita-te peste el, si voi face cateva comentarii la sfarsit:
: focalizare contur: 0; .add-sticky cursor: implicit; Poziția: absolută; sus: 1px; stânga: 1px; font-size: 200%; fundal: # 000; Culoare: #fff; frontieră: 2px solid #fff; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; text-align: center; line-height: 25px; lățime: 30px; înălțime: 30px; . add-lipicios: hover background: # 474747; .stic (lățime: 300px; fundal: #fdfdbe; box-shadow: 3px 3px 10px rgba (0,0,0,0,45); -webkit-box-shadow: 3px 3px 10px rgba (0,0,0,0,45); -moz-box-shadow: 3px 3px 10px rgba (0,0,0,0,45); . conținut stilizant min-height: 150px; frontieră-stânga: 3px dublu rgba (238, 150, 122, .75); margin-left: 30px; padding: 5px; .stic-header padding: 5px; fundal: # f3f3f3; frontală de fund: 2px solid #fefefe; box-shadow: 0 3px 5px rgba (0,0,0,0,25); -webkit-box-shadow: 0 3px 5px rgba (0,0,0,0,25); -moz-box-shadow: 0 3px 5px rgba (0,0,0,0,25); .stic-status culoare: #ccc; padding: 5px; . închide-lipicios background: # 474747; float: right; cursor: implicit; Culoare: #ececec; padding: 1px 5px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
Există câteva puncte de interes aici:
contenteditable = true când editați conținutul. Nu vrem asta, așa că scăpăm de ea : focus declaraţie.RGBA () pentru culorile umbrelor noastre. Este nevoie de patru parametri: culorile roșu, lăcomie și albastru și valoarea alfa (transparența).În afară de asta, este doar standardul CSS. Iată ce ar trebui să arate o notă stilată:
Acum că am făcut API-ul nostru, este timpul să începem; putem face asta din extra gol scenariu în eticheta noastră index.html fişier:
STICKIES.open ();
Ei bine, am terminat! Iată produsul final în acțiune:
Asta e tot ce am pentru ziua de azi; cum intenționați să utilizați spațiul de stocare local HTML5 pentru a vă îmbogăți proiectele web? Anunță-mă în comentariile!
