Fare in modo che gli utenti facciano clic su più pagine solo per modificare un campo è così 1999. In questo tutorial, imparerai come creare un sistema di editing sul posto come trovato su siti popolari, come Flickr.

Una parola dall'autore

Con tutto il ronzio del Web 2.0, la facilità d'uso è ora molto più importante che mai. Essere in grado di modificare alcuni contenuti senza dover andare su un'altra pagina è qualcosa che molti utenti desiderano davvero. Molti grandi nomi stanno già utilizzando questo modello con grande effetto. Se hai usato Flickr, probabilmente lo hai visto in azione.

Credo che una demo valga più di mille parole. Colpisci la demo e provalo tu stesso.

Oggi vedremo come implementarlo con, hai indovinato, la nostra libreria JavaScript preferita, jQuery. Interessato? Iniziamo subito!

Obiettivi di progettazione

Prima di iniziare a esaminare come implementare la funzionalità, ecco alcune riflessioni sugli obiettivi e sulle decisioni che ne derivano.

• Dobbiamo consentire all'utente di modificare il contenuto senza uscire dalla pagina. Questo è un dato.
• Questo dovrebbe funzionare nel suo insieme o fallire nel suo complesso. Quando JS è disabilitato, non vogliamo incontrare stranezze strane.
• L'utente dovrebbe sapere che il contenuto è modificabile. Un sottile cambiamento di sfondo blu dovrebbe attirare l'attenzione dell'utente su questo.
• Quando si tratta di come attivare la modifica ci sono alcune opzioni. Possiamo consentire all'utente di modificare un normale clic o doppio clic. Ho scelto il doppio clic poiché i doppi clic casuali si verificano a un tasso inferiore rispetto ai clic casuali. Cambiarlo è solo questione di cambiare il parametro nell'evento di bind.
• Un modo per l'utente di salvare o eliminare le modifiche.
• Salva o modifica gli eventi possono essere attivati ​​in 2 modi. Eventi della tastiera o eventi del mouse. Ho scelto gli eventi del mouse poiché gli eventi della tastiera mancano di specificità.
• Per quanto riguarda gli eventi del mouse, è possibile utilizzare i pulsanti tradizionali oi collegamenti normali. Ho scelto i collegamenti senza una ragione particolare.
• L'utente dovrebbe essere in grado di riprendere la modifica anche se fa clic fuori dalla casella di immissione o esce dalla pagina e torna indietro.
• Inoltre, l'utente dovrebbe essere in grado di modificare più campi possibile contemporaneamente.

Ora che abbiamo tracciato le nostre esigenze, possiamo ora passare a come faremo questo.

Piano di azione

Ora dovremo mappare ciò che deve essere fatto in un ordine specifico.

Passo 1: Dovremo aggiungere una classe di modificabile a ciascun elemento che ha bisogno di questa funzionalità.

Passo 2: Successivamente sarà necessario aggiungere al passaggio del mouse su ciascun elemento modificabile per attirare l'attenzione sul fatto che il contenuto di quell'elemento è modificabile. Aggiungeremo e rimuoveremo gli hover utilizzando JavaScript anziché CSS. Questo è principalmente fatto per dispositivi o browser con JavaScript disabilitato. Non vogliamo inviare loro segnali visivi sbagliati.

Passaggio 3: Quando si fa doppio clic su un elemento modificabile, è necessario sostituire i contenuti e sostituirli con una casella di testo con il vecchio testo.

Passaggio 4a: Quando l'utente vuole salvare le modifiche, copia il valore dell'ingresso sull'elemento genitore e rimuovi la casella di input.

Passaggio 4b: O quando l'utente vuole scartare le modifiche, sostituire il vecchio contenuto e rimuovere la casella di input.

Questi sono i passaggi di base nella creazione di questa funzionalità. Naturalmente ci sono poche altre piccole cose, ma le spiegherò mentre procediamo.

Core Markup

Il markup HTML della pagina demo sembra così.

          
 
Modifica sul posto
 
di Siddharth per le persone adorabili di Net Tuts
 
Elementi con una classe di modificabile sono, bene, modificabili. Nel caso in cui non hai notato, tutti gli elementi contenenti il modificabile la classe ottiene uno sfondo blu al passaggio del mouse per indicare questa capacità. 
 
Fare doppio clic per modificare i contenuti. Utilizzare i collegamenti creati dinamicamente per salvare o eliminare le modifiche. Puoi aprire tanti campi da modificare come vuoi senza problemi.
 
 
io 
 
 
sono Siddharth
 
amo lavorare con il web
 
sono un libero professionista
 
scrivere per Net Tuts
 
può essere trovato a www.ssiddharth.com
 
non ti deluderò mai o ti abbandonerò :)
 
 
 
 
Cose da fare questa settimana
 
 
Ottieni l'approvazione del design di Deacon
 
Invia una fattura ad Albert 
 
Inizia a lavorare sul progetto di Dwight
 
Parla con Sarah delle nuove idee
 
Controlla il sito di Seth per il rendering dei bug
 
Incontro con Clintson per discutere del progetto
 
 
 
  

Come vedi, trascurando il piatto della caldaia, abbiamo due liste non ordinate. Ogni Li elemento ha una classe di modificabile per denotare che il suo contenuto può essere modificato.

Abbiamo anche incluso la libreria jQuery e il nostro file di script.

Styling CSS

 body font-family: "Lucida Grande", "Verdana", sans-serif; font-size: 12px;  a color: # 000;  a: hover text-decoration: none;  p margin: 30px 0 10px 0;  h1 font-size: 30px; padding: 0; margine: 0;  h2 font-size: 20px;  #container width: 820px; margin-left: auto; margin-right: auto; imbottitura: 50px 0 0 0;  .editHover background-color: # E8F3FF;  .editBox width: 326px; altezza minima: 20px; imbottitura: 10px 15px; background-color: #fff; border: 2px solid # E8F3FF;  ul list-style: none;  li larghezza: 330px; altezza minima: 20px; imbottitura: 10px 15px; margine: 5px;  li.noPad padding: 0; larghezza: 360px;  forma larghezza: 100%;  .btnSave, .btnCancel padding: 6px 30px 6px 75px;  .block float: left; margine: 20px 0; 

Niente di speciale qui. Solo un mucchio di codice per il layout e gli scopi di styling.

Prendi nota speciale del editHover e noPad classi. Li useremo tra un po '.

Implementazione JavaScript

Ora che abbiamo una struttura solida e uno stile di base, possiamo iniziare a codificare la funzionalità richiesta. Si noti che facciamo ampio uso di jQuery. In particolare avremo bisogno almeno della versione 1.3 o successiva. Nulla di meno e non funzionerà.

Aggiunta di Hovers

Come notato in precedenza, avremo bisogno di aggiungere uno sfondo blu sottile agli oggetti modificabili per significare che sono modificabili. Abbiamo già creato il editHover classe di prendersi cura di questo.

 $ (". editable"). hover (function () $ (this) .addClass ("editHover");, function () $ (this) .removeClass ("editHover"););

Questo piccolo frammento si prende cura di questo per noi. Usiamo jQuery librarsi metodo per aggiungere il editHover classe quando l'elemento è sospeso sopra e rimuoverlo quando non lo è. Noi usiamo Questo per fare riferimento all'elemento specifico che è aleggiato sopra. Se l'avessimo usato .modificabile come selettore, invece, a ogni elemento verrà aggiunta la classe. Quindi usiamo Questo per indirizzare solo l'elemento di cui abbiamo bisogno.

Spegnere gli elementi

Per prima cosa, dobbiamo assicurarci che il nostro codice venga eseguito quando l'elemento di destinazione viene cliccato due volte. Quindi per prima cosa collegheremo il gestore per questo evento.

 $ (". editable"). bind ("dblclick", replaceHTML);

Alleghiamo il replaceHTML funzione al doppio click evento relativo al modificabile elemento con quella fodera. Ora possiamo passare alla commutazione degli elementi.

 function replaceHTML () oldText = $ (this) .html () .replace (/ "/ g," ""); $ (this) .html ("") .html ("
 
Salva le modifiche Elimina le modifiche ");

Esaminiamo il nostro codice bit per un pochino.

Definisco la funzionalità all'interno di una funzione denominata separata anziché di una funzione anonima per un motivo specifico: userò questa funzione più di una volta. Successivamente, salviamo il contenuto dell'elemento per uso futuro usando jQuery html metodo e sostituendo tutte le citazioni dal momento che incasina la nostra produzione lungo la linea.

Ora che i nostri contenuti sono archiviati in modo sicuro per un uso futuro, possiamo cambiare gli elementi. Per prima cosa svuotiamo il Li elemento inviando una stringa vuota al html metodo. Successivamente, inseriamo un codice HTML standard per una casella di input. Aggiungiamo alcune classi ad esso per scopi di stile. Ancora più importante, abbiamo impostato il suo valore attributo al testo originale contenuto dall'elemento memorizzato in oldText. Aggiungiamo anche un paio di link per occuparci di salvare e scartare le modifiche. Abbiamo anche aggiunto loro delle classi in modo che possano essere facilmente mirate e per lo styling.

Come sempre, usiamo Questo per indirizzare l'elemento che ha attivato l'evento.

Mantenere le modifiche

 $ (". btnSave"). live ("click", function () newText = $ (this) .siblings ("form") .children (". editBox") .val (). replace (/ "/ g , "" "); $ (this) .parent () .html (newText););

Per prima cosa, permettimi di introdurre jQuery vivere metodo. Probabilmente non l'hai visto molto prima quindi ti darò una breve introduzione.

Non è possibile collegare gestori ad eventi attivati ​​da elementi che non sono ancora presenti nel DOM quando la pagina e il JavaScript sono stati caricati. Se si utilizzano le normali funzioni di associazione eventi, fallirà a causa del motivo sopra menzionato. Il vivere il metodo si prende cura di questo.

Lega gli handler agli eventi indipendentemente da quando l'elemento è stato creato. Per ulteriori informazioni, puoi consultare i documenti ufficiali.

Diamo un'occhiata al nostro codice ora. Per prima cosa leghiamo il codice contenuto nella nostra funzione anonima al clic evento. All'interno della funzione salviamo prima il testo contenuto nella casella di input. Questo può essere un po 'complicato dal momento che la casella di input non ha un ID. Quindi, per prima cosa cerchiamo l'elemento del modulo che è suo fratello e poi attraversa per trovare l'elemento di input. Quindi copiamo il suo valore dopo aver sostituito tutte le virgolette che potrebbe contenere.

Successivamente, otteniamo l'elemento padre link, il Li elemento e sostituire il suo contenuto HTML con il testo che abbiamo copiato nel passaggio precedente.

Questo blocco potrebbe essere stato facilmente creato come un unico rivestimento, ma ho scelto di dividerlo in 2 righe nell'interesse della leggibilità.

Scartare le modifiche

 $ (". btnDiscard"). live ("click", function () $ (this) .parent () .html (oldText););

Questo è semplice come sembra. Poiché l'utente non desidera mantenere nessuna modifica. Sostituiamo semplicemente il contenuto HTML dell'elemento genitore con il testo originale che avevamo copiato precedentemente oldText variabile.

Con questo il nucleo del nostro lavoro è finito. Abbiamo solo bisogno di fare un paio di modifiche per assicurarci che le cose non si interrompano quando l'utente fa cose inaspettate.

Vincolante e non vincolante

Se hai testato il nostro codice a questo punto, probabilmente finirai con questo bug di interruzione della funzionalità: quando un utente fa doppio clic nella casella di input risultante viene ora riempito con il contenuto HTML del sistema di editing. Prova tu stesso. Ad ogni doppio clic, il valore della casella di input si riflette aggiungendo un altro gruppo di testo. Questo problema sarà probabilmente molto peggiore se hai scelto il clic come evento di attivazione.

Per ovviare a questo, abbiamo bisogno di separare il gestore di eventi da quello specifico elemento e ricollegarli non appena l'utente fa clic su salva o scarta. Implementiamolo adesso.

I nostri blocchi di codice precedenti ora devono essere modificati per:

 function replaceHTML () // Codice $ (this) .html ("") // Codice di inserimento del modulo precedente .unbind ('dblclick', replaceHTML); 

Abbiamo sganciato il gestore per l'elemento che ha attivato l'evento. Il resto degli elementi con il modificabile la classe ha ancora i suoi gestori intatti e risponderà agli eventi.

 $ (". btnSave"). live ("click", function () // Codice precedente $ (this) .parent () .html (newText) .bind ("dblclick", replaceHTML););

 $ (". btnDiscard"). live ("click", function () $ (this) .parent () .html (oldText) .bind ("dblclick", replaceHTML););

In seguito colleghiamo questi gestori nonostante l'utente scelga di modificarli o meno. Se non li ricolleghiamo, i campi possono essere modificati solo una volta. La seconda volta che viene fatto doppio clic, i gestori non sono più collegati agli eventi. Rettifichiamo questo collegando gli handler agli eventi.

Alcune modifiche

Quest'ultimo pezzetto di codice è solo per dare forma al nostro effetto. Se hai notato, il Li ha un po 'di padding in atto per rendere il testo all'interno un aspetto migliore. Ma quando il testo viene rimosso e sostituito da una casella di testo, risulta sgradevole e rompe l'effetto. Vogliamo che la casella di testo occupi esattamente lo stesso spazio del testo originale. Con questo in mente, aggiungiamo a noPad class l'elemento quando è stato fatto doppio clic e rimosso di nuovo quando l'utente salva o scarta la modifica.

 function replaceHTML () // Code $ (this) .addClass ("noPad") .html ("") // Codice precedente

Abbiamo sganciato il gestore per l'elemento che ha attivato l'evento. Il resto degli elementi con il modificabile la classe ha ancora i suoi gestori intatti e risponderà agli eventi.

 $ (". btnSave"). live ("click", function () // Codice precedente $ (this) .parent () .removeClass ("noPad") // Codice precedente);

 $ (". btnDiscard"). live ("click", function () $ (this) .parent () .removeClass ("noPad") // Codice precedente);

Il codice completo

Ecco come appare il codice completo:

 $ (document) .ready (function () var oldText, newText; $ (". editable"). hover (function () $ (this) .addClass ("editHover");, function () $ ( this) .removeClass ("editHover");); $ (". editable"). bind ("dblclick", replaceHTML); $ (". btnSave"). live ("clic", funzione () newText = $ (this) .siblings ("form") .children (". editBox") .val (). replace (/ "/ g," ""); $ (this) .parent () .html (newText). removeClass ("noPad") .bind ("dblclick", replaceHTML);); $ (". btnDiscard"). live ("clic", function () $ (this) .parent () .html (oldText) .removeClass ("noPad") .bind ("dblclick", replaceHTML);); function replaceHTML () oldText = $ (this) .html () .replace (/ "/ g," ""); $ ( this) .addClass ("noPad") .html ("") .html ("
 
Salva le modifiche .unbind ('dblclick', replaceHTML); );

Non male. Cinquanta linee dispari per aggiungere qualche nuova funzionalità spiffy.

Prendendo un ulteriore passo avanti: il backend

Nell'interesse di non renderlo troppo lungo, mi sono limitato a creare la funzionalità lato client da solo. Se si desidera implementare questa funzionalità all'interno dei propri progetti, si presuppone implicitamente che sia necessario un sistema di back-end per salvare queste modifiche e, cosa più importante, è necessaria una richiesta AJAX per effettuare questa chiamata in modo asincrono.

Aggiungere questa funzionalità dovrebbe essere un gioco da ragazzi, ma prendere nota di questo. Il codice sopra è stato creato solo per illustrare questo modello e non per l'uso di produzione. Quindi mi sono astenuto dall'aggiungere ulteriori attributi ID agli elementi e assegnare gli attributi alle caselle di testo. Nel codice di produzione, aggiungili tutti in modo che l'attributo del nome della casella di testo possa essere impostato in modo significativo e in tal modo il back-end possa riconoscere quale parte di dati deve essere aggiornata.

Per aggiungere una richiesta AJAX, il nostro gestore di salvataggio dovrebbe essere aggiornato in modo tale:

 $ (". btnSave"). live ("click", function () newText = $ (this) .siblings ("form") .children (". editBox") .val (). replace (/ "/ g , "" "); $ .ajax (tipo:" POST ", url:" handler.php ", data: newText, success: function (msg) // Qualche codice qui per riflettere una modifica riuscita;) ; $ (this) .parent () .html (newText) .removeClass ("noPad") .bind ("dblclick", replaceHTML););

Ricorda, per il back-end di dare un senso a ciò che stai inviando ad esso, hai bisogno di alcuni dati aggiuntivi insieme al testo aggiornato in modo che l'app sappia quali dati modificare. Se è necessario, è possibile inviare facilmente più di un pezzo di dati allo script.

Conclusione

E il gioco è fatto; come aggiungere una funzionalità user friendly ai tuoi progetti. Spero che tu abbia trovato questo tutorial interessante e questo ti è stato utile. Sentitevi liberi di riutilizzare questo codice altrove nei vostri progetti e suonare qui se vi trovate in difficoltà.

Domande? Belle cose da dire? Critiche? Colpisci la sezione dei commenti e lasciami un commento. Buona programmazione!

• Seguici su Twitter o iscriviti al feed Nettuts + RSS per altri articoli e tutorial di sviluppo web quotidiano.