Sujet Précédent Sujet Suivant

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

Noursounet Messages postés 3 Date d'inscription jeudi 20 juillet 2006 Statut Membre Dernière intervention 7 octobre 2008 - 7 oct. 2008 à 17:20
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 8 oct. 2008 à 05:16
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

Réponse 1 / 3
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
7 oct. 2008 à 18:15
Bonjour,
que contient vraiment this.divs[this.oldTab] un ID ou une référence à
l'objet...
;O)
0
Réponse 2 / 3
Noursounet Messages postés 3 Date d'inscription jeudi 20 juillet 2006 Statut Membre Dernière intervention 7 octobre 2008
7 oct. 2008 à 20:26
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>
0
Réponse 3 / 3
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
8 oct. 2008 à 05:16
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)
0

Discussions similaires

la division en java
cs_aliomar -
KIRAIII -

3 réponses
coller deux div avec du css
leon237 -
jordane45 -

2 réponses
[Division] récupérer la partie entière d'une division avec un arrondi supérieur
Frouf85 -
Frouf85 -

8 réponses
Problème avec la division des long
ammouna24 -
ammouna24 -

4 réponses
Récupérer toutes les class d'un élément
cs_flexx -
flexx -

2 réponses
Rejoignez-nous