A face ca utilizatorii să facă clic pe mai multe pagini, doar pentru a edita un câmp, este astfel anul 1999. În acest tutorial, veți învăța cum să creați un sistem de editare la fața locului, așa cum se găsește pe site-uri populare, cum ar fi Flickr.

Un cuvânt din partea autorului

Cu toată buzunarul în jurul Web 2.0, ușurința în utilizare este acum mult mai importantă ca niciodată. A fi capabil de a edita un anumit conținut fără a fi nevoie să meargă la o altă pagină este ceva ce o mulțime de utilizatori doresc cu adevărat. O mulțime de nume mari folosesc deja acest model pentru a avea un efect mare. Dacă ați folosit Flickr, probabil ați văzut acest lucru în acțiune.

Cred că un demo este în valoare de o mie de cuvinte. Apăsați demonstrația și încercați-o singură.

Astăzi, vom examina modul în care să implementăm acest lucru, ați ghicit bine, biblioteca JavaScript preferată, jQuery. Interesat? Să începem imediat!

Scopurile proiectului

Înainte de a începe să ne uităm la modul de implementare a funcționalității, iată câteva gânduri despre obiectivele și deciziile care rezultă.

• Trebuie să permitem utilizatorului să editeze conținutul fără a părăsi pagina. Aceasta este o dată.
• Acest lucru ar trebui fie să funcționeze ca un întreg, fie să nu funcționeze ca un întreg. Atunci când JS este dezactivat, nu vrem să fugim în ciudate ciudățenii.
• Utilizatorul ar trebui să știe că conținutul este editat. O schimbare subtilă a fundalului albastru ar trebui să atragă atenția utilizatorului asupra acestui lucru.
• În ceea ce privește modul de declanșare a editării, există câteva opțiuni. Putem lăsa fie utilizatorul să se editeze cu un clic normal, fie cu dublu clic. Am ales dublu clic, deoarece dublu clicuri aleatoare apar la o rată mai mică decât clicurile aleatorii. Comutarea este doar o chestiune de modificare a parametrului în evenimentul de legare.
• O modalitate prin care utilizatorul poate salva sau arunca modificările.
• Salvarea sau editarea evenimentelor poate fi declanșată în 2 moduri. Evenimente cu tastatură sau evenimente de mouse. Am ales evenimente de mouse, deoarece evenimentele tastaturii nu au specificitate.
• În ceea ce privește evenimentele mouse-ului, puteți folosi fie butoanele tradiționale, fie link-urile obișnuite. Am ales link-uri pentru nici un motiv special.
• Utilizatorul ar trebui să poată relua editarea chiar dacă face clic în afara casetei de intrare sau părăsește pagina și se întoarce.
• În plus, utilizatorul ar trebui să poată edita cât mai multe câmpuri simultan.

Acum, că ne-am definit nevoile, putem trece acum la modul în care vom face acest lucru.

Plan de actiune

Acum trebuie să identificăm ce trebuie făcut într-o anumită ordine.

Pasul 1: Va trebui să adăugăm o clasă de editabil la fiecare element care are nevoie de această funcționalitate.

Pasul 2: Vom mai trebui să adăugăm supape la fiecare element care poate fi modificat pentru a atrage atenția asupra faptului că conținutul respectivului element poate fi modificat. Vom adăuga și elimina plutitorii folosind JavaScript în loc de CSS. Acest lucru se face în principal pentru dispozitive sau browsere cu JavaScript dezactivat. Nu vrem să le trimitem indicații vizuale greșite.

Pasul 3: Atunci când un element care poate fi modificat este dublu clickat, trebuie să schimbăm conținutul și să îl înlocuim cu o casetă text cu vechiul text în el.

Pasul 4a: Când utilizatorul dorește să salveze modificările, copiați valoarea de intrare la elementul părinte și scoateți caseta de intrare.

Etapa 4b: Sau când utilizatorul dorește să renunțe la modificări, înlocuiți vechiul conținut și eliminați caseta de intrare.

Acestea sunt pasii de bază în crearea acestei funcționalități. Desigur, există câteva alte lucruri mici, dar le voi explica pe măsură ce mergem.

Core Markup

Marcajul HTML al paginii demo arată ca atare.

          
 
Editarea în locație
 
de Siddharth pentru cei minunați de la Net Tuts
 
Elemente cu o clasă de editabil sunt, bine, editabile. În cazul în care nu ați observat, toate elementele care conțin editabil clasa obține un fundal albastru pe hover pentru a indica această capacitate. 
 
