Créer un système d'édition sur place

Ainsi, les utilisateurs peuvent cliquer sur plusieurs pages uniquement pour modifier un champ. Dans ce didacticiel, vous allez apprendre à créer un système de modification sur place, comme sur les sites populaires, tels que Flickr..

Un mot de l'auteur

Avec tout le buzz autour du Web 2.0, la facilité d'utilisation est maintenant beaucoup plus importante que jamais. Pouvoir éditer du contenu sans avoir à aller sur une autre page est une chose dont beaucoup d’utilisateurs ont vraiment besoin. Beaucoup de grands noms utilisent déjà ce modèle à bon escient. Si vous avez utilisé Flickr, vous avez probablement déjà vu cela en action.

Je crois qu'une démo vaut mille mots. Frappez la démo et essayez vous-même.

Aujourd'hui, nous allons voir comment implémenter cela avec, vous l'avez bien deviné, notre bibliothèque JavaScript préférée, jQuery. Intéressé? Commençons tout de suite!

Objectifs de conception

Avant de commencer à examiner comment implémenter la fonctionnalité, voici quelques réflexions sur les objectifs et les décisions qui en résultent..

Nous devons laisser l'utilisateur modifier le contenu sans quitter la page. C'est une donnée.
Cela devrait fonctionner dans son ensemble ou échouer dans son ensemble. Lorsque JS est désactivé, nous ne voulons pas nous heurter à des bizarreries bizarres.
L'utilisateur doit savoir que le contenu est modifiable. Un changement subtil de fond bleu devrait attirer l'attention de l'utilisateur sur cette.
Lorsqu’il s’agit de déclencher la modification, il existe quelques options. Nous pouvons soit laisser l'utilisateur éditer sur un clic normal ou double cliquer. J'ai choisi le double-clic car les doubles-clics aléatoires sont moins fréquents que les clics aléatoires. La commutation est juste une question de changer le paramètre dans l'événement bind.
Un moyen pour l'utilisateur de sauvegarder ou d'annuler les modifications.
Les événements de sauvegarde ou d'édition peuvent être déclenchés de 2 manières. Événements de clavier ou de souris. J'ai choisi les événements de souris car les événements de clavier manquent de spécificité.
En ce qui concerne les événements de souris, vous pouvez utiliser des boutons traditionnels ou des liens habituels. J'ai choisi des liens sans raison particulière.
L'utilisateur doit pouvoir reprendre l'édition même s'il clique en dehors de la zone de saisie ou quitte la page et revient..
En outre, l'utilisateur doit pouvoir modifier autant de champs que possible simultanément.

Maintenant que nous avons défini nos besoins, nous pouvons maintenant expliquer comment nous allons le faire..

Plan d'action

Nous allons maintenant devoir définir ce qui doit être fait dans un ordre spécifique.

Étape 1: Nous devrons ajouter une classe de éditable à chaque élément ayant besoin de cette fonctionnalité.

Étape 2: Nous devrons ensuite ajouter des survols à chaque élément modifiable pour attirer l'attention sur le fait que son contenu est modifiable. Nous allons ajouter et supprimer les survols en utilisant JavaScript au lieu de CSS. Ceci est principalement fait pour les appareils ou les navigateurs avec JavaScript désactivé. Nous ne voulons pas leur envoyer de mauvais signaux visuels.

Étape 3: Quand un élément modifiable est double-cliqué, nous devons échanger le contenu et le remplacer par une zone de texte contenant l'ancien texte..

Étape 4a: Lorsque l'utilisateur souhaite enregistrer les modifications, copiez la valeur de l'entrée dans l'élément parent et supprimez la zone de saisie..

Étape 4b: Ou lorsque l'utilisateur souhaite ignorer les modifications, remplace l'ancien contenu et supprime le champ de saisie.

Ce sont les étapes de base dans la création de cette fonctionnalité. Bien sûr, il y a peu d'autres petites choses mais je les expliquerai au fur et à mesure.

Balisage de base

