Web-sivun sisällön luominen sivustokäynnistä

Tekstin tekeminen käyttäjien muokattavaksi verkkosivustoksi on helpompaa kuin odotit. HTML antaa attribuutin tähän tarkoitukseen: contenteditable.

contenteditable attribuutti otettiin käyttöön ensimmäisen kerran vuonna 2014 julkaisemalla HTML5. Se määrittää, voidaanko sivuston kävijä muuttaa selaimen sisältämää sisältöä.

Tuki Contenteditable-attribuutille

Useimmat nykyaikaiset selaimet tukevat ominaisuutta. Nämä sisältävät:

• Chrome 4.0 ja uudempi
• Internet Explorer 6 ja uudemmat
• Firefox 3.5 ja uudempi
• Safari 3.1 ja uudempi
• Opera 10.1 ja uudemmat
• Microsoft Edge

Sama koskee useimpia mobiiliselaimia.

Kuinka käyttää sisältöä

Lisää attribuutti HTML-elementtiin, jonka haluat muokata. Siinä on kolme mahdollista arvoa:totta, väärä ja periä. Periä on oletusarvo, eli elementti ottaa sen vanhemman arvon. Vastaavasti muokattavan sisällön kaikki lapsesi osat voidaan myös muokata, ellei muutat niiden arvoja väärä. Esimerkiksi a DIV elementti muokattavissa, käytä:

Luo muokattava tehtäväluettelo sisällöllisesti

Muokattava sisältö on järkevämpää, kun yhdistät sen paikalliseen tallennustilaan, joten sisältö jatkuu istuntojen ja sivustokäyntien välillä.

1. Avaa sivu HTML-editorissa.
2. Luo luetteloitu, järjestämättömät luettelot nimeltä myTasks:
   2. Jotkut tehtävät
   4. Toinen tehtävä
5. Lisääcontenteditable attribuutti
   elementti:
   Sinulla on nyt tehtäväluettelo, joka on muokattavissa - mutta jos suljet selaimen tai poistat sivun, luettelosi katoaa. Ratkaisu: Lisää yksinkertainen käsikirjoitus tehtävien tallentamiseen localStorageen.
8. Lisää linkki osoitteeseen jQuery asiakirjasta. Tämä esimerkki käyttää Google CDN: ää, mutta voit hallinnoida sitä itse tai käyttää toista CDN: tä, jos haluat.
11. Sivun alalaidassa, aivan yläpuolella lisää koodisi: Tämä on jQueryn alku document.ready toiminto ja kertoo selaimelle, että tämä kirjoitus ladataan sen jälkeen, kun asiakirja on ladattu kokonaan.

Sisällä document.ready toiminto, lisää käsikirjoituksesi ladataksesi tehtävät localStorageen ja hae aiemmin tallentamasi tehtävät: $ (document.ready (funktio () {) {

1. hämärtyminen (function () {// kun kohdistin jättää #myTasks-elementin
4. localStorage.setItem ('myTasksData', this.innerHTML); // tallenna localStorage
7. });
10. jos (localStorage.getItem ('myTasksData')) {// jos sisällössä on localStorage
13. $ ( "# MyTasks"). Html (localStorage.getItem ( 'myTasksData')); // laittaa sisältö sivulle
16. }
17. });

Koko sivun HTML näyttää tältä:

Omat tehtävät

Syötä kohteita listalle. Selaimesi tallentaa sen sinulle, joten kun avaat selaimen uudelleen, se on silti täällä.

• Jotkut tehtävät
• Toinen tehtävä