Faceți dublu clic pentru a edita conținutul. Utilizați legăturile create dinamic pentru a salva sau a elimina modificările. Puteți să deschideți cât mai multe câmpuri pentru a le edita după cum doriți, fără a fi afectați de sughițe.
 
 
eu 
 
 
am Siddharth
 
iubesc lucrul cu webul
 
sunt freelancer
 
scrie pentru Net Tuts
 
pot fi găsite la www.ssiddharth.com
 
nu vă va lăsa niciodată în jos sau nu vă dau :)
 
 
 
 
Lucruri de făcut în această săptămână
 
 
Obțineți aprobarea de proiectare de la Deacon
 
Trimiteți o factură lui Albert 
 
Începeți lucrul la proiectul lui Dwight
 
Discutați cu Sarah despre idei noi
 
Verificați site-ul lui Seth pentru redarea erorilor
 
Faceți cunoștință cu Clintson pentru a discuta despre proiect
 
 
 
  

După cum vedeți, ignorând placa cazanului, avem două liste neordonate. Fiecare Li elementul are o clasă de editabil pentru a indica faptul că conținutul său poate fi editat.

Am inclus, de asemenea, biblioteca jQuery și propriul fișier de script.

CSS Styling

 corp font-family: "Lucida Grande", "Verdana", sans-serif; font-size: 12px;  a culoare: # 000;  a: hover text-decorare: nimic;  p marja: 30px 0 10px 0;  h1 font-size: 30px; umplutura: 0; marja: 0;  h2 font-size: 20px;  #container width: 820px; margin-stânga: auto; margin-dreapta: auto; padding: 50px 0 0 0;  .editHover culoare-fundal: # E8F3FF;  .editBox width: 326px; min-înălțime: 20 pixeli; padding: 10px 15px; fundal-culoare: #fff; frontieră: 2 pixeli solizi # E8F3FF;  ul list-style: nici unul;  li lățime: 330px; min-înălțime: 20 pixeli; padding: 10px 15px; margine: 5px;  li.noPad umplutură: 0; lățime: 360px;  forma lățime: 100%;  .btnSave, .btnCancel padding: 6px 30px 6px 75px;  .block float: left; margine: 20px 0; 

Nimic special aici. Doar o grămadă de cod pentru scopuri de aspect și stil.

Luați notă specială editHover și noPad clase. O să le folosim puțin.

Implementarea JavaScript

Acum, că avem un cadru solid și un stil de bază în loc, putem începe codificarea funcționalității necesare. Rețineți că folosim extensiv jQuery. În mod specific, vom avea nevoie de cel puțin versiunea 1.3 sau mai mare. Orice mai puțin și nu va funcționa.

Adăugarea Hovers

Așa cum am menționat mai devreme, va trebui să adăugăm un fundal albastru subtil obiectelor editabile pentru a indica că sunt editate. Am creat deja editHover pentru a avea grijă de asta.

 $ (this) .addClass ("editHover"); funcția () $ (this) .removeClass ("editHover"););

Acest fragment mic are grijă de asta pentru noi. Folosim jQuery planare adăugați metoda editHover clasa atunci când elementul este plutind pe și eliminați atunci când nu este. Folosim acest pentru a vă referi la elementul specific care este plutind. Dacă am fi folosit .editabil ca selector în loc de fiecare element va primi clasa adăugată la ea. Deci folosim acest pentru a viza numai elementul de care avem nevoie.

Dezactivarea elementelor

În primul rând, trebuie să ne asigurăm că codul nostru este executat atunci când elementul țintă este dublu clicat. Așa că, mai întâi, vom conecta mai întâi mâna pentru acest eveniment.

 $ bind ("dblclick", înlocuițiHTML);

