[POO & DOM] programation js par enrichissement des éléments du DOM
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:
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:
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:
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:
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:
1
2
| <input id="achamps" name="monchamps" type="text"
onchange="mafonction('achamps')"> |
avec la fonction
Code:
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:
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