Le balisage HTML de la page de démonstration ressemble à.

    Système d'édition sur place - par Siddharth pour NetTuts       Montage sur place
 par Siddharth pour les adorables gens de Net Tuts
 Éléments avec une classe de éditable sont, bien, éditable. Au cas où vous ne l'auriez pas remarqué, tous les éléments contenant le éditable classe obtenir un fond bleu en survol pour indiquer cette capacité. 
 Double-cliquez pour éditer le contenu. Utilisez les liens créés dynamiquement pour enregistrer ou ignorer les modifications. Vous pouvez ouvrir autant de champs à modifier que vous le souhaitez sans aucun problème..
  je 
  Siddharth
 aime travailler avec le web
 suis un pigiste
 écrire pour Net Tuts
 peut être trouvé à www.ssiddharth.com
 ne vous décevrons jamais ni ne vous abandonneront :)
 
 
  Choses à faire cette semaine
  Obtenir l'approbation de la conception de Deacon
 Envoyer une facture à Albert 
 Commencer à travailler sur le projet de Dwight
 Parler à Sarah de nouvelles idées
 Consultez le site de Seth pour le rendu des bugs
 Rencontrer Clintson pour discuter du projet

Comme vous le voyez, sans tenir compte de la plaque de la chaudière, nous avons deux listes non ordonnées. Chaque li l'élément a une classe de éditable pour indiquer que son contenu peut être édité.

Nous avons également inclus la bibliothèque jQuery et notre propre fichier script.

CSS style

 body font-family: "Lucida Grande", "Verdana", sans serif; taille de police: 12px;  a color: # 000;  a: hover text-decoration: none;  p marge: 30px 0 10px 0;  h1 font-size: 30px; rembourrage: 0; marge: 0;  h2 font-size: 20px;  #container width: 820px; marge gauche: auto; marge droite: auto; remplissage: 50px 0 0 0;  .editHover background-color: # E8F3FF;  .editBox width: 326px; hauteur minimale: 20 px; rembourrage: 10px 15px; couleur d'arrière-plan: #fff; bordure: solide 2px # E8F3FF;  ul list-style: none;  li width: 330px; hauteur minimale: 20 px; rembourrage: 10px 15px; marge: 5px;  li.noPad padding: 0; largeur: 360px;  form width: 100%;  .btnSave, .btnCancel padding: 6px 30px 6px 75px;  .block float: left; marge: 20px 0;

Rien de spécial ici. Juste un tas de code pour la mise en page et le style.

Prenez note de la editHover et noPad Des classes. Nous allons les utiliser dans un peu.

Implémentation JavaScript

Maintenant que nous disposons d’un cadre solide et d’un certain style de base, nous pouvons commencer à coder les fonctionnalités requises. Notez que nous utilisons beaucoup jQuery. Plus précisément, nous aurons besoin d'au moins la version 1.3 ou supérieure. Rien de moins et ça ne marchera pas.

Ajout de survols

Comme indiqué précédemment, nous devrons ajouter un fond bleu subtil aux objets modifiables pour indiquer qu'ils sont modifiables. Nous avons déjà créé le editHover classe pour prendre soin de cette.

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

Ce petit extrait s’occupe de cela pour nous. Nous utilisons jQuery flotter méthode pour ajouter le editHover classe lorsque l'élément est survolé et supprimez-le lorsqu'il ne l'est pas. Nous utilisons ce faire référence à l'élément spécifique survolé. Si nous avions utilisé .éditable en tant que sélecteur, chaque élément obtiendra la classe. Donc nous utilisons ce ne cibler que l'élément dont nous avons besoin.

Changer les éléments

Tout d'abord, nous devons nous assurer que notre code est exécuté lorsque l'élément cible est double-cliqué. Donc, nous allons d'abord connecter le gestionnaire pour cet événement en premier.

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

Nous attachons le remplacerHTML fonction à la double clic événement relatif à la éditable élément avec cette doublure. Maintenant, nous pouvons passer à la commutation des éléments.

 function replaceHTML () oldText = $ (this) .html () .replace (/ "/ g," ""); $ (this) .html ("") .html (" 
Enregistrer les modifications Ignorer les modifications ");

Passons petit à petit sur notre code.

Je définis la fonctionnalité dans une fonction nommée distincte au lieu d'une fonction anonyme pour une raison spécifique: j'utiliserai cette fonction plusieurs fois. Ensuite, nous sauvegardons le contenu de l’élément pour une utilisation future en utilisant jQuery html méthode et remplacement de toutes les citations car il gâche notre sortie sur la ligne.

Maintenant que notre contenu est stocké en toute sécurité pour une utilisation ultérieure, nous pouvons désactiver les éléments. D'abord on vide le li élément en envoyant une chaîne vide à la html méthode. Ensuite, nous insérons du code HTML standard pour une zone de saisie. Nous y ajoutons des classes à des fins de style. Plus important encore, nous définissons sa valeur attribut au texte original contenu par l'élément stocké dans oldText. Nous avons également ajouté quelques liens pour sauvegarder et supprimer les modifications. Nous avons également ajouté des classes pour qu'elles puissent être facilement ciblées et stylisées..

Comme toujours, nous utilisons ce cibler l'élément qui a déclenché l'événement.

Garder les modifications

 $ (". btnSave"). live ("clic", fonction () newText = $ (this) .siblings ("formulaire") .children (". editBox") .val (). replace (/ "/ g , "" "; $ (this) .parent () .html (newText););

Tout d'abord, laissez-moi vous présenter jQuery's vivre méthode. Vous n'avez probablement jamais vu autant de choses auparavant, alors je vais vous donner une brève introduction.

Vous ne pouvez pas associer des gestionnaires à des événements déclenchés par des éléments qui ne sont même pas présents dans le DOM lorsque la page et le code JavaScript ont été chargés. Si vous utilisez des fonctions de liaison d'événement normales, cela échouera pour la raison mentionnée ci-dessus. le vivre méthode prend soin de cela.

Il lie les gestionnaires aux événements indépendamment du moment où l'élément a été créé. Pour plus d'informations à ce sujet, vous pouvez consulter la documentation officielle..

Regardons notre code maintenant. Nous lions d’abord le code contenu dans notre fonction anonyme à la Cliquez sur un événement. Dans la fonction, nous enregistrons d’abord le texte contenu dans la zone de saisie. Cela peut être un peu délicat car la zone de saisie n'a pas d'identifiant. Nous cherchons donc d’abord l’élément de formulaire qui est son frère, puis parcourons pour trouver l’élément d’entrée. Nous copions ensuite sa valeur après avoir remplacé toutes les citations qu’elle peut contenir..

Ensuite, nous obtenons l’élément parent links, le li élément et remplacez son contenu HTML par le texte que nous avons copié à l'étape précédente.

Ce bloc aurait pu facilement être créé en tant que ligne unique mais j'ai choisi de le scinder en 2 lignes dans un souci de lisibilité..

Rejeter les modifications

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

C'est aussi simple qu'il y paraît. Étant donné que l'utilisateur ne veut conserver aucune des modifications. Nous venons de remplacer le contenu HTML de l’élément parent par le texte original que nous avions déjà copié au début. oldText variable.

Avec cela, le coeur de notre travail est terminé. Nous avons juste besoin de faire quelques modifications pour nous assurer que les choses ne se cassent pas lorsque l'utilisateur fait des choses inattendues.

Reliure et déliaison

Si vous avez testé notre code à ce stade, vous obtiendrez probablement ce bogue qui casse la fonctionnalité: lorsqu'un utilisateur double-clique dans la zone de saisie résultante, il contient maintenant le contenu HTML du système d'édition. Essayez vous-même. À chaque double clic, la valeur de la zone de saisie est reflétée par l'ajout d'un autre groupe de texte. Ce problème sera probablement bien pire si vous avez choisi click comme événement déclencheur..

Pour remédier à cela, nous devons dissocier le gestionnaire d'événements pour cet élément spécifique uniquement et les relier dès que l'utilisateur clique sur Enregistrer ou Supprimer. Appliquons cela maintenant.

Nos blocs de code précédents doivent maintenant être édités pour:

 function replaceHTML () // Code $ (this) .html ("") // Code d'insertion de formulaire antérieur .unbind ('dblclick', replaceHTML);

Nous décrochons le gestionnaire pour l'élément qui a déclenché l'événement. Le reste des éléments avec le éditable la classe a toujours ses gestionnaires intacts et répondra aux événements.

 $ (". btnSave"). live ("clic", fonction () // Code antérieur $ (this) .parent () .html (newText) .bind ("dblclick", replaceHTML););

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

Ensuite, nous associons ces gestionnaires en dépit du choix de l’utilisateur de les éditer ou non. Si nous ne les réattachons pas, les champs ne peuvent être modifiés qu'une seule fois. La deuxième fois que vous double-cliquez dessus, les gestionnaires ne sont plus attachés aux événements. Nous corrigeons cela en accrochant les gestionnaires aux événements.

Quelques tweaks

Ce dernier morceau de code est purement pour embellir l'apparence de notre effet. Si vous avez remarqué, le li a un peu de rembourrage en place pour rendre le texte à l'air mieux. Mais lorsque le texte est supprimé et remplacé par une zone de texte, le résultat est très laid et casse l’effet. Nous voulons que la zone de texte occupe exactement le même espace que le texte original. Dans cet esprit, nous ajoutons un noPad classe à l'élément lorsqu'il a été double-cliqué et supprimé à nouveau lorsque l'utilisateur a sauvegardé ou ignoré la modification.

 function replaceHTML () // Code $ (this) .addClass ("noPad") .html ("") // Code antérieur

 $ (". btnSave"). live ("click", function () // Code antérieur $ (this) .parent () .removeClass ("noPad") // Code antérieur);

 $ (". btnDiscard"). live ("clic", function () $ (this) .parent () .removeClass ("noPad") // code antérieur);

Le code complet

Voici à quoi ressemble le code complet:

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

Pas mal. Cinquante lignes impaires pour ajouter de nouvelles fonctionnalités.

Aller plus loin: le backend

Afin de ne pas trop durer, je me suis attaché à créer uniquement la fonctionnalité côté client. Si vous souhaitez implémenter cette fonctionnalité dans vos propres projets, il est implicitement supposé que vous avez besoin d'un système back-end pour sauvegarder ces modifications et, plus important encore, d'une requête AJAX pour passer cet appel de manière asynchrone..

L'ajout de cette fonctionnalité devrait être un jeu d'enfant, mais prenez-en note. Le code ci-dessus a été créé uniquement pour illustrer ce modèle et non pour une utilisation en production. Je me suis donc abstenu d'ajouter des attributs d'ID supplémentaires aux éléments et des attributs de nom aux zones de texte. Dans votre code de production, ajoutez-les tous afin que l'attribut du nom de la zone de texte puisse être défini de manière significative et que le serveur final puisse reconnaître le type de données à mettre à jour..

Pour ajouter une demande AJAX, notre gestionnaire de sauvegarde devrait être mis à jour pour:

 $ (". btnSave"). live ("clic", fonction () newText = $ (this) .siblings ("formulaire") .children (". editBox") .val (). replace (/ "/ g , "" "); $ .ajax (type:" POST ", url:" handler.php ", données: newText, success: function (msg) // Du code ici pour refléter une modification réussie;) ; $ (this) .parent () .html (newText) .removeClass ("noPad") .bind ("dblclick", replaceHTML););

N'oubliez pas que pour que le serveur final puisse comprendre ce que vous lui envoyez, vous avez besoin de données supplémentaires ainsi que du texte mis à jour pour que l'application sache quelles données modifier. Vous pouvez facilement envoyer plusieurs données au script si vous avez besoin de.

Conclusion

Et voila; comment ajouter une fonctionnalité conviviale à vos projets. J'espère que vous avez trouvé ce tutoriel intéressant et que cela vous a été utile. Sentez-vous libre de réutiliser ce code ailleurs dans vos projets et insérez-le ici si vous rencontrez des difficultés.

Des questions? De belles choses à dire? Des reproches? Hit la section des commentaires et laissez-moi un commentaire. Bonne codage!

Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir plus d'articles et de sujets sur le développement Web quotidiens.

Code