Даведайцеся, як усталяваць змесціва вэб-старонкі як прыдатнае для наведвальнікаў сайта

Задаволены

• Выкарыстанне атрыбутаў "Змест"
• Падтрымка атрыбутаў, якія можна задаволіць
• Як выкарыстоўваць Contenteditable
• Стварыце зручны спіс спраў, які змяшчаецца па змесце

Выкарыстанне атрыбутаў "Змест"

Зрабіць тэкст на сайце рэдагаваным карыстальнікамі прасцей, чым вы маглі чакаць. HTML для гэтага атрыбуты: contentedable.

Спрэчны атрыбут быў упершыню прадстаўлены ў 2014 годзе з выхадам HTML5. Ён вызначае, ці можа змесціва, якое ён кіруе, змяніць наведвальнік сайта з дапамогай аглядальніка.

Падтрымка атрыбутаў, якія можна задаволіць

Большасць сучасных настольных браўзэраў падтрымліваюць гэты атрыбут. Сюды ўваходзяць:

• Chrome 4.0 і вышэй
• Internet Explorer 6 і вышэй
• Firefox 3.5 і вышэй
• Safari 3.1 і вышэй
• Опера 10.1 і вышэй
• Microsoft Edge

Тое ж самае і для большасці мабільных браўзэраў.

Як выкарыстоўваць Contenteditable

Проста дадайце атрыбут у элемент HTML, які вы хочаце зрабіць рэдагуемым. Ён мае тры магчымыя значэнні: сапраўднае, ілжывае і спадчыннае. Спадчына - гэта значэнне па змаўчанні, гэта значыць, што элемент набывае значэнне свайго бацькі. Акрамя таго, любыя даччыныя элементы вашага нядаўна змененага змесціва таксама будуць рэдагаваны, калі вы не змяніце іх значэнні на ілжывыя. Напрыклад, каб зрабіць элемент DIV рэдагаваным, выкарыстоўвайце:

Стварыце зручны спіс спраў, які змяшчаецца па змесце

Змест, які можна рэдагаваць, мае найбольш сэнс пры спалучэнні яго з мясцовай сховішчам, таму змест захоўваецца паміж сесіямі і наведваннямі сайта.

1. Адкрыйце старонку ў рэдактары HTML.
   1. Стварыце пазначаны спіс з неўпарадкаваным назвай myTasks:
      • Нейкая задача
      • Яшчэ адна задача

Дадайце аргумент, які можа задаволіць

• элемент:

Цяпер у вас ёсць спіс спраў, які можна рэдагаваць - але калі вы зачыніце свой браўзэр альбо пакінуць старонку, ваш спіс знікне. Рашэнне: Дадайце просты сцэнар для захавання задач у localStorage.

Дадайце спасылку на jQuery у

вашага дакумента.

У гэтым прыкладзе выкарыстоўваецца Google CDN, але вы можаце размясціць яго самастойна альбо выкарыстоўваць іншы CDN, калі хочаце.

Унізе старонкі, крыху над тэгам, дадайце сцэнар:

}); Гэта пачатак функцыі jQuery document.ready і кажа браўзэру загрузіць гэты сцэнар пасля поўнай загрузкі дакумента.

Унутры функцыі document.ready дадайце свой сцэнар, каб загрузіць задачы ў localStorage і атрымаць любыя заданні, якія былі захаваны раней:

1. 1. localStorage.setItem ('myTasksData', this.innerHTML); // захаваць у localStorage

   2. });

   3. калі (localStorage.getItem ('myTasksData')) {// калі ў localStorage ёсць змест

   4. $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); // змясціць змест на старонку

   5. }

   6.  });

HTML для ўсёй старонкі выглядае так:

Мае задачы

Калі ласка, увядзіце элементы ў свой спіс. Аглядальнік будзе захоўваць яго для вас, так што, калі вы зноў адкрыеце свой браўзэр, ён усё яшчэ будзе тут.

• Нейкая задача
• Яшчэ адна задача