Paggawa ng Nilalaman ng Web Page Nae-edit ng mga Bisita ng Site

Ang paggawa ng teksto sa isang website na mae-edit ng mga gumagamit ay mas madali kaysa sa maaari mong asahan. Nagbibigay ang HTML ng isang katangian para sa layuning ito: maaaring i-edit.

Ang maaaring i-edit Ang katangian ay unang ipinakilala noong 2014 sa paglabas ng HTML5. Tinutukoy nito kung ang nilalaman na pinamamahalaan nito ay maaaring mabago ng isang bisita ng site mula sa loob ng browser.

Suporta para sa Editoryal na Attribute

Sinusuportahan ng karamihan ng mga modernong desktop browser ang katangian. Kabilang dito ang:

• Chrome 4.0 at pataas
• Internet Explorer 6 at pataas
• Firefox 3.5 at pataas
• Safari 3.1 at pataas
• Opera 10.1 at pataas
• Microsoft Edge

Ang parehong napupunta para sa karamihan ng mga mobile browser, masyadong.

Paano Gamitin ang Pag-edit ng Nilalaman

Idagdag lamang ang katangian sa elemento ng HTML na nais mong gawing mae-edit. Ito ay may tatlong posibleng mga halaga:totoo, huwad at magmana. Inherit ay ang default na halaga, ibig sabihin na ang elemento ay tumatagal sa halaga ng kanyang magulang. Gayundin, ang anumang mga elemento ng bata ng iyong bagong nae-edit na nilalaman ay mae-edit din maliban kung binago mo ang kanilang mga halaga huwad. Halimbawa, upang gumawa ng isang DIV i-edit ng elemento, gamitin ang:

Lumikha ng isang Nae-edit na Listahan ng Gagawin Sa Na-edit ng Nilalaman

Ang e-edit na nilalaman ang pinakamahalaga kapag pinares mo ito sa lokal na imbakan, kaya nagpatuloy ang nilalaman sa pagitan ng mga sesyon at mga pagbisita sa site.

1. Buksan ang iyong pahina sa isang HTML editor.
2. Lumikha ng isang bulleted, unordered na pangalan na pinangalanan myTasks:
   2. Ang ilang mga gawain
   4. Isa pang gawain
5. Idagdag angmaaaring i-edit katangian sa
   elemento:
   Mayroon ka na ngayong listahan ng gagawin na mae-edit-ngunit kung isasara mo ang iyong browser o iwanan ang pahina, mawawala ang iyong listahan. Ang solusyon: Magdagdag ng isang simpleng script upang i-save ang mga gawain sa localStorage.
8. Magdagdag ng isang link sa jQuery sa ng iyong dokumento. Ang halimbawang ito ay gumagamit ng Google CDN, ngunit maaari mo itong i-host mismo o gumamit ng isa pang CDN kung gusto mo.
11. Sa ibaba ng iyong pahina, nasa ibabaw lamang ng tag, idagdag ang iyong script: Ito ang simula ng jQuery document.ready function at sasabihin sa browser na i-load ang script na ito pagkatapos ng ganap na load ang dokumento.

Sa loob ng document.ready function, idagdag ang iyong script upang i-load ang mga gawain sa localStorage at makakuha ng anumang mga gawain na na-save doon dati: $ (document.ready (function () {

1. $ ("# myTasks") .blur (function () {// kapag ang cursor ay umalis sa #myTasks element
4. localStorage.setItem ('myTasksData', this.innernerHTML); / save sa localStorage
7. });
10. kung (localStorage.getItem ('myTasksData')) {/ / kung mayroong nilalaman sa localStorage
13. $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); / / ilagay ang nilalaman sa pahina
16. }
17. });

Mukhang ganito ang HTML para sa buong pahina:

Aking Mga Gawain

Ipasok ang mga item para sa iyong listahan. Iimbak ito ng browser para sa iyo, upang kapag buksan mo muli ang iyong browser, mananatili pa rin ito dito.

• Ang ilang mga gawain
• Isa pang gawain