Сазнајте како да поставите Садржај Веб странице као уредив за посетиоце сајта

Коришћење атрибутног садржаја

Прављење текста на веб страници које уређују корисници је лакше него што можете очекивати. ХТМЛ даје атрибут за ову сврху: садржајан.

Садржај одговарајући атрибут је први пут представљен 2014. године са објављивањем ХТМЛ5 . Она одређује да ли садржај који уређује може променити посетилац сајта из унутар претраживача.

Подршка за атрибут доступан за садржај

Већина модерних десктоп претраживача подржава атрибут.

Ови укључују:

• Цхроме 4.0 и новије верзије
• Интернет Екплорер 6 и горе
• Фирефок 3.5 и више
• Сафари 3.1 и више
• Опера 10.1 и новије верзије
• Мицрософт ивица

Исто важи и за већину мобилних претраживача.

Како користити Цонтентедитабле

Једноставно додајте атрибут ХТМЛ елементу који желите уредити. Има три могуће вриједности: истинито, лажно и наследно. Инхерит је подразумевана вредност, што значи да елемент преузима вредност свог родитеља. Такође, сви елементи детета вашег новог уређивог садржаја такође ће бити уређивани, осим ако не промените своје вриједности на лажне. На примјер, како би се ДИВ елемент могао уредити, користите:

<див ид = "пример" цонтентедитабле = "труе | фалсе | инхерит">

Креирајте листу за уређивање са садржајем доступним

Садржај који се може изменити чини најчуднијим када га упарите са локалним спремиштем, тако да садржај остане између сесија и посета локацији.

1. Отворите своју страницу у ХТМЛ едитору.
2. Направите буллетед, унордеред лист са именом миТаскс :

   <ул ид = "миТаскс">
   <ли> Неки задатак
   <ли> Још један задатак
   

1. Додајте атрибут са садржајем у <ул> елемент:

   <ул ид = "миТаскс" цонтентедитабле = "труе">

   Сада имате листу обавеза која је могуће изменити - али ако затворите прегледач или напустите страницу, ваша листа ће нестати. Решење: Додајте једноставну скрипту да бисте сачували задатке на лоцалСтораге.
2. Додајте везу на јКуери у <ХЕАД> вашег документа.

   <сцрипт срц = "хттп://ајак.гооглеапис.цом/ајак/либс/јкуери/1.8.3/јкуери.мин.јс">

   Овај примјер користи Гоогле ЦДН, али га можете сами угостити или користити други ЦДН ако вам се више свиђа.

1. На дну ваше странице, одмах изнад ознаке , додајте своју скрипту:

   <сцрипт>
   $ (доцумент.реади (функција () {
   });

   Ово је почетак јКуери доцумент.реади функције и говори претраживачу да учита ову скрипту након што је документ у потпуности учитао.
2. Унутар функције доцумент.реади, додајте своју скрипту да учитате задатке у лоцалСтораге и добијете све задатке који су раније били сачувани:

   $ (доцумент.реади (функција () {
   $ ("# миТаскс"). блур (функција () {// када курсор остави елемент #миТаскс
   лоцалСтораге.сетИтем ('миТасксДата', тхис.иннерХТМЛ); // спремите на лоцалСтораге
   });
   иф (лоцалСтораге.гетИтем ('миТасксДата')) {// ако постоји садржај у лоцалСтораге
   $ ("# миТаскс"). хтмл (лоцалСтораге.гетИтем ('миТасксДата')); // ставите садржај на страницу
   } });

ХТМЛ за целу страницу изгледа овако:

<хтмл>
<хеад>
<мета-цхарсет = "УТФ-8">
<титле> Моји задаци
<сцрипт срц = "хттп://ајак.гооглеапис.цом/ајак/либс/јкуери/1.8.3/јкуери.мин.јс">

<боди>
<х1> Моји задаци
<п> Унесите ставке за листу. Бровсер ће га спремити за вас, тако да када поново отворите прегледач, и даље ће бити овдје.
<ул ид = "миТаскс" цонтентедитабле = "труе">
<ли> Неки задатак
<ли> Још један задатак

<сцрипт>
$ (документ) .реади (функција () {
$ ("# миТаскс"). блур (функција () {
лоцалСтораге.сетИтем ('миТасксДата', тхис.иннерХТМЛ);
});
ако (лоцалСтораге.гетИтем ('миТасксДата')) {
$ ("# миТаскс"). хтмл (лоцалСтораге.гетИтем ('миТасксДата'));
}
});