Plugin dvjhClone

"Auteur : Hagnoul Daniel"

Texte : v1.0.0 2011-06-14

Réaliser un clone complet et le mettre en place.

Téléchargement ftp : jquery.dvjhClone-1.0.0.js

Téléchargement https : jquery.dvjhClone-1.0.0.js

Le clonage est une opération dangereuse à cause du risque de duplication des ID.

On peut cloner un élément contenant déjà des clones ou incorporer plusieurs fois le même clone dans le DOM. Sans un programme qui contrôle le clonage, il est pratiquement impossible de garantir l'unicité des ID.

Le plugin dvjhClone conserve l'unicité des ID et il clone la totalité des composants d'un élément du DOM y compris les données (data) et les événements.

/*
 * Daniel Hagnoul
 * 
 * Plugin jquery.dvjhClone-1.0.0.js
 *
 * Code v1.0.0 2011-06-13
 *
 * Le plugin réalise un clone complet (data et event)
 * d'un élément du DOM.
 *
 * Le clone est placé dans la position choisie (par
 * défaut, before) par rapport à l'élément pivot (par
 * défaut, l'élément cloné).
 *
 * Un ID doit être unique.
 *
 * Pour garantir l'unicité des IDs, le pivot ne peut être
 * que l'élément cloné ou un élément du DOM ayant un ID
 * unique (le plugin refusera d'utiliser l'ID s'il n'est
 * pas unique).
 *
 * Pour la même raison, le clone et chaque élément
 * contenu dans le clone qui possède un ID reçoit
 * un ID spécial.
 *
 * L'élément cloné possède un attribut "data-dvjh-clone-id"
 * qui contient l'ID de son dernier clone. Pour un élément
 * cloné ayant l'ID "pathologie", on obtient l'ID de son
 * dernier clone par :
 *  $("#pathologie").data("dvjhCloneId");
 *
 * -----------------------------------------
 * 
 * Exemple 1 :
 *  On clone l'élément du DOM ayant l'ID "pathologie" et
 *  l'on place le clone avant l'élément cloné.
 *
 *  $("#pathologie").dvjhClone();
 * 
 * Exemple 2 :
 *  On clone les éléments du DOM ayant la classe "classDVJH"
 *  et l'on place le clone en dernière position dans l'élément
 *  cloné, car l'option clonePivot ne peut pas être une classe.
 *
 *  $(".classDVJH").dvjhClone({
 *      cloneMethod: 2,
 *      clonePivot: ".testClass"
 *  });
 * 
 * Exemple 3 :
 *  <button id="btnClone">Cloner et ajouter avant</button>
 *  
 *  $("#btnClone").click(function(){
 *      $("#btnClone").dvjhClone();
 *      return false;
 *  });
 *
 *  Nota bene : les boutons clonés gèrent les mêmes événements
 *  que l'original. Et dans tous les cas, on produit un
 *  nouveau clone du bouton original.
 *
 * -----------------------------------------
 * 
 * Options disponibles.
 *
 * L'option cloneMethod est la valeur de l'index
 * correspondant à votre choix (0 à 3) dans l'array :
 * ["after", "before", "append", "prepend"].
 *
 * Par défaut, cloneMethod = 1 soit "before".
 *
 * Par défaut, clonePivot est "item", c'est-à-dire
 * l'élément cloné.
 *
 * On peut donner un ID, par exemple "#monID".
 *
 * On ne peut pas donner une classe (".maClass").
 * Car dans ce cas il y aurait autant de clones
 * qu'il y a d'éléments ayant cette classe et
 * l'unicité des ID serait brisée.
 *
 * Valeurs par défaut :
 *  cloneMethod: 1
 *  clonePivot: "item"
 */
(function($){
	$.fn.dvjhClone = function(options){
		var opts = $.extend(true, {}, $.fn.dvjhClone.defaults, options);
		
		return this.each(function(i, item){
			var id = "dvjhClone" + $.now(),
                objClone = $(item).clone(true, true),
                objPivot = $(item);
            
            if ((opts.clonePivot != "item") && (opts.clonePivot.match("#")) && ($("[id='" + opts.clonePivot.slice(1) + "']").length == 1)){
                objPivot = $(opts.clonePivot);
			}
            
            objClone.removeAttr("data-dvjh-clone-id");
            
            objClone[0].id = id;
            
            $(item).attr("data-dvjh-clone-id", id);
            
			objClone.find("*").each(function(j, jtem){
                if (jtem.id){
                    jtem.id = id + j;
                }
			});
            
			switch(opts.cloneMethod){
				case 0:
					objPivot.after(objClone);
					break;
				case 1:
					objPivot.before(objClone);
					break;
				case 2:
					objPivot.append(objClone);
					break;
				case 3:
					objPivot.prepend(objClone);
					break;
				default:
					objPivot.before(objClone);
			}
		});
	};
	
    $.fn.dvjhClone.defaults = {
		cloneMethod: 1,
		clonePivot: "item"
	};
})(jQuery);

À bientôt !

 

Veuillez poser vos questions
techniques sur les forums DVP,
s'il vous plait.

Vous n'aurez jamais fini d'apprendre la programmation, aussi apprenez à apprendre en vous amusant.