Tinklalapio lankytojai gali redaguoti žiniatinklio puslapio turinį

Anonim

Vartotojų redagavimo tekstas svetainėje yra lengvesnis, nei galėtumėte tikėtis. Šiai paskirčiai HTML yra atributas: tinkamas.

The tinkamas Atributas pirmą kartą buvo pristatytas 2014 m. su HTML5 leidimu. Ji nurodo, ar svetainės lankytojas gali keisti turinį, kurį jis valdo, naršyklėje.

Parama "Contenteditable" savybei

Dauguma šiuolaikinių kompiuterio naršyklių palaiko atributą. Jie apima:

  • "Chrome" 4.0 ir naujesnės versijos
  • Internet Explorer 6 ir aukštyn
  • Firefox 3.5 ir naujesnės versijos
  • Safari 3.1 ir aukštyn
  • Opera 10.1 ir aukštyn
  • Microsoft Edge

Tas pats pasakytina ir daugumoje mobiliųjų naršyklių.

Kaip naudotis "Contenteditable"

Tiesiog pridėkite atributą HTML elementui, kurį norite redaguoti. Ji turi tris galimas vertes:tiesa, klaidinga ir paveldėti. Paveldėti yra numatytoji reikšmė, tai reiškia, kad elementas įgauna jo tėvų vertę. Taip pat bet kokie jūsų neseniai redaguojamojo turinio elementai gali būti redaguojami, nebent jūs pakeisite jų vertes klaidinga. Pavyzdžiui, norint sukurti a DIV elementas redaguojamas, naudokite:

Sukurkite redaguojamą darbų sąrašą su tinkamu

Redaguojantis turinys labiausiai įtakoja, kai porą su vietos saugykla, todėl turinys išlieka tarp sesijų ir apsilankymų svetainėje.

  1. Atidarykite savo puslapį HTML redaktoriuje.
  2. Sukurkite pažymėtą, sutvarkytą sąrašą pavadinimu myTasks:
      2. Kai kuri užduotis
      4. Kitas uždavinys
    • Pridėtitinkamas priskirti
        elementas:
          Dabar galite redaguoti užduočių sąrašą, tačiau jei uždarote naršyklę arba paliksite puslapį, jūsų sąrašas išnyks. Sprendimas: pridėkite paprastą scenarijų, kad išsaugotumėte užduotis vietiniam saugojimui.
          •
        • Pridėti nuorodą į "jQuery" savo dokumento. Šiame pavyzdyje naudojamas "Google" CDN, bet galite jį patys valdyti arba, jei norite, naudoti kitą CDN.
          •
        • Puslapio apačioje, tiesiai virš žyma, pridėkite savo scenarijų: Tai yra "jQuery" pradžia document.ready funkcija ir nurodo naršyklę įkelti šį scenarijų po to, kai dokumentas yra pilnai įkeltas.
      • Viduje document.ready funkcija, pridėkite savo scenarijų, kad įkelti užduotis į vietinį saugojimą ir gautumėte bet kokias užduotis, kurios anksčiau buvo išsaugotos: $ (document.ready (function () {
        1. $ ("# myTasks") blur (function () (// kai žymeklis palieka #myTasks elementą
        4. localStorage.setItem ('myTasksData', this.innerHTML); // išsaugoti vietiniam saugojimui
        7. });
        10. if (localStorage.getItem ('myTasksData')) (// jei turinys yra localStorage
        13. $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); // įdėti turinį puslapyje
        16. }
        17. });
        •

          Visas puslapis HTML yra toks:

          Mano užduotys

          Mano užduotys

          Įveskite savo sąrašo elementus. Naršyklė ją saugo, kad, vėl atidarę naršyklę, ji vis tiek bus čia.

          • Kai kuri užduotis
          • Kitas uždavinys

          Redaktoriaus Pasirinkimas