Discussion :

[sekaijin]

salut à tous
dans l'article : http://www.developpez.net/forums/showthread.php?t=85603
j'abordais le traitement automatisé des formulaires.

reprenant la base de cette aproche j'en suis venu à développer de plus en plus en m'apputant sur le DOM et prenant pour principe d'ajouter les attributs les membres et les méthodes qui me son nécessaire directement sur les objets du DOM

le mieux est de prendre un exemple. il existe de nombreuse façon de faire une navigation par onglet dans une page.

j'ai choisis d'utiliser des DIV et une liste UL LI

le plus simple est de'embarquer dans la page les DIV et la liste
d'écrire les fonctions activateTab
et de l'associer à l'évènement onclick du LI concerné
pour que cela fonctionne il faut lui donner l'id du LI et du DIV à activer mais aussi trouver un moyen de désactiver celui qui est déjà actif.

on peut trouver facilement un moyen pour ne passer que l'id du LI (avec des valeurs de id du LI et DIV qui fait la relation) mais pour désactiver l'onglet actif il nous faut plus
soit il faut parcourir tous les onglets, il faut donc pouvoir les retrouver
soit il faut connaitre l'onglet actif.

dans les deux cas il nous faut une variable globale
rien de bien compliqué et ça marche bien.

si on veux plusieurs système d'onglet il faut se la jouer encore plus sioux pour faire la différence.

maintenant pour faire la même chose en enrichissant les objets DOM directement.

voici ce qu'il devient possible de faire.

Code :

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

1
2
3
4
5
6
7
8
9
10
<div id="myTabGroup">
   <div id="tab1">contenu du tab 1</div>
   <div id="tab2">contenu du tab 2</div>
   <div id="tab3">contenu du tab 3</div>
   <div id="tab4">contenu du tab 4</div>
   <div id="tab5">contenu du tab 5</div>
   <div id="tab6">contenu du tab 6</div>
   <div id="tab7">contenu du tab 7</div>
   <div id="tab8">contenu du tab 8</div>
</div>

on ecrit une fonction init qui s'applique au DIV myTabGroup
elle commence par insérer un ul dans l'entête.
pour chaque fils DIV elle ajoute un LI dans le UL et lui ajoute la methode
onclick

Code :

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

1
2
3
4
5
6
7
8
9
 
var li = document.createElement('li');
li.setAttribute('class','TabOff');
li.contentDiv = curentdiv; //le div que l'on est en train de traiter
li.contentDiv.style.display = 'none';
li.onclick = function(){
  this.setAttribute('class','TabOn');
  this.contentDiv.style.display = 'block';
}

reste le moyen de desactiver l'onglet courant.
pour cela le groupe d'onglet doit le connaitre
dans la phase d'initialisation lorsqu'on crée le premier LI il suffit d'ajouter

Code :

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

1
2
3
ul.curentTab = li; //le li que l'on vient de créer
li.setAttribute('class','TabOn'); // on active le li au passage
li.contentDiv.style.display = 'block';

et de modifier la création du li pour avoir un moyen de le désactiver

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var li = document.createElement('li');
li.setAttribute('class','TabOff');
li.contentDiv = curentdiv; //le div que l'on est en train de traiter
li.contentDiv.style.display = 'none';
li.onclick = function(){
  this.parentNode.curentTab.unactivate(); //on desactive le tab courent 
  this.parentNode.curentTab = this; //on devient le courent.
  this.setAttribute('class','TabOn');
  this.contentDiv.style.display = 'block';
}
li.unactivate = function() {
  this.setAttribute('class','TabOff');
  this.contentDiv.style.display = 'none';
}