Am atașat replaceHTML funcția la dublu click eveniment în raport cu editabil element cu acea căptușeală. Acum putem trece la deconectarea elementelor.

 funcția replaceHTML () oldText = $ (this) .html () .replace (/ "/ g," "); $ (acest) .html ("") .html ("
 
Salvați modificările Împiedicăți modificările ");

Să trecem peste codul nostru de biți.

Definesc funcționalitatea în interiorul unei funcții separate numite în locul unei funcții anonime pentru un anumit motiv: voi folosi această funcție de mai multe ori. Apoi salvăm conținutul elementului pentru utilizare ulterioară folosind jQuery html metodă și înlocuirea tuturor citatelor, deoarece ne confruntă cu rezultatele pe linie.

Acum că conținutul nostru este stocat în siguranță pentru o utilizare ulterioară, putem scoate elementele. Mai întâi eliminăm Li element prin trimiterea unui șir gol la html metodă. Apoi, introducem un HTML standard pentru o casetă de intrare. Adăugăm câteva clase la ea în scopuri de styling. Mai important, ne-am stabilit valoare atribui textului original conținut de elementul stocat în oldText. Adăugăm, de asemenea, câteva linkuri pentru a avea grijă de salvarea și aruncarea editărilor. De asemenea, le-am adăugat clase, astfel încât acestea să poată fi vizate cu ușurință și pentru stil.

Ca întotdeauna, folosim acest pentru a viza elementul care a declanșat evenimentul.

Păstrarea editărilor

 (".btnSave") live ("click", funcția () newText = $ (this) .siblings ("form") .children (". , ""); $ (acest) .parent () .html (newText););

În primul rând, permiteți-mi să introduc jQuery Trăi metodă. Probabil că nu ați văzut prea mult acest lucru, așa că voi da o introducere rapidă.

Nu puteți conecta manipulatorii la evenimente declanșate de elemente care nu sunt nici măcar prezente în DOM atunci când pagina și JavaScript au fost încărcate. Dacă utilizați funcții normale de legare a evenimentului, acesta va eșua din cauza motivului menționat mai sus. Trăi metoda are grijă de asta.

Ea leagă manipulanții de evenimente, indiferent de momentul creării elementului. Pentru mai multe detalii, puteți trece prin documentele oficiale.

Să ne uităm acum la codul nostru. Mai întâi legăm codul conținut în funcția noastră anonimă la clic eveniment. În interiorul funcției salvează mai întâi textul din caseta de introducere. Acest lucru poate fi un pic dificil, deoarece caseta de intrare nu are un ID. Așadar, mai întâi căutăm elementul de formă care se întâmplă a fi fratele său și apoi traversați pentru a găsi elementul de intrare. Atunci vom copia valoarea după înlocuirea tuturor citatelor pe care le poate conține.

Apoi, obținem elementul parental de legături, Li și înlocuiți conținutul HTML cu textul pe care l-am copiat în pasul anterior.

Acest bloc ar fi putut fi creat cu ușurință ca o singură linie, dar am ales să o împărțim la 2 linii în interesul lizibilității.

Renunțarea la editările

 $ () .parent () .html (oldText););

Acest lucru este la fel de simplu cum arată. Deoarece utilizatorul nu dorește să păstreze nici una dintre editări. Pur și simplu înlocuim conținutul HTML al elementului părinte cu textul original pe care l-am copiat mai devreme oldText variabil.

Cu aceasta, nucleul muncii noastre se face. Trebuie doar să facem câteva editări pentru a ne asigura că lucrurile nu se rup atunci când utilizatorul face lucruri neașteptate.

Legare și dezlegare

Dacă ați testat codul nostru în acest moment, probabil că veți sfârși cu această eroare de rupere a funcționalității: atunci când un utilizator face dublu clic în caseta de intrare rezultată, acesta este acum completat cu conținutul HTML al sistemului de editare. Incearca-l tu insuti. Cu fiecare dublu clic, valoarea casetei de intrare se reflectă prin adăugarea unei alte buchet de text la ea. Această problemă va fi probabil mult mai rău dacă ați ales clicul ca eveniment declanșator.

Pentru a rectifica acest lucru, trebuie să desfacem handlerul evenimentului pentru singurul element specific și să ne rebindem de îndată ce utilizatorul face clic pe acesta, fie salvează sau aruncă. Să implementăm asta acum.

Blocurile anterioare de coduri trebuie să fie redactate astfel:

 function replaceHTML () // Cod $ (this) .html ("") // Codul anterior de inserare a formularului .unbind ('dblclick', replaceHTML); 

Desfacem robotul pentru elementul care a declanșat evenimentul. Restul elementelor cu editabil clasa are inca manageri intacte si va raspunde la evenimente.

 $ () .parent () .html (newText) .bind ("dblclick", înlocuireHTML););

 $ (this) .parent () .html (oldText) .bind ("dblclick", înlocuireHTML););

