Discussion :

[SpaceFrog]

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]

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]

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]

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

merci spaffy !

[SpaceFrog]

faut juste que je trouve la syntaxe pour les listStyleType
un sous sous Hash ???

[le_chomeur]

listStyleType ??
la propriété css ?

[SpaceFrog]

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]

lool j'me disais aussi !

[SpaceFrog]

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]

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]

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]

Attention
readonly doit s'ecrire readOnly selon la syntaxe javascript

[SpaceFrog]

Petit oubli rectifié ...
et non des moindre en ce qui concerne la balise form, elle ne semble par déroger au name en lecture seule et du coup PHP ne récupèrait pas bien les varaible en post ou get ...

d'où la joute de ce test :

Code :

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

1
2
3
4
 
   if(HasH['obj']=='form'){Elt=(isIE)?('<form name="'+HasH['name']+' >'):HasH['obj'];
	                         Special=(isIE)?true:false;
	                         }

Attention il se peut que d'autres objets posent le même genre de souci ... si vous les croisez, merci de me les signaler

[SpaceFrog]

Et hop
input type filed tripped on name detector !

Code :

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

1
2
3
case('file' ): Elt=(isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
							  Special=(isIE)?true:false;	
							  break;

modifié dans la source initiale

[SpaceFrog]

Du nouveau avec IE8 ...
Il semblerait que IE8 accepte désormais l'attribution du name dynamiquement...
JE n'ai pas testé mais c'est eut être du au mode de compatibilité ..
Il faut donc rajouter un sniffer pour détecter la version 8 de IE et la sortir du isIE...

[Invité]

Genial cet outil...

Et en me délectant a te lire, et a lire les interventions , je me disais avant de te remercier:

Qu'est-ce que cela aurait été géant si tu avais enfin donné le deuxiémement

Deux règles du succès:
1) Ne communiquez jamais à quelqu'un tout votre savoir...

....

[okoweb]

Ce code est-il encore d'actualité? Avec les innerHTML méthode propriétaire. Pourquoi pas de appendChild?

Est-ce on peut avoir un exemple de création d'un formulaire simple?

Merci d'avance...