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