Apoi, le atașăm înapoi, în ciuda faptului că utilizatorul alege să le editeze sau nu. Dacă nu le reasamblam, câmpurile pot fi editate o singură dată. A doua oară când se dau dublu clic, agenții de transfer nu mai sunt atașați la evenimente. Noi rectificăm acest lucru prin prinderea cu mâna a operatorilor înapoi la evenimente.

Câteva trucuri

Acest ultim cod de cod este pur și simplu pentru a molid apariția efectului nostru. Dacă ați observat, Li are un pic de umplutură în loc pentru a face textul în termeni mai bine. Dar când textul este dezbrăcat și înlocuit cu o casetă de text rezultă aspect urât și sparge efectul. Vrem ca caseta de text să preia exact același spațiu pe care l-a luat textul original. Având în vedere acest lucru, adăugăm a noPad clasează elementul atunci când a fost dublu clicat și eliminat din nou atunci când utilizatorul salvează sau elimină editarea.

 funcția replaceHTML () // Cod $ (acest) .addClass ("noPad") .html ("") // Codul anterior

Desfacem robotul pentru elementul care a declanșat evenimentul. Restul elementelor cu editabil clasa are inca manageri intacte si va raspunde la evenimente.

 $ (".btnSave") live ("clic", funcția () // Codul anterior $ (acest) .parent () .removeClass ("noPad") // Codul anterior);

 $ (this) .parent () .removeClass ("noPad") // Codul anterior);

Codul complet

Iată cum arată codul complet:

 $ () () () () () () () funcția () $ (this) ("dbclick", replaceHTML); $ (".btnSave") live ("click", functie () newText = $ (this) .sublings ("form") .children (". editBox") .val () înlocuiește (/ "/ g," "); ("click"), funcția () $ (this) .parent () .html (oldText) .RemoveClass ("noPad") .bind ("dblclick", replaceHTML);); funcția replaceHTML () oldText = $ (this) .html () acest lucru) .addClass ("noPad") .html ("") .html ("
 
Salvați modificările .unbind ('dblclick', replaceHTML); );

Nu-i rău. Cincizeci de linii ciudate pentru a adăuga unele noi funcționalități spiffice.

Luând-o într-un pas mai departe: Backend-ul

În scopul de a nu face prea mult timp, am rămas la crearea funcționalității clientului în parte. Dacă doriți să implementați această funcționalitate în propriile proiecte, implicit ați presupus că veți avea nevoie de un sistem back-end pentru a salva aceste modificări și, mai important, ați avea nevoie de o solicitare AJAX pentru a efectua acest apel în mod asincron.

Adăugarea acestei funcții ar trebui să fie un cinch, dar face o notă de acest lucru. Codul de mai sus a fost creat doar pentru a ilustra acest model și nu pentru utilizarea în producție. Deci, m-am abținut de la adăugarea atributelor adiționale la elementele și atributele de nume în casetele de text. În codul dvs. de producție, adăugați-le pe toate, astfel încât atributul de nume al cutiei de text poate fi setat în mod semnificativ și astfel încât partea din spate poate recunoaște ce piesă de date trebuie actualizată.

Pentru a adăuga o solicitare AJAX, managerul nostru de salvare ar trebui să fie actualizat astfel:

 (".btnSave") live ("click", funcția () newText = $ (this) .siblings ("form") .children (". , "$" ($): $ .axax (type: "POST", url: "handler.php", data: newText, succes: ; $ (acest) .parent () .html (newText) .removeClass ("noPad") .bind ("dblclick", înlocuireHTML););

Amintiți-vă, pentru ca back-end-ul să înțeleagă ceea ce trimiteți, aveți nevoie de date suplimentare împreună cu textul actualizat, astfel încât aplicația să știe ce date să editați. Puteți trimite cu ușurință mai mult de o singură bucată de date în scenariu, dacă aveți nevoie.

Concluzie

Și acolo aveți; cum să adăugați o funcționalitate prietenoasă utilizatorilor la proiectele dvs. Sperăm că ați găsit acest tutorial interesant și acest lucru a fost util pentru dvs. Simțiți-vă liber să reutilizați acest cod în altă parte în proiectele dvs. și faceți clic aici dacă întâmpinați dificultăți.

Întrebări? Ce lucruri frumoase de spus? Critici? Activați secțiunea de comentarii și lasă-mă un comentariu. Codificare fericită!

• Urmăriți-ne pe Twitter sau abonați-vă la RSS Nettuts + pentru mai multe tutori și articole de coaching zilnic.