26 de marzo de 2013

Panel Acordion en Dojo


Ejemplo de Paneles colapasables en forma de acordion en dojo. (Accordion Pane with 2 or more open panels at the same time).



Dojo posee un componente que lo hace (ver aqui) , pero tiene un problema solo permite tener un panel abierto a la vez, mientras hay pantallas que necesitamos con multiples paneles abiertos.

El ejemplo usa dos componentes el TitlePane, para poner un titulo y el ContentPane para poner el contenido.

Ejemplo:

 <!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="dojo-release-1.8.3/dijit/themes/claro/claro.css">
<title>Ejemplo: AccordionContainer</title>
</head>
<body class="claro">
<script src="dojo-release-1.8.3/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<p>Ejemplo Panel Colabasable (AccordionContainer)</p>
<div id="contenido_1">Contenido 1</div>
<div id="contenido_2">Contenido 2</div>
<div id="contenido_3">Contenido 3</div>

<script>
require(["dojo/ready", "dijit/layout/ContentPane","dijit/TitlePane", "dojo/dom"], function(ready, ContentPane, TitlePane, dom){
ready(function(){

var tc = dom.byId("ac_1");

var tp_1 = new TitlePane( {title:"Titulo 1",
style:"width:100%; max-height:450px;",
open:true
});

var cp_1 = new ContentPane({
style:"width:99%; max-height:400px;overflow: auto"
}).placeAt(tp_1.containerNode);

cp_1.startup();
cp_1.setContent(dom.byId("contenido_1"));
tp_1.startup();

var tp_2 = new TitlePane( {title:"Titulo 2",
style:"width:100%; max-height:450px;",
open:false
});

var cp_2 = new ContentPane({
style:"width:99%; max-height:400px;overflow: auto"
}).placeAt(tp_2.containerNode);

cp_2.startup();
cp_2.setContent(dom.byId("contenido_2"));
tp_2.startup();

var tp_3 = new TitlePane( {title:"Titulo 3",
style:"width:100%; max-height:450px;",
open:false
});

var cp_3 = new ContentPane({
style:"width:99%; max-height:400px;overflow: auto"
}).placeAt(tp_3.containerNode);

cp_3.startup();
cp_3.setContent(dom.byId("contenido_3"));
tp_3.startup();


//Adicionar mas paneles aqui
tc.appendChild(tp_1.domNode);
tc.appendChild(tp_2.domNode);
tc.appendChild(tp_3.domNode);

});

});
</script>

<div id="ac_1"></div>

</body>
</html>
Como agregar mas paneles:

var tp_4 = new TitlePane( {title:"Titulo 4",
          style:"width:100%; max-height:450px;",
          open:true
           });
                    
 var cp_4 = new ContentPane({
          style:"width:99%; max-height:400px;overflow: auto"
         }).placeAt(tp_4.containerNode);
                    
  cp_4.startup();

 // Aqui se adiciona el contenido al panel
  cp_4.setContent(dom.byId("contenido_1"));
  tp_4startup(); 


 Y se agrega la ultima linea:

 tc.appendChild(tp_4.domNode);

 El ejemplo funciona apartir de Dojo 1.7

Referencias:

Dojo en Wikipedia
Dojo