Web lapu satura rediģēšana, izmantojot vietņu apmeklētājus

Anonim

Lietotāji, kuri ir rediģējuši tekstu vietnē, ir vieglāk, nekā jūs varētu gaidīt. Šim nolūkam HTML paredzēts atribūts: saistošs.

The saistošs Atribūts vispirms tika ieviests 2014. gadā ar HTML5 izlaišanu. Tajā tiek norādīts, vai vietnes apmeklētājs pārlūkprogrammā var mainīt satura pārvaldību.

Atbalsts Contenteditable īpašumam

Lielākā daļa mūsdienu darbvirsmas pārlūkprogrammu atbalsta atribūtu. Tie ietver:

  • Chrome 4.0 un jaunākas versijas
  • Internet Explorer 6 un jaunākas versijas
  • Firefox 3.5 un jaunākas versijas
  • Safari 3.1 un jaunākas versijas
  • Opera 10.1 un augšup
  • Microsoft Edge

Tas pats attiecas arī uz lielāko daļu mobilo pārlūku.

Kā lietot Contenteditable

Vienkārši pievienojiet atribūtu HTML elementam, kuru vēlaties rediģēt. Tam ir trīs iespējamās vērtības:taisnība, viltus un mantot. Mantot ir noklusējuma vērtība, kas nozīmē, ka elements iegūst tā vecāku vērtību. Tāpat arī jūsu jaunie rediģējamā satura bērni elementi būs rediģējami, ja vien jūs mainīsiet to vērtības viltus. Piemēram, lai izveidotu a DIV rediģējams elements, izmantojiet:

Izveidojiet rediģējamu uzdevumu sarakstu ar saistītām lietām

Pārejot uz vietējo krātuvi vislabāk ir rediģējamais saturs, tāpēc saturs turpinās starp sesijām un vietņu apmeklējumiem.

  1. Atveriet savu lapu HTML redaktorā.
  2. Izveidojiet marķētu, neierobežotu sarakstu ar nosaukumu myTasks:
      2. Daži uzdevumi
      4. Vēl viens uzdevums
    • Pievienojietsaistošs atribūtu
        elements:
          Tagad jums ir rediģējamu uzdevumu saraksts, bet, aizverot pārlūkprogrammu vai atstājot lapu, jūsu saraksts izzudīs. Risinājums: pievienojiet vienkāršu skriptu uzdevumu saglabāšanai lokālajā saglabāšanā.
          •
        • Pievienot saiti jQuery vietnē no jūsu dokumenta. Šajā piemērā tiek izmantots Google CDN, taču jūs varat to uzņemt pats vai arī izmantot citu CDN, ja vēlaties.
          •
        • Jūsu lapas apakšdaļā, tieši virs tag, pievienojiet savu skriptu: Tas ir jQuery sākums document.ready funkcija un informē pārlūkprogrammu, lai ielādētu šo skriptu pēc tam, kad dokuments ir pilnībā ielādēts.
      • Iekšpusē document.ready funkcija, pievienojiet savu skriptu, lai ielādētu uzdevumus localStorage un saņemtu visus iepriekš saglabātos uzdevumus: $ (document.ready (funkcija () {
        1. $ ("# myTasks"). blur (funkcija () {// ja kursors atstāj #myTasks elementu
        4. localStorage.setItem ('myTasksData', this.innerHTML); // saglabā vietējāStorage
        7. });
        10. ja (localStorage.getItem ('myTasksData')) (// ja vietējā uzglabāšanā ir saturs
        13. $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); // ievieto saturu lapā
        16. }
        17. });
        •

          HTML lapas visai lapai izskatās šādi:

          Mani uzdevumi

          Mani uzdevumi

          Ievadiet savu saraksta vienumus. Pārlūkprogramma to saglabās jums, lai, atkārtoti atvērtu pārlūku, tā joprojām būs šeit.

          • Daži uzdevumi
          • Vēl viens uzdevums

          Redaktora Izvēle