2010-08-25 13 views
2

J'essaie d'ajouter un nouvel AccordionPane à un conteneur existant, mais pour la vie de moi, je ne peux pas le faire fonctionner.Ajouter un nouveau AccordéonPanier Dojo à AccordionContainer existant

Quelqu'un peut-il suggérer où je me trompe?

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djConfig="parseOnLoad: true"> </script> 

     <script type="text/javascript"> 
      dojo.require("dijit.layout.ContentPane"); 
      dojo.require("dijit.layout.AccordionContainer"); 
     </script> 

     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dijit/themes/tundra/tundra.css"> 

     <script type="text/javascript"> 
      function AddNewPane() { 
       var accordPane = new dijit.layout.AccordionPane({"title": "test", "content":"hello"}); 
       dijit.layout.AccordionContainer("myacc").addChild(accordPane); 
       accordPane.startup(); 
       //select the new Pane 
       accordPane.selected = true; 
      }  
     </script> 

    </head> 

    <body> 
     <button type="button" onclick="AddNewPane();" >Add</button> 

     <div dojoType="dijit.layout.AccordionContainer" id="myacc" class="tundra" > 
      <div dojoType="dijit.layout.AccordionPane" title="Origional Acc 1" > 
       Testing One 
      </div> 
       <div dojoType="dijit.layout.AccordionPane" title="Origional Acc 2" > 
       Testing Two 
      </div> 
     </div> 

     <script> 
      document.getElementById("myacc").style.width = '200px'; 
      document.getElementById("myacc").style.height = '200px'; 
     </script> 
</body> 
</html> 

Répondre

2

Vous avez travaillé, merci.

 function Testing() { 
      var accordion = dijit.byId("myacc"); 
      var d = new dijit.layout.AccordionPane({id:'newpane', title:'hello', content: 'testing'}); 
      accordion.addChild(d, 0); 
      dijit.byId('myacc').selectChild(dijit.byId('newpane')); 
     } 
2

Comme le original poster said, pour ajouter la nouvelle AccordionPane au TOP du AccordionContainer, utilisez 0 pour le InsertIndex. Si vous préférez ajouter les nouveaux AccordionPanel au BAS du AccordionContainer, supprimez le InsertIndex du .addChild comme on le voit ci-dessous:

 function Testing() { 
      var accordion = dijit.byId("myacc"); 
      var d = new dijit.layout.AccordionPane({id:'newpane', title:'hello', content: 'testing'}); 
      accordion.addChild(d); 
      accordion.selectChild(dijit.byId('newpane')); 
     } 

Aussi, dans mon cas je voulais ajouter un nouvel AccordionPane à AccordionContainer avec du contenu chargé à partir d'une autre page sur le même serveur. Code ci-dessous pour toute personne qui trouve à l'avenir vouloir faire la même chose:

 function Testing() { 
      var accordion = dijit.byId("myacc"); 
      var d = new dijit.layout.AccordionPane({id:'newpane', title:'hello', href: "location/of/page.php", preload: true}); 
      accordion.addChild(d); 
      accordion.selectChild(dijit.byId('newpane')); 
     } 

Aussi, si vous voulez activer l'animation lors de la sélection de l'enfant, ajouter vrai à la Animer propriété:

  accordion.selectChild(dijit.byId('newpane'), true);