Mon cahier d’exercices

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.

view source
print?
001/*
002 * Daniel Hagnoul
003 *
004 * Plugin jquery.dvjhClone-1.0.0.js
005 *
006 * Code v1.0.0 2011-06-13
007 *
008 * Le plugin réalise un clone complet (data et event)
009 * d'un élément du DOM.
010 *
011 * Le clone est placé dans la position choisie (par
012 * défaut, before) par rapport à l'élément pivot (par
013 * défaut, l'élément cloné).
014 *
015 * Un ID doit être unique.
016 *
017 * Pour garantir l'unicité des IDs, le pivot ne peut être
018 * que l'élément cloné ou un élément du DOM ayant un ID
019 * unique (le plugin refusera d'utiliser l'ID s'il n'est
020 * pas unique).
021 *
022 * Pour la même raison, le clone et chaque élément
023 * contenu dans le clone qui possède un ID reçoit
024 * un ID spécial.
025 *
026 * L'élément cloné possède un attribut "data-dvjh-clone-id"
027 * qui contient l'ID de son dernier clone. Pour un élément
028 * cloné ayant l'ID "pathologie", on obtient l'ID de son
029 * dernier clone par :
030 *  $("#pathologie").data("dvjhCloneId");
031 *
032 * -----------------------------------------
033 *
034 * Exemple 1 :
035 *  On clone l'élément du DOM ayant l'ID "pathologie" et
036 *  l'on place le clone avant l'élément cloné.
037 *
038 *  $("#pathologie").dvjhClone();
039 *
040 * Exemple 2 :
041 *  On clone les éléments du DOM ayant la classe "classDVJH"
042 *  et l'on place le clone en dernière position dans l'élément
043 *  cloné, car l'option clonePivot ne peut pas être une classe.
044 *
045 *  $(".classDVJH").dvjhClone({
046 *      cloneMethod: 2,
047 *      clonePivot: ".testClass"
048 *  });
049 *
050 * Exemple 3 :
051 *  <button id="btnClone">Cloner et ajouter avant</button>
052 * 
053 *  $("#btnClone").click(function(){
054 *      $("#btnClone").dvjhClone();
055 *      return false;
056 *  });
057 *
058 *  Nota bene : les boutons clonés gèrent les mêmes événements
059 *  que l'original. Et dans tous les cas, on produit un
060 *  nouveau clone du bouton original.
061 *
062 * -----------------------------------------
063 *
064 * Options disponibles.
065 *
066 * L'option cloneMethod est la valeur de l'index
067 * correspondant à votre choix (0 à 3) dans l'array :
068 * ["after", "before", "append", "prepend"].
069 *
070 * Par défaut, cloneMethod = 1 soit "before".
071 *
072 * Par défaut, clonePivot est "item", c'est-à-dire
073 * l'élément cloné.
074 *
075 * On peut donner un ID, par exemple "#monID".
076 *
077 * On ne peut pas donner une classe (".maClass").
078 * Car dans ce cas il y aurait autant de clones
079 * qu'il y a d'éléments ayant cette classe et
080 * l'unicité des ID serait brisée.
081 *
082 * Valeurs par défaut :
083 *  cloneMethod: 1
084 *  clonePivot: "item"
085 */
086(function($){
087    $.fn.dvjhClone = function(options){
088        var opts = $.extend(true, {}, $.fn.dvjhClone.defaults, options);
089         
090        return this.each(function(i, item){
091            var id = "dvjhClone" + $.now(),
092                objClone = $(item).clone(true, true),
093                objPivot = $(item);
094             
095            if ((opts.clonePivot != "item") && (opts.clonePivot.match("#")) && ($("[id='" + opts.clonePivot.slice(1) + "']").length == 1)){
096                objPivot = $(opts.clonePivot);
097            }
098             
099            objClone.removeAttr("data-dvjh-clone-id");
100             
101            objClone[0].id = id;
102             
103            $(item).attr("data-dvjh-clone-id", id);
104             
105            objClone.find("*").each(function(j, jtem){
106                if (jtem.id){
107                    jtem.id = id + j;
108                }
109            });
110             
111            switch(opts.cloneMethod){
112                case 0:
113                    objPivot.after(objClone);
114                    break;
115                case 1:
116                    objPivot.before(objClone);
117                    break;
118                case 2:
119                    objPivot.append(objClone);
120                    break;
121                case 3:
122                    objPivot.prepend(objClone);
123                    break;
124                default:
125                    objPivot.before(objClone);
126            }
127        });
128    };
129     
130    $.fn.dvjhClone.defaults = {
131        cloneMethod: 1,
132        clonePivot: "item"
133    };
134})(jQuery);

À bientôt !

 

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

Avertissement solennel

Autodidacte en informatique, l’auteur a tous les défauts de sa qualité. Si vous vous inspirez, copiez ou pire utilisez le contenu de cette page, vous êtes téméraire, inconscient du danger !

Reconnaissant avoir été dûment informé, vous déchargez l’auteur et à fortiori l’hébergeur du site de toute responsabilité dans les graves dégâts que vous causerez sûrement !

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

Creative Commons License Attribution-Share Alike 2.0 Belgium Except where otherwise noted, content on this site is licensed under a Creative Commons License : Attribution-Share Alike 2.0 Belgium

Mention obligatoire : "Auteur : Hagnoul Daniel (https://www.developpez.net/forums/u285162/danielhagnoul/)"