Vytváření obsahu webové stránky upravitelné návštěvníky stránek

Zpracování textu na webu upravitelném uživateli je snadnější, než byste očekávali. HTML poskytuje atribut pro tento účel: spokojen.

The spokojen atribut byl poprvé představen v roce 2014 s vydáním HTML5. Určuje, zda obsah, který řídí, může změnit návštěvník webu z prohlížeče.

Podpora atributu Contenteditable

Většina moderních desktopových prohlížečů podporuje tento atribut. Tyto zahrnují:

• Chrome 4.0 a vyšší
• Internet Explorer 6 a novější
• Firefox 3.5 a vyšší
• Safari 3.1 a vyšší
• Opera 10.1 a nahoru
• Microsoft Edge

Totéž platí pro většinu mobilních prohlížečů.

Jak používat Contenteditable

Jednoduše přidáte atribut prvku HTML, který chcete upravovat. Má tři možné hodnoty:skutečný, Nepravdivé a zdědit. Zdědit je výchozí hodnota, což znamená, že element přebírá hodnotu svého nadřazeného objektu. Stejně tak mohou být libovolné podřízené prvky vašeho nově upravitelného obsahu upravitelné, pokud nezměníte jejich hodnoty Nepravdivé. Chcete-li například vytvořit DIV můžete upravit:

Vytvoření seznamu upravitelných úloh s kontinentním obsahem

Upravitelný obsah je nejvhodnější, když jej spojíte s místním úložištěm, takže obsah přetrvává mezi relacemi a návštěvami na webu.

1. Otevřete stránku v editoru HTML.
2. Vytvoření pojmenovaného seznamu s odrážkami myTasks:
   2. Nějaký úkol
   4. Další úkol
5. Přidatspokojen atribut na
   živel:
   Nyní máte seznam úkolů, který lze upravovat - ale pokud zavřete prohlížeč nebo opustíte stránku, zmizí váš seznam. Řešení: Přidejte jednoduchý skript pro ukládání úkolů do localStorage.
8. Přidat odkaz do jQuery v souboru dokumentu. Tento příklad používá službu Google CDN, ale můžete ji hostit sami nebo použít jinou službu CDN.
11. V dolní části stránky, těsně nad tag, přidejte svůj skript: Toto je začátek jQuery document.ready funkce a řekne prohlížeči, aby tento skript načte po úplném načtení dokumentu.

Uvnitř document.ready , přidejte svůj skript, abyste mohli úkoly načíst do localStorage a získat dříve uložené úlohy: $ (dokument.ready (funkce () {

1. $ ("# myTasks") rozostření (function () {//, když kurzor opouští prvek #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); // uložte do localStorage
7. });
10. if (localStorage.getItem ('myTasksData')) {// pokud je v místníStorage obsah
13. $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); // vložte obsah na stránku
16. }
17. });

HTML pro celou stránku vypadá takto:

Moje úkoly

Zadejte položky pro svůj seznam. Prohlížeč jej uloží, takže při opětovném otevření prohlížeče bude stále zde.

• Nějaký úkol
• Další úkol