Vytváranie obsahu webovej stránky upraviteľnej podľa návštevníkov stránok

Anonim

Vytváranie textu na webových stránkach, ktoré je možné upraviť používateľmi, je jednoduchšie, než by ste mohli očakávať. HTML poskytuje atribút na tento účel: contenteditable.

contenteditable atribút bol prvýkrát predstavený v roku 2014 s vydaním HTML5. Určuje, či obsah, ktorý upravuje, môže zmeniť návštevník lokality z prehliadača.

Podpora atribútu Contenteditable

Väčšina moderných desktopových prehliadačov podporuje atribút. Tie obsahujú:

  • Chrome 4.0 a vyššie
  • Internet Explorer 6 a vyššie
  • Firefox 3.5 a vyššie
  • Safari 3.1 a vyššie
  • Opera 10.1 a vyššie
  • Microsoft Edge

To isté platí pre väčšinu mobilných prehliadačov.

Ako používať Contenteditable

Jednoducho pridajte atribút prvku HTML, ktorý chcete upraviť. Má tri možné hodnoty:pravdivý, nepravdivý a zdediť. zdediť je predvolená hodnota, čo znamená, že prvok nadobúda hodnotu svojho rodiča. Podobne aj akékoľvek podradené prvky vášho novo upraviteľného obsahu budú editovateľné, ak nezmeníte ich hodnoty nepravdivý, Ak chcete napríklad urobiť DIV editovateľný prvok, použite:

Vytvorenie zoznamu úloh, ktoré je možné upraviť, s obsahom kontinentu

Upraviteľný obsah má najväčší zmysel pri spárovaní s miestnym ukladacím priestorom, takže obsah pretrváva medzi reláciami a návštevami stránok.

  1. Otvorte svoju stránku v editore HTML.
  2. Vytvorte názov so zoznamom s odrážkami myTasks:
      2. Niektoré úlohy
      4. Ďalšia úloha
    • Pridajtecontenteditable atribút na
        element:
          Teraz máte zoznam úloh, ktorý je možné upraviť - ale ak zatvoríte prehliadač alebo opustíte stránku, zoznam zmizne. Riešenie: Pridajte jednoduchý skript na uloženie úloh na lokálny server.
          •
        • Pridajte odkaz na jQuery v vášho dokumentu. Tento príklad používa službu Google CDN, ale môžete ho hostiť sami alebo použiť iný CDN, ak chcete.
          •
        • V dolnej časti stránky, tesne nad tag, pridajte svoj skript: Toto je začiatok jQuery document.ready a povie prehliadaču načítať tento skript po úplnom načítaní dokumentu.
      • Vnútri document.ready funkciu, pridajte svoj skript na načítanie úloh do localStorage a získajte akékoľvek úlohy, ktoré boli predtým uložené: $ (dokument.ready (funkcia () {
        1. $ ("# myTasks") rozostrenie (funkcia () {//, keď kurzor opustí prvok #myTasks
        4. localStorage.setItem ('myTasksData', this.innerHTML); // uložte do localStorage
        7. });
        10. if (localStorage.getItem ('myTasksData')) {// ak je obsah v lokálnomSklade
        13. $ ( "#" MyTasks) html (localStorage.getItem ( 'myTasksData')). // vložte obsah na stránku
        16. }
        17. });
        •

          HTML pre celú stránku vyzerá takto:

          Moje úlohy

          Moje úlohy

          Zadajte položky pre svoj zoznam. Prehliadač ho uloží, takže po opätovnom otvorení prehliadača bude stále tu.

          • Niektoré úlohy
          • Ďalšia úloha

          Redakcia Choice