Accentsconagua
Eksempel Artikkel Tittel
Lorem ipsum dolor ...
Share
HTML5 lokal lagring er som informasjonskapsler på steroider; det er utrolig enkelt å bruke og likevel så kraftig. I denne veiledningen vil jeg vise deg hvordan du lager "klebrig notater" -funksjonalitet, som gjør det mulig for brukerne å ta vedvarende notater mens du surfer på nettstedet ditt.
På grunn av den dynamiske naturen til dette prosjektet, er det ikke veldig mye å kode i vei for vanlig gammelt semantisk oppslag. Vi simulerer bare en nettside ved å sette sammen noe fillerinnhold:
HTML 5 komplett Eksempel Artikkel Tittel
Lorem ipsum dolor ...
Det er noen viktige ting å legge merke til her: Vi inkluderer to CSS-filer: Den første er den enkle stylingen til siden, som vi har ringt default.css. Deretter har vi spesielle CSS-filer for stiler knyttet til våre klebrig notater; det heter stickies.css, og som du kan se, lever den i mappen "stickies". I bunnen inneholder vi fire skript:
stickies.js, som bor i "stickies" katalogenDeretter har vi et tomt skript som vi skal bruke for å starte motoren litt senere.
Og det er det for HTML!
Innholdet i default.css er utrolig enkelt:
kropp margin: 0; padding: 0; bakgrunn: #ccc; font: 14px / 1.5 "Helvetica Neue", Helvetica, Arial, san-serif; artikkel, bunntekst, overskrift display: block; artikkel bredde: 880px; bakgrunn: #fff; margin: auto; padding: 40px; artikkeloverskrift farge: # 474747; border-bottom: 1px solid # 474747 artikkelfodre font-size: 90%; farge: #ccc;
Det er det; nå er det CSS fra stickies.css å ta vare på ... men vi har ikke den merkingen ennå. Så la oss starte litt JavaScript, og når det er gjort, ser vi på CSS for de notatene.
Her er skjelettet for JavaScript-programmet vårt:
var STICKIES = (funksjon () var initStickies = funksjon () , openStickies = funksjon () , createSticky = funksjon (data) , deleteSticky = funksjon (id) , saveSticky = function () , markUnsaved = function () ; return open: openStickies, init: initStickies; ());
Vi har noen interessante teknikker på gang her. Først er den selvbetjente funksjonen: Det kan se ut som om vi tilordner en funksjon til variabelen Huskelapper, men hvis du ser nøye på slutten av funksjonen, ser du at vi kjører den med en gang. Som et hint - å minne oss om at dette ikke er en vanlig funksjon - vi pakker hele funksjonen i parentes. Så, Huskelapper er ikke en funksjon, det er den returnerte verdien fra den funksjonen, som er et objekt, i dette tilfellet.
Det bringer oss til neste teknikk: lukking. Legg merke til at de seks funksjonene vi lager, er kun to av dem utsatt for brukeren (egentlig er bare en nødvendig for bruken vi planlegger, hvis vi ønsket å bygge støtte for å lage notater på nettstedet ditt, kunne vi avsløre createSticky og deleteSticky). Selv om selve involveringsfunksjonen er fullført før vi selv bruker metodene, kan vi bruke de andre funksjonene som vi har definert.
Ok, la oss gå videre til innholdet i denne funksjonen.
Vi starter med å se på initStickies funksjon:
var initStickies = funksjon initStickies () $ ("", text:" + "," class ":" add-sticky ", klikk: funksjon () createSticky ();) prependTo (document.body); initStickies = null;, Dette er ganske enkelt. Vi bruker jQuery til å lage elementer ganske mye, og vi bruker noen spesielle syntaks i v. 1.4: som passerer et objekt bokstavelig med spesifikasjonene for elementet som en andre parameter til jQuery-funksjonen. Her lager vi en knapp for å lage et nytt notat. Det betyr at vi trenger en ny div; Vi setter teksten til "+" og gir den en klasse "add-sticky"; så setter vi inn en klikkbehandler for å ringe createSticky metode (det er viktig å ringe createSticky fra innsiden av en funksjon, og ikke ha klikkhåndteringsanropet direkte til createSticky; Dette er fordi createSticky kan ta en enkelt parameter, og vi vil ikke at det skal være hendelsesobjektet). Til slutt forbereder vi dette div til kroppen. Vi slutter ved å sette inn initStickies til null; Ja, vi blir i hovedsak kvitt funksjonen som vi kjører. Dette forsikrer oss om at denne funksjonen kun vil bli kjørt en gang; Vi vil ikke at brukeren av API-en vår skal utilsiktet legge til flere "legg til notat" knapper til side.
La oss gå videre til neste metode, openStickies:
openStickies = funksjon openStickies () initStickies && initStickies (); for (var i = 0; i < localStorage.length; i++) createSticky(JSON.parse(localStorage.getItem(localStorage.key(i)))); ,
Vi begynner med å løpe initStickies... men hva med den fancy syntaksen? Vel, du er sikkert kjent med && operatør: den boolske AND-operatøren. Du vil vanligvis bruke den til å sjekke flere forhold i en if-setning. Her er det det egentlig gjør: det evaluerer det første uttrykket, og hvis det kommer ut i sannhet, vil det fortsette å evaluere det andre uttrykket. I dette tilfellet, hvis initStickies har ikke blitt satt til null ennå, vi kjører funksjonen. Dette unngår feilen som vil komme fra å prøve å kjøre null-variabel som en funksjon.
Deretter slår vi over hvert element i localStorage. Her er hva vi gjør i den for-loop (fra innsiden til utsiden):
localStorage.key () er en flott funksjon som returnerer nøkkelnavnet til lokal lagring verdi; det tar et nummer som en paramter. Det er en fin måte å løse over hvert element i lokal lagring.localStorage.getItem () for å få sin verdi.JSON.parse (); Dette kommer fra Crockfords bibliotek. Fordi vi lagrer noen verdier for hvert notat, bruker vi JSON.stringify () i den andre enden for å snu et objekt inn i en JSON-streng, som vi lagrer. Her konverterer vi det fra en streng tilbake til et objekt.createSticky (), som setter det tilbake i en klebrig notat.La oss se på det createSticky metode.
createSticky = funksjon createSticky (data) data = data || id: + ny dato (), topp: "40px", venstre: "40px", tekst: "Merk her" returnere $ ("", " klasse ":" klebrig "," id ": data.id) .prepend ($ ("", " class ":" klebrig-header ") .append ($ ("", " class ":" status-sticky ", klikk: saveSticky)) .append ($ ("", " class ":" close-sticky ", tekst:" søppel ", klikk: funksjon () deleteSticky ($ (this) .parents (" klistret "). attr (" id ")) ))) .append ($ ("", html: data.text, contentEditable: true," class ":" klebrig innhold ", tastetrykk: markUnsaved)) .draggable (håndtak:" div.sticky-header ", stakk:" .sticky " start: markUnsaved, stop: saveSticky) .css (posisjon: "absolutt", "topp": data.top, "left": data.left) .focusout (saveSticky) .appendTo (document.body);, Ja, det er lenge, men det kommer ikke til å bli for vanskelig. Merk først at denne funksjonen tar et dataobjekt; som vi nettopp så i openStickies, Vi overfører de lagrede dataene til denne funksjonen. Men hvis vi ikke overfører noen data (det vil si, vi lager et helt nytt notat), oppretter vi standardnotatobjektet. Siden alle notater må opprettes på et tidspunkt, begynner alle notater med denne konfigurasjonen. Legg merke til at for notat-ID, bruker vi +ny dato (); den prepended unary pluss operatøren konverterer datoen vi kommer fra ny dato til et tall, så denne setningen resulterer i et tall som representerer antall millisekunder siden 1. januar 1970. Åpenbart vil dette nummeret hele tiden skiftes, så det er en fin måte å Unikt identifisere hver notat.
Resten av funksjonen er en lang rekke kjedede jQuery-metoder. Før vi går gjennom dette, merk at vi returnerer resultatet. Hvis vi eksponerte denne metoden for utviklere ved hjelp av vår mirco-API, ville den returnere en referanse til notat div-elementet.
Så, her er det som skjer:
Først oppretter vi div det er skikket av notatet. Ved hjelp av den nyttige jQuery 1.4-syntaksen, gir vi den en klasse av "klebrig" og idet fra dataobjektet.
Så prepper vi en div til den ene; dette div får en klasse "klebrig-header". div.sticky-header så får to spenner festet til den. Den første, span.sticky-status, får en klikkbehandler som ringer til saveSticky funksjon. Det er imidlertid en skjult funksjon: Dette spekteret vil vise statusen til den klissete: lagret eller ikke lagret. Det vil være noen måter de klistrede lagrer sine data til lokal lagring; Det er mulig at brukeren vil tro at å klikke på "ikke-lagret" vil lagre notatet, så vi vil gi dem den funksjonaliteten. Det andre spekteret, span.close-klebrig, vil være sletteknappen: Når brukeren klikker på den, fjerner vi klistren fra lokal lagring, via deleteSticky metode. Vi overfører denne metoden notat-ID.
Deretter legger vi til en annen div til hoveddelen div.sticky; Legg merke til at vi satte html eiendom til data.text; Når vi lagrer notatets tekst, bruker vi jQuery's html () metode, fordi du bruker tekst() blir kvitt linjeskift. Vi har også satt contenteditable: true på denne div, fordi det er innholdet i notatet. Som sådan blir det også klassen klebrig-innhold. Til slutt, når en nøkkel er trykket på denne diven (som betyr at brukeren endrer innholdet), vil vi markere det som ikke-lagret, så vi ringer den funksjonen (som vi gjør snart).
Nå bruker vi jQuery UI-trekkbar funksjonen for å gjøre vårt klebrig notat flyttbart. I vår parameterobjekt bruker vi håndtak eiendom for å gjøre notatene våre bare flyttbare fra topplinjen. De stable Egenskapen er en velger for de trekkbare elementene som vil "stable"; Ved å sette dette, vil det øyeblikkelig slepede notatet alltid komme til toppen. Til slutt, når vi begynner å dra notatet, vil vi markere det som "ikke lagret" (fordi vi må lagre koordinatene også), og når vi slutter å dra, lagrer vi det klebrig.
Deretter setter vi inn noen stiler for våre div.sticky; Vi posisjonerer det absolutt, og deretter setter du topp og venstre verdier til de i dataobjektet. På denne måten vil notatet beholde sin posisjon, så vel som innholdet når vi oppdaterer siden.
Endelig vil vi sette en hendelsehandler for når vi focusout av den klissete (i hovedsak, klikk utenfor den etter å ha klikket inni den): Vi vil redde den klissete. Til slutt legger vi det til kroppen. Til referanse, her er html-strukturen som vi burde ha generert:
søppelMerk her
Og det er vårt createSticky funksjon.
Nå har vi deleteSticky funksjon; det er veldig enkelt:
deleteSticky = funksjon deleteSticky (id) localStorage.removeItem ("sticky-" + id); $ ("#" + id) .fadeOut (200, funksjon () $ (dette) .remove ();); , Som du husker, deleteSticky funksjonen tar ID for et notat som parameter. localStorage.removeItem () er metoden for timen: Vi sender den nøkkelen til en lokalt lagret verdi for å fjerne det nøkkelverdige paret (Legg merke til at når vi lagrer notatdataene, forbereder vi seg "klistrende" til id). Deretter finner vi elementet med det oppgitte id, blekner det vår, og fjerner det. Merk slettet!
Til sist kan det være den viktigste metoden i dag: saveSticky: Dette er limet som gjør det hele til å fungere.
saveSticky = function saveSticky () var det = $ (dette), klebrig = (that.hasClass ("klebrig status") || that.hasClass ("klebrig innhold"))? that.parents ('div.sticky'): det, obj = id: sticky.attr ("id"), topp: sticky.css ("top"), venstre: sticky.css ("left"), tekst : sticky.children ("klebrig innhold"). html () localStorage.setItem ("sticky-" + obj.id, JSON.stringify (obj)); . Sticky.find ( "klebrig-status ") tekst (" frelst"); , Den første linjen er litt oppløsning: det er tre forskjellige elementer vi kan ringe denne funksjonen fra. Først vil vi "jQuerify" dette inn i at; da, hvis elementet har enten klassen "klebrig status" eller "klebrig innhold", får vi foreldre div.sticky; hvis det ikke har noen av disse klassene, så er det det div.sticky selv, så bruker vi bare det.
Da må vi få verdiene vi ønsker å lagre. Som du kan se, får vi id, offset fra toppen og venstre, og barnets html .klebrig-innhold; husk, vi bruker html () i stedet for tekst() fordi vi ønsker å holde linjen bryter. Så bruker vi localStorage.setItem å lagre dataene. Husk at det tar to parametere: nøkkelen og verdien som skal lagres. Siden lokal lagring bare lagrer strenge, vi bruker JSON.stringify () å konvertere objektet til en streng.
Til slutt, endre klistrestatusen til "lagret".
Vi har en siste funksjon, som bare er en hjelperfunksjon:
markUnsaved = funksjonsmerkeUnsaved () var that = $ (this), sticky = that.hasClass ("klebrig innhold")? that.parents ("div.sticky"): det; sticky.find ( "klebrig-status. ") tekst (" ulagret."); Igjen må vi begynne å løse referansen til div.sticky; Når vi gjør det, kan vi bare finne status spannet og sette teksten til "ikke lagret".
Tro det eller ei, det er alt JavaScript.
Nå som vi vet hva vårt notatoppslag er, kan vi stile det. Det er ganske enkelt; men se det over, og jeg vil komme med noen kommentarer på slutten:
: fokus disposisjon: 0; .add-sticky cursor: default; stilling: absolutt; top: 1px; venstre: 1px; font-size: 200%; bakgrunn: # 000; farge: #fff; grense: 2px solid #fff; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; tekst-Justering: center; linje-høyde: 25px; bredde: 30px; høyde: 30px; .add-sticky: svever bakgrunn: # 474747; .sticky bredde: 300px; bakgrunn: #fdfdbe; boks-skygge: 3px 3px 10px rgba (0,0,0,0,45); -webkit-boks-skygge: 3px 3px 10px rgba (0,0,0,0,45); -moz-boks-skygge: 3px 3px 10px rgba (0,0,0,0,45); .ticky-innhold min-høyde: 150px; border-left: 3px dobbel rgba (238, 150, 122, 75); margin-left: 30px; padding: 5 px; .sticky-header padding: 5px; bakgrunn: # f3f3f3; border-bottom: 2px solid #fefefe; boksskygge: 0 3px 5px rgba (0,0,0,0,25); -webkit-boks-skygge: 0 3px 5px rgba (0,0,0,0,25); -moz-boks-skygge: 0 3px 5px rgba (0,0,0,0,25); .sticky-status farge: #ccc; padding: 5 px; .close-sticky bakgrunn: # 474747; float: right; markøren: default; farge: #ececec; polstring: 1px 5px; border-radius: 20 piksler; -webkit-border-radius: 20 piksler; -moz-border-radius: 20 piksler;
Det er noen interessante steder her:
contenteditable = true når du redigerer innholdet. Vi vil ikke ha det, så vi blir kvitt det med vår :fokus erklæring.RGBA () for våre skyggefarger. Det tar fire parametre: de røde, grådige og blå farger, og alfa (gjennomsiktighets) -verdien.Annet enn det, er det bare din standard CSS. Her er hva et stylet notat skal se ut som:
Nå som vi har laget vår API, er det på tide å få det i gang. det kan vi gjøre fra den ekstra tomme manus tag i vår index.html fil:
STICKIES.open ();
Vel, vi er ferdige! Her er det endelige produktet i aksjon:
Det er alt jeg har for i dag; hvordan planlegger du å bruke HTML5 lokal lagring for å spice opp dine webprosjekter? Gi meg beskjed i kommentarene!
