Problème avec un array de div et l'attribut className

Signaler
Messages postés
3
Date d'inscription
jeudi 20 juillet 2006
Statut
Membre
Dernière intervention
7 octobre 2008
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour à tous,

Je suis en train de développer un objet Multiview tout en javascript et je bute sur un problème qui je pense est lié à IE7. Le principe est simple: il faut créer un div conteneur (exemple: "mv") et des divs (autant qu'il y a d'onglets) avec des id qui pour l'exemple seraient "mv1", "mv2", "mv3" (si il y a 3 onglets). Au passage si j'ai fait ainsi c'est pour permettre à l'utilisateur de la classe de remplir ses divs à sa guise et de les convertir en multiview avec mon code JS. A l'instanciation de la classe on passe l'id du div principal (ainsi que d'autres paramètres tels que les dimensions) et la tartine de javascript fait son boulot. J'ai cependant un petit soucis (que j'ai détourné mais ca fait pas très propre d'ou mon message). Je stocke mes objets div dans un array (ils sont donc passés en référence) et lorsque je veux modifier la class CSS,

this.divs[this.oldTab].className='tab_display_none';

, il ne modifie pas la classe css ou du moins il ne l'applique pas...
Mon array est correctement rempli et mon indice currentTab est bon.

Par contre ca opère bien avec

$(this.divId + this.oldTab).className = 'tab_display_none';

à savoir que j'effectue la même opération (à peu de chose près) avec un array d'élements 'td' (qui stocke les onglets) et que le même traitement fonctionne.

Voila merci d'avance pour vos réponses

3 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
que contient vraiment this.divs[this.oldTab] un ID ou une référence à
l'objet...
;O)
Messages postés
3
Date d'inscription
jeudi 20 juillet 2006
Statut
Membre
Dernière intervention
7 octobre 2008

Bonsoir et merci pour ta réponse rapide.

this.divs[this.oldTab - 1] contient bien une référence à mon objet, mais la MAJ de l'attribut 'className' ne s'effectue pas...

Voici la classe JS
var

Multiview = Class.create();
Multiview.prototype = {
   initialize:

function(divId, width, height, headersSize){

      this.divId = divId;

      this.width = width;

      this.height = height;

      this.headersSize = headersSize;

      this.currentTab = 0;

      this.totaltabs = 0;

      this.oldTab = 0;

      this.divs =
new Array();

      this.tabs =
null;

      this.container =
this.getContainer();

      this.fullHTML =
'';
   },   create:

function(){
      this.container.style.height = this.height + \"px\";
      this.container.style.width = this.width + \"px\";
      this.divs = this.getControls();
      this.tabs = this.buildTabs();
   },   getControls:

function(){
      var i = 1;
      var divsArray = new Array();
      while ($(this.divId + i))
      {
         var div = $(this.divId + i);
         div.className = \"empty_space\";
         divsArray.push(div);
         i = i + 1;
      }
      return divsArray;
   },   getContainer:

function(){
      return ($(this.divId));
   },   addTab:

function(text,visible){
      this.totaltabs += 1;      var style (visible false ? ' style=\"display:none;' : ' style=\"display:block;');
      style += ' height:30px;\"'; 
      this.fullHTML += ' + this.totaltabs + '"' +    style + '" onclick="mView.changeTab(' + this.totaltabs + ');">' + text + ', ';
   },

   buildTabs: function()
   {
      var headers = new Array();
      this.fullHTML += "
";

      this.container.innerHTML =
this.fullHTML + 
this.container.innerHTML;

      for (
var i = 1; i<=
this.divs.length; i++)
      {

         var td = $(
'header' + i);
         td.className=
"tab_unselected";
         headers.push(td);
      }

      return headers;
   },
   changeTab:

function(newTabId)
   {

      this.oldTab =
this.currentTab;

      this.currentTab = newTabId;

      if (
this.oldTab != 0){

         this.tabs[
this.oldTab - 1].className =
'tab_unselected';
      }

      this.tabs[
this.currentTab - 1].className =
'tab_selected';

      if (
this.oldTab != 0){

         this.divs[
this.oldTab - 1].className =
'empty_space';
         //$(this.divId + (this.oldTab)).className ='empty_space';
      }
      //$(this.divId + (this.currentTab)).className ='content_div'; 
      this.divs[
this.currentTab - 1].className =
'content_div';
   }
};
et le code HTML correspondant:

<

div
class="ConteneurPrincipal">
   <div
id="mv">
      <div
id="mv1"
align="left">général
</div>
      <div
id="mv2"
align="left">type
</div>
      <div
id="mv3"
align="left">annonce
</div>
      <div
id="mv4"
align="left">Structure
</div>
      <div
id="mv5"
align="left">validation
</div>
   </div>
</div>
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
difficile de faire tourner le code sans
le reconstruire complétement, pas fait,...
de visu rapide, n'y aurait-il pas un problème d'index ?

this.divs[this.oldTab - 1].className = 'empty_space';   // marche pas !
$(this.divId + ( this.oldTab )).className ='empty_space'; // marche !



...avec une page de démo en ligne peut être...



;O)