reste à définir les classes css qui affiche tout ça sous forme d'onglet
(il y a beaucoup d'exemple sur le net)

et on a un système d'onglet fonctionnel qui s'écrit en déclarant des div on peut en avoir autant que l'on veut dans la page et même les imbriquer car les methode et les donnés sont attaché aux objets concernés.

Je posterais ici plus tard cet exemple complet.

mais mon but aujourd'hui est putôt de présenter le principe.
mon approche est donc de remplacer les fonction et variable globale par des methodes et des membres des objets.

le code devient court car les objets ce connaissent eux-même. il n'est plus necessaire de les retrouver

Code :

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

1
2
<input id="achamps" name="monchamps" type="text"
       onchange="mafonction('achamps')">

avec la fonction

Code :

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

1
2
3
4
function mafonction(id) {
  theField = document.getElementById(id); // ou tout autre moyen
  if (parseInt(theField.value))  theField.style.backgroundColor='green';
}

devient

Code :

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

1
2
3
<input name="monchamps" type="text"
       onchange="if (parseInt(this.value))
                          this.style.backgroundColor='green';">

avec ce principe à déjà été développe les formulaire autovalidé, le système d'onglet des div auto encadré (rounbbox) un glossaire automatique, un tableu avec survol coloration alterné et ascenseur automatique ect.

il en ressort que le système est rapide simple crossbrowser et évolutif.
j'ai une petites dizaine de composants dans un script qu'il suffit de lier à la page pour transformer les élément désignés à la volé.
le script chargé et exécuté ne déclare aucune variable globale aucune fonction globale.
il n'y a donc aucou risque de conflit avec les script qu'on pourait embarquer

A+JYT

[Taum]

Salut,

Ca a l'air interessant, mais je pense qu'une petite page de démo ne serait pas de trop pour voir un peu mieux le fonctionnement de ton système

[sekaijin]

voici donc un exemple je ne peux le tester maintenant sur tout les navigateurs en ma possession mais il fonctionne sous IE 6 windows (MSIE), omniWeb 5.1 (KHTML), FF 1.5.1 MS et Mac (GEKO), safari 1.0.3 (KHTML)


la feuille de style n'est pas au point mais pour démonter le principe ça reste fonctionnel
je laisse au pro du ccs le loisir de faire une belle page pour cet exemple.

Pour que cela fonction li faut au moin un navigateur qui suporte le DOM

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
   <head>
      <title>DOM Tabs</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <style type="text/css">
      <!--
      ul.tab {
      	width: 90%; 
      	float: left;
      	margin: 0px;
      	line-height: normal;
      	list-style-type: none;
      }
      ul.tab li {
         padding: 3px;
         text-decoration: none;
         float: left;
         margin: 0px;
         background-color: #e0e0e0;
         border: #a0a0a0 1px solid;
         border-bottom: 0;
      }
       ul.tab li.current {
       	background-color: #FF8C00;
       	border: 1px solid #FF4500;
       	border-bottom: 0;
       }
      div.tab {
      	width: 90%; 
      	height: 300px; 
        border: #a0a0a0 1px solid;
        padding: 3px;
        clear: both;
      }
      -->
      </style>
      <script type="text/javascript">
         document.initTabs = function (div) {
            var tabgroup = document.getElementById(div);
            var ul = document.createElement('ul');
            ul.className= 'tab';
            tabgroup.insertBefore(ul, tabgroup.firstChild);
 
            ul.createTab = function (div) { //creation d'un onglet
               var li = document.createElement('li');
               var label = document.createTextNode(div.id);
               li.appendChild(label);
               li.contentDiv = div;
               li.contentDiv.className = 'tab';
               li.contentDiv.style.display = 'none';
               this.appendChild(li);
               li.onclick = function () {
                  this.parentNode.currentTab.className = null;
                  this.parentNode.currentTab.contentDiv.style.display = 'none';
                  this.className = 'current';
                  this.contentDiv.style.display = 'block';
                  this.parentNode.currentTab=this;
                  return false
               } // fin de onclick
               if (!this.currentTab) { //on fixe le premier onglet actif
                  li.className = 'current';
                  li.contentDiv.style.display = 'block';
                  this.currentTab=li;
               }
            }
 
            for (var i=0; i<tabgroup.childNodes.length; i++) { //transforme tout les div fils en onglet
               if ((tabgroup.childNodes[i].nodeType == 1)&&
                   (tabgroup.childNodes[i].tagName.toLowerCase() == 'div')) {
                  ul.createTab(tabgroup.childNodes[i]);
               }
            }
         }
      </script>
   </head>
   <body onLoad="document.initTabs('tabgroup1');document.initTabs('tabgroup2');document.initTabs('News');">
      <div id="tabgroup1">
         <div id="Home">
          my home page
         </div>
         <div id="Products">
          Liste des produits
         </div>
         <div id="Services">
          &agrave; vot&apos; service m&apos;sieur
         </div>
         <div id="Support">
          D&eacute;sol&eacute; le support prend un caf&eacute;
         </div>
         <div id="Order">
          Vous pouvez me verser le somme de votre choix pourvu qu&apos;elle commence par un 1 avec beaucoup de 0.
         </div>
         <div id="News">
            <div id="tabs" style="height: 150px;">
             Cet exemple montre un contenu qui est lui même un groupe d&apos;onglets
            </div>
            <div id="News1" style="height: 150px;">
             rien de neuf sous le soleil
            </div>
            <div id="News2" style="height: 150px;">
             sous la pluie non plus
            </div>
         </div>
         <div id="About">
            Cet exemple montre un contenu qui contient un groupe d&apos;onglets
            <br />
            <div id="tabgroup2">
               <div id="About Home" style="height: 150px;">
                my home page
               </div>
               <div id="About Products" style="height: 150px;">
                Liste des produits
               </div>
               <div id="About Services" style="height: 150px;">
                &agrave; vot&apos; service m&apos;sieur
               </div>
            </div>
         </div>
      </div>
      <div id="orphelin" class="tab" style="display: none;">un div attaché dynamiquement</div>
      <button onClick="document.getElementById('tabgroup1').firstChild.createTab(document.getElementById('orphelin'));this.style.display = 'none'">ajouter orphelin</button>
   </body>
</html>

notez le code du onClick qui fait en 5 affectations le rest edu code n'étant exécuté qu'a l'initilisation.

A+JYT

[sekaijin]

j'ai mis l'exmple en ligne
http://jeanyves.terrien.free.fr/DomTabs.html

[Auteur]

à déplacer dans le forum contribution ?

Il est excellent ton script !

[sekaijin]

je prépare un article sur le sujet
pas des tabs mais de la méthode