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>Como agregar mas paneles:
<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>
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
No hay comentarios:
Publicar un comentario