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

Стварэнне спісу Рэдагаванне To-Do З Contenteditable

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

1. Адкрыйце старонку ў HTML-рэдактары.
2. Стварэнне маркіраванага, неўпарадкаваных спіс з імем MyTasks:

   
   
   • Некаторыя задачы
     
   • Яшчэ адна задача
     

1. Дадайце contenteditable атрыбуту элемента
   :
   Зараз у вас ёсць спіс спраў, які рэдагуецца, але калі вы зачыніце ваш браўзэр або пакінуць на гэтай старонцы, ваш спіс знікне. Рашэнне: Дадайце просты скрыпт для захавання задач LocalStorage.
   • Дадаць спасылку на JQuery ў дакумента.

     <Сцэнар SRC = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

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

1. У ніжняй частцы старонкі, непасрэдна перад тэгам , дадаць свой скрыпт:

   <Скрыпт>
   $ (Document.ready (функцыя () {
   });

   Гэта пачатак функцыі document.ready JQuery і паведамляе браўзэру, каб загрузіць гэты сцэнар пасля таго, як дакумент будзе цалкам загружаны.
2. Ўнутры document.ready функцыі, дадаць скрыпт для загрузкі задач у LocalStorage і атрымаць якую-небудзь задачу, якія былі захаваныя там раней:

   $ (Document.ready (функцыя () {
   $ ( "# MyTasks"). Размытасці (функцыя () {// калі курсор пакідае элемент #myTasks
   localStorage.setItem ( 'myTasksData', this.innerHTML); // захаваць LocalStorage
   });
   калі (localStorage.getItem ( 'myTasksData')) {// калі ёсць ўтрыманне ў LocalStorage
   $ ( "# MyTasks") HTML (localStorage.getItem ( 'myTasksData')). // змяшчае змесціва на старонцы
   }});

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

<Галава>
<Мета кадоўка = "UTF-8">