Oblikovanje vsebine spletne strani s strani obiskovalcev spletnega mesta

Anonim

Ustvarjanje besedila na spletnem mestu, ki ga urejajo uporabniki, je lažje, kot bi lahko pričakovali. HTML v ta namen daje atribut: vsebina.

The vsebina atribut je bil prvič predstavljen leta 2014 z izdajo HTML5. Določa, ali lahko vsebino, ki jo ureja, spreminja obiskovalec spletnega mesta iz brskalnika.

Podpora za atribut Contenteditable

Večina sodobnih brskalnikov za namizje podpira atribut. Tej vključujejo:

  • Chrome 4.0 in več
  • Internet Explorer 6 in gor
  • Firefox 3.5 in več
  • Safari 3.1 in več
  • Opera 10.1 in novejši
  • Microsoft Edge

Enako velja za večino mobilnih brskalnikov.

Kako uporabljati Contenteditable

Preprosto dodajte atribut elementu HTML, ki ga želite urediti. Ima tri možne vrednosti:prav, napačen in dediščino. Dedovanje je privzeta vrednost, kar pomeni, da element prevzame vrednost svojega starša. Prav tako bodo lahko edinstveni otroški elementi vaše nove vsebine, ki jih je mogoče urejati, razen če spremenite svoje vrednosti v napačen. Na primer, da naredite DIV element, ki ga je mogoče urediti, uporabite:

Ustvarite seznam, ki ga je mogoče urejati z Contenteditable

Vsebina, ki jo je mogoče urejati, je najbolj smiselna, če jo seznanite z lokalnim pomnilnikom, zato vsebina traja med sejami in obiski spletnega mesta.

  1. Odprite svojo stran v urejevalniku HTML.
  2. Ustvarite bulleted, neurejen seznam imenovan myTasks:
      2. Nekaj ​​nalog
      4. Druga naloga
    • Dodajtevsebina atribut za
        element:
          Zdaj imate seznam opravkov, ki ga je mogoče urejati. Če pa zaprete brskalnik ali pustite stran, bo vaš seznam izginil. Rešitev: dodajte preprost skript, da shranite naloge na localStorage.
          •
        • Dodaj povezavo na jQuery v vašega dokumenta. Ta primer uporablja Google CDN, vendar ga lahko sami gostite ali uporabite drug CDN, če želite.
          •
        • Na dnu strani, tik nad dodajte svoj skript: To je začetek jQuery document.ready funkcijo in povej brskalniku, da naloži ta skript, ko je dokument v celoti naložen.
      • V notranjosti document.ready dodajte svoj skript, da naložite naloge v localStorage in prejmete katera koli opravila, ki so bila tam prej shranjena: $ (document.ready (funkcija () {
        1. $ ("# myTasks") blur (funkcija () {// ko kurzor zapusti element #myTasks
        4. localStorage.setItem ('myTasksData', this.innerHTML); // shranite na localStorage
        7. });
        10. if (localStorage.getItem ('myTasksData')) {// če je vsebina v localStorage
        13. $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); // postavite vsebino na stran
        16. }
        17. });
        •

          HTML za celotno stran je videti takole:

          Moje naloge

          Moje naloge

          Vnesite elemente za svoj seznam. Brskalnik ga shrani za vas, tako da bo ob ponovnem odprtju brskalnika še vedno tukaj.

          • Nekaj ​​nalog
          • Druga naloga

          Izbira Urednika