Прављење садржаја веб страница уређивањем посетилаца сајта

Anonim

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

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

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

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

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

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

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

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

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

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

  1. Отворите своју страницу у ХТМЛ едитору.
  2. Направите брзи, неуређени списак са назнаком миТаскс:
      2. Неки задатак
      4. Још један задатак
    • Додајтецонтентедитабле атрибут на
        елемент:
          Сада имате листу обавеза која је могуће изменити - али ако затворите прегледач или напустите страницу, ваша листа ће нестати. Решење: Додајте једноставну скрипту да бисте сачували задатке на лоцалСтораге.
          •
        • Додај линк у јКуери у вашег документа. Овај примјер користи Гоогле ЦДН, али га можете сами угостити или користити други ЦДН ако вам се више свиђа.
          •
        • На дну ваше странице, одмах изнад таг, додајте своју скрипту: Ово је почетак јКуери-а доцумент.реади функцију и говори претраживачу да учита ову скрипту након што је документ у потпуности учитан.
      • Унутар доцумент.реади функцију, додајте своју скрипту да учитате задатке у лоцалСтораге и добијете било који задатак који су раније били сачувани: $ (доцумент.реади (функција () {
        1. $ ("# миТаскс"). блур (функција () {// када курсор остави елемент #миТаскс
        4. лоцалСтораге.сетИтем ('миТасксДата', тхис.иннерХТМЛ); // спремите на лоцалСтораге
        7. });
        10. иф (лоцалСтораге.гетИтем ('миТасксДата')) {// ако постоји садржај у лоцалСтораге
        13. $ ("# миТаскс"). хтмл (лоцалСтораге.гетИтем ('миТасксДата')); // ставите садржај на страницу
        16. }
        17. });
        •

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

          Моји задаци

          Моји задаци

          Унесите ставке за вашу листу. Претраживач ће га спремити за вас, тако да када поново отворите свој прегледач, и даље ће бити овдје.

          • Неки задатак
          • Још један задатак

          Избор Уредника