[SRC] [FORM][DOM][DYNAMIQUE]mais pas que form [Sources]

**SpaceFrog** · 24/04/2008, 14h34

Voici un petit code que je me suis amusé à mettre en place qui était prévu au départ pour créer dynamiquement des formulaires html, mais qui en fin de compte s'avère être bien plus universel !

la "librairie":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script type='text/javascript'>
var Flux=new Array();
var isIE =(document.all)?true:false;
Array.prototype.ArrayPos=function(quoi){
        var Position=-1;
        for (i=0;this[i];i++){ if (quoi==this[i]){Position=i;}
                                }
        return Position;
    }
 
$Close=function(Closing){
       var FluxPos=Flux.ArrayPos(Closing)
       var FluxLength=Flux.length;
       var SpliceLength=FluxLength-FluxPos+1;
       var AppendLot=Flux.splice(FluxPos+1,SpliceLength);
 
       for(l=0;AppendLot[0];l++){
                        Closing.appendChild(AppendLot.shift())
                            }
       if(Flux.length==1){document.body.appendChild(Flux.pop())}
                           }
 
 
var $C= function (HasH){
    var Elt='';
    var Special=false;
 
    switch(HasH['type']){
            case('radio' ): Elt=(isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
                              Special=(isIE)?true:false;    
                              break;
 
            case('checkbox' ): Elt=(isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
                              Special=(isIE)?true:false;    
                              break;
                        case('file' ): Elt=(isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
                              Special=(isIE)?true:false;    
                              break;                             
 
            default:          Elt=HasH['obj'];
                              Special=(isIE)?true:false;
            }
 
    if(HasH['obj']=='label'){Elt=(isIE)?'<label for="'+HasH['htmlFor']+'">':HasH['obj'];
                             Special=(isIE)?true:false;
                             }
  if(HasH['obj']=='select'){Elt=(isIE)?('<select name="'+HasH['name']+'" '+((HasH['multiple']==1)?'multiple ':'')+' >'):HasH['obj'];
                             Special=(isIE)?true:false;
                             }
   if(HasH['obj']=='form'){Elt=(isIE)?('<form name="'+HasH['name']+' >'):HasH['obj'];
                             Special=(isIE)?true:false;
                             }
 
    var Obj=document.createElement(Elt);
    for (elt in HasH){
        if (elt != 'obj'){
                if(elt=='css'){   for(Styl in HasH['css']){Obj.style[Styl]=HasH['css'][Styl];}
                              }
 
                else{ 
                           if(isIE){ if(!Special || (elt!='name' && elt!='for' )){
                                                                      Obj[elt]=HasH[elt];
                                                              }
                              }            
                     else{ Obj[elt]=HasH[elt];
                            }         
 
                }    
        }
     }
 Flux.push(Obj);    
 return Obj; 
 }

un peu d'explications:
ce code permet de créer à la volée des elements DOM et d'ordonnancer leur niveau parent/child simplement, par quelques lignes de code...

Prérequis:

Un array qui stocke les objets au fur a mesure de leur création et qui sert d'ordonanceur pour les append . (Flux)

J'avais également besoin d'une fonction indexOf mais sur un arrray = > j'ai du créer le prototype d'array ArrayPos.

La création des Objets:

Elle se fait au moyen de la fonction $C qui prend en paramètre un hash
il faut respecter l'ordre des éléments du hash en mettant en première position la balise souhaitée

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{'obj':'baliseHTML', ......}

la fonction $C créé l'objet puis lui assigne les attributs
pour ce qui est du style css, les prorpiétés de styles devront être rédigées sous leur form javascript ex: font-size = > fontSize
ces propriétés seront sous form de "sous Hash"

Attention: les attribut doivent également être libéllés sous leur forme javascript, par exemple pour un label le for s'écrira htmlFor
pour un select multiple on ecrira 'multiple':1
le read-only s'ecrira readOnly

pour les porpriété de style :
css : border-bottom => javascript : borderBottom
css : list-style-type => javascript : listStyleType
Attention: float = > cssFloat pour FFX
cssFloat n'est pas implémenté par IE. C'est styleFloat dans ce cas. (Merci MofC)

NB: On peut utilmiser la propriété cssText du style qui permet de conserver la syntxe css des propriétés de style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"css":{"cssText":"color:red;font-size:10px;list-style-type:square;"}

[/code]

Parents/Child :

l'array Flux est incrémenté de l'objet créé.
ainsi on obtient un array d'objets du type:
Flux => (obj1,obj2,obj3 ...)
Pour déterminer le niveau parent / enfant il suffit de "fermer un objet créé auparavant au moyen de la fonction $Close( obj )

fonctionnement de la fonction $Close():
On recupère la position de l'objet dans l'array Flux

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$Close(obj3)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Flux => (obj1,obj2,obj3,obj4,obj5)

Flux.ArrayPos(obj3) retourne 2
on separe Flux en deux...
AppendLot qui prend au moyen d'un splice tous les objets àprès l'obj3
on obtient donc:
Flux =>(obj1,obj2,obj3)
et
AppendLot=>(obj4,obj5)
il ne reste plus qu'à boucler sur AppendLot pour Appender un à un les obj à obj3 ? avec Flux.pop().appendChild(AppendLot.shift())
qui fait d'une pierre tori coups:
* le shift de AppendLot appende l'element
* et le retire du tableau
* le plop retire le dernier element de Flux

Voilà pour le principe de base:
Un exemple simple pour la création d'un select:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    var myselect=  $C({'obj':'select'}) ;
        $C({'obj':'option', 'value':'1','innerHTML':'option 1'}) ;
        $C({'obj':'option', 'value':'2','innerHTML':'option 2'}) ;
    $Close(myselect);

plus complexe le formulaire complet:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Construct(){
 
var myform=$C( {"obj":"form","method":"get","action":self.location.href} );
 
    var myFieldSet= $C( {"obj":"fieldset","css":{'border':"solid 2px",'borderColor':'red',"width":"200px",'padding':'10px'} } );
        var legend=$C( {"obj":"legend","innerHTML":"Enregistrez vous"} );
          $C( {"obj":"div","innerHTML":"LOGIN","css":{'color':"green",'fontFamily':'verdana'} } );
        var myinput=$C({"obj":"input","type":"text","name":"montexte",'css':{'color':'red'} } );
       $C({'obj':'br'}) ;
       $C({'obj':'br'}) ;
    var myselect=  $C({'obj':'select'}) ;
        $C({'obj':'option', 'value':'1','innerHTML':'option 1'}) ;
        $C({'obj':'option', 'value':'2','innerHTML':'option 2'}) ;
    $Close(myselect);    
 
 
    $Close(myFieldSet);
 
    var myDiv= $C( {"obj":"div","css":{'border':"solid 2px",'borderColor':'red',"width":"200px",'padding':'10px','textAlign':'center','marginTop':'2px'} } );
         var mysubmit=$C({"obj":"input","type":"submit","value":"go","css":{"width":"100px"} } );
    $Close(myDiv)
 
$Close(myform)
}

Prévu à la base pour les formulaires on peut en fait utiliser cette librairie pour toute les balises html !

Et juste pour la petite histoire j'ai rèvé ce code ce matin entre 5h00 et 6h00, et hormis la fonction ArrayPos qui dans mon rève devait fonctionner avec indexOf, je n'ai fait que taper le code que j'ai rèvé ...
Je pense que je vais aller me faire soigner

**le_chomeur** · 24/04/2008, 15h01

Envoyé par SpaceFrog

Et juste pour la petite histoire j'ai rèvé ce code ce matin entre 5h00 et 6h00, et hormis la fonction ArrayPos qui dans mon rève devait fonctionner avec indexOf, je n'ai fait que taper le code que j'ai rèvé ...
Je pense que je vais aller me faire soigner

je confirme !! lol
superbe code et explications !!
merci spaffy

juste une dernière chose , pourrait-on avoir un exemple concret par exemple une liste ( enfant/parent

) avec mise en forme css ? hein quoi j'abuse ?

**SpaceFrog** · 24/04/2008, 15h32

une liste ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
var DIV=$C({'obj':'div','css':{'backgroundColor':'red','padding':'5px','width':'200px'}})
var UL= $C({'obj':'ul'});
     var Li1=$C({'obj':'li','css':{'color':'blue','backgroundColor':'yellow'},'innerHTML':'une première ligne'});
     var Li2=$C({'obj':'li','css':{'color':'white','backgroundColor':'black'},'innerHTML':'une autre première ligne'});
     var Li1=$C({'obj':'li','css':{'color':'yellow','backgroundColor':'green'},'innerHTML':'une première d\'avant'});
$Close(UL);
$Close(DIV);

**le_chomeur** · 24/04/2008, 15h38

nickel !
c'était pour montrer l'implémentation au plus grand nombre ( et a moi également

)

merci spaffy !

**SpaceFrog** · 24/04/2008, 15h50

faut juste que je trouve la syntaxe pour les listStyleType

un sous sous Hash ???

**le_chomeur** · 24/04/2008, 15h55

listStyleType ??
la propriété css ?

**SpaceFrog** · 24/04/2008, 15h59

ben oui pour le mettre dans le has du css

**le_chomeur** · 24/04/2008, 16h08

pourquoi ne pas simplement déclaré un listStyleType et attribué sa valeur comme les autres propriété css ?
sur le ul

**SpaceFrog** · 24/04/2008, 16h14

ben j'ai essayé mais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

'ListTypeColor':'red'

dans le hash css ne fonctionne pas

il faut que je retourne dormir ^^

listStyleColor n'existe pas

mais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
     var Li1=$C({'obj':'li','css':{'color':'blue','backgroundColor':'yellow','listStyleType':'square'},'innerHTML':'une première ligne'});

ou encore:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var DIV=$C({'obj':'div','css':{'backgroundColor':'red','padding':'5px','width':'300px'}})
var UL= $C({'obj':'ul','css':{'listStyleType':'decimal','font-family':'verdana','FontColor':'white','listStylePosition':'inside'}});
     var Li1=$C({'obj':'li','css':{'color':'blue','backgroundColor':'yellow'},'innerHTML':'une première ligne'});
     var Li2=$C({'obj':'li','css':{'color':'white','backgroundColor':'black'},'innerHTML':'une autre première ligne'});
     var Li1=$C({'obj':'li','css':{'color':'yellow','backgroundColor':'green'},'innerHTML':'une première d\'avant'});
$Close(UL);
$Close(DIV);

**le_chomeur** · 24/04/2008, 16h32

lool j'me disais aussi !

**SpaceFrog** · 24/04/2008, 17h36

mal aux yeux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var colors =new Array('red','blue','green','yellow','black','white','salmon','silver','gray','navy');
var Divs=new Array();
for(i=0;i<50;i++){
	Divs.push( $C({'obj':'div','css':{'backgroundColor':colors[i%10],'padding':'10px','width':'100%','height':'auto','position':'relative','lineHeight':'0px'},'innerHTML':'&nbsp;'}) )
	}
for(i=0;Divs[0];i++){ $Close(Divs.pop()) }

**SpaceFrog** · 24/04/2008, 17h55

un truc qui m'échappe ??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var colors =new Array('red','blue','green','yellow','black','white','salmon','silver','gray','navy');
var Divs=new Array();
for(i=0;i<500;i++){
	Divs.push( new $C({'obj':'div','css':{'border':((i%2==0)?'dashed':'dotted')+' 2px '+ colors[i%10],'padding':'3px','width':'100%','height': '300px','position':'relative','lineHeight':'0px'},'innerHTML':'&nbsp;'}) )
	}
 
for(i=0;Divs[0];i++){ new $Close(Divs.pop()) }

il n'a pas l'air de créer les 500 ???
pourtant Divs.length= 500

**SpaceFrog** · 24/04/2008, 18h43

Attention bemol trouvé pour la création de checkboxes et de radios du fait de l'impossibilité de leur attribuer un name en runtime ???

**SpaceFrog** · 24/04/2008, 19h01

Temporairement un pansement pour IE...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  Radios.push ( new  $C({'obj':'<input name="Rad_">', 'type':'radio','value':'radio_'+i,'id':'Rad_'+i}) )
     Labels.push(new  $C({'obj':'<label for="Rad_'+i+'">','innerHTML':'Label '+i, }))

**SpaceFrog** · 24/04/2008, 22h32

librairie mise à jour pour IE (malgré des attribut en doublon

)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script type='text/javascript'>
Flux=new Array();
Array.prototype.ArrayPos=function(quoi){									var Position=-1;
		for (i=0;this[i];i++){ if (quoi==this[i]){Position=i;}
		}
		return Position;
	}
 
$Close=function(Closing){
       var FluxPos=Flux.ArrayPos(Closing)
       var FluxLength=Flux.length;
       var SpliceLength=FluxLength-FluxPos+1;
       var AppendLot=Flux.splice(FluxPos+1,SpliceLength);
 
       for(l=0;AppendLot[0];l++){
       	             Closing.appendChild(AppendLot.shift())
       	         		}
       if(Flux.length==1){document.body.appendChild(Flux.pop())}
       }
 
 
var $C= function (HasH){
	var Elt=''
	switch(HasH['type']){
			case('radio' ): Elt=(document.all)?'<input name="'+HasH['name']+'">':HasH['obj'];
							  break;
			default:		  Elt=HasH['obj'];
			}
	if(HasH['obj']=='label'){Elt=(document.all)?'<label for="'+HasH['for']+'">':HasH['obj'];}
 
 
	var Obj=document.createElement(Elt);
	for (elt in HasH){
		if (elt != 'obj'){
			if(elt=='css'){   for(Styl in HasH['css']){Obj.style[Styl]=HasH['css'][Styl];}
		              	}
 
			else{
			    Obj[elt]=HasH[elt];
			    alert(elt+ "=>"+ HasH[elt])
				}	
		}
 	}
 Flux.push(Obj);	
 return Obj; 
 }

Je continue pour FFX le label ne semble pas accepter le for

**SpaceFrog** · 25/04/2008, 11h18

Cette fois ça y'est.
J'ai adapté pour ffx et IE
et découvert que les attributs tout comme le css devaient être rédigés sous leur forme javascript:
exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for => htmlFor

J'ai remplacé le code dans le tout premier post

Avant d'effacer tout ici je vous laisse tester ...

**polothentik** · 25/04/2008, 12h35

Dis moi SpaceFrog, tu pourrais nous donner un exemple de syntaxe d'un label avec ton nouveau code !! stp

Et ou peut-on trouver les équivalent javascript des attributs html

Si jamais, en relisant ton code, il ya une erreur dans le 'case checkbox' sur secial -> special

Un truc que je pige pas... tu dis qu'il faut mettre les attribut HTML en javascript et dans ton IF tu places '<label for="' et pas htmlFor. Si je comprend bien, tu regle le probleme du htmlFor par ce IF en te servant de l'intitulé for dans la déclaration de ton objet comme d'un marqueur pour aller chercher la valeur de for

**SpaceFrog** · 25/04/2008, 13h16

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<script type='text/javascript'>
var Flux=new Array();
var isIE =(document.all)?true:false;
Array.prototype.ArrayPos=function(quoi){
		var Position=-1;
		for (i=0;this[i];i++){ if (quoi==this[i]){Position=i;}
								}
		return Position;
	}
 
$Close=function(Closing){
       var FluxPos=Flux.ArrayPos(Closing)
       var FluxLength=Flux.length;
       var SpliceLength=FluxLength-FluxPos+1;
       var AppendLot=Flux.splice(FluxPos+1,SpliceLength);
 
       for(l=0;AppendLot[0];l++){
       	             Closing.appendChild(AppendLot.shift())
       	         		}
       if(Flux.length==1){document.body.appendChild(Flux.pop())}
       					}
 
 
var $C= function (HasH){
	var Elt='';
	var Special=false;
 
	switch(HasH['type']){
			case('radio' ): Elt=(isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
							  Special=(isIE)?true:false;	
							  break;
			case('checkbox' ): Elt=(isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
							  Special=(isIE)?true:false;	
							  break;
 
 
			default:		  Elt=HasH['obj'];
							  Special=(isIE)?true:false;
			}
 
	if(HasH['obj']=='label'){Elt=(isIE)?'<label for="'+HasH['for']+'">':HasH['obj'];
	                         Special=(isIE)?true:false;
	                         }
   if(HasH['obj']=='select'){Elt=(isIE)?'<select name="'+HasH['name']+'">':HasH['obj'];
	                         Special=(isIE)?true:false;
	                         }
 
	var Obj=document.createElement(Elt);
	for (elt in HasH){
		if (elt != 'obj'){
				if(elt=='css'){   for(Styl in HasH['css']){Obj.style[Styl]=HasH['css'][Styl];}
			              	}
 
				else{ 
			   			if(isIE){ if(!Special || (elt!='name' && elt!='for')){
			   										        					 Obj[elt]=HasH[elt];
				 			 			}
				 			 }			
				 	else{ Obj[elt]=HasH[elt];
							}	 	
 
				}	
		}
 	}
 Flux.push(Obj);	
 return Obj; 
 }

Merci pour le Special :red: curieux que ça n'ai pas entrainé de problème .. ???

pour ce qui est de l'objet createElement c'est justement pour l'attribution du nmae des checkBox et radios:
Sous IE on ne peut pas en run time attribuer le name à l'objet obj.name est refusé !
le suel moyen de mettre un name sur un checkbox ou un radio est losr du create element
document.createElement("<input name='lkjlk' >") mais cette syntaxe n'est pas valable sous FFX ...

Pour ce qui est des attributs javascript ...
il n'y en a que très peu qui varient

en règle générale pour toutes les propriétés css:
il suffit de prendre la propriété css et si elle contient un trait d'union on le vire et le caractère suivant prend une majuscule :

css : border-bottom => javascript : borderBottom
css : list-style-type => javascript : listStyleType

attention:
css : float-left => javascript : cssFloat
(il y en apeut être d'autres pmais pas beaucoup

pour les attributs de balises, je n'ai rencontre que le for = > hmltFor

**SpaceFrog** · 25/04/2008, 15h03

Petit souci avec les select multiples ...
La version mise à jour corrige le bug du name pour le select qui n'etait pas pris en compte..

Il me reste cependant un souci avec le multiple du select ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
    var myselect=  $C({'obj':'select','name':'myselect','multiple':1}) ;
        $C({'obj':'option', 'value':'1','innerHTML':'option 1'}) ;
        $C({'obj':'option', 'value':'2','innerHTML':'option 2'}) ;
    $Close(myselect);

Pourtant testé sous IE et FFX :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<select name='coucou' id='foo'>
<option>dfqdfs</option>
<option>dfqdfs</option>
<option>dfqdfs</option>
<option>dfqdfs</option>
<option>dfqdfs</option>
<option>dfqdfs</option>
<option>dfqdfs</option>
<option>dfqdfs</option>
<option>dfqdfs</option>
</select>
<input type='button' onclick="document.getElementById('foo').multiple=1" value='go' />
</body>