以编程方式向现有AccordionContainer添加新的Dojo AccordionPane [英] Programmatically Add a new Dojo AccordionPane to Existing AccordionContainer
问题描述
我正在尝试在现有的容器中添加新的AccordionPane，但对于我来说，我无法让它工作。
I am trying to add a new AccordionPane to a existing container, but for the life of me I can't get it to work.
有人能够建议我出错的地方吗？
Is anyone able to suggest where I am going wrong?
<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>
推荐答案
由于原创海报表示，为AccordionContainer的 TOP 添加新的AccordionPane，将 insertIndex 。
如果您希望将新的AccordionPanel添加到AccordionContainer的 BOTTOM ，只需从.addChild中删除 insertIndex ，如下所示：
As the original poster said, to add the new AccordionPane to the TOP of the AccordionContainer, use 0 for the insertIndex. If you'd rather add the new AccordionPanel to the BOTTOM of the AccordionContainer, just remove the insertIndex from the .addChild as seen below:
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'));
}
此外，在我的情况下，我想要添加一个新的AccordionPane到AccordionContainer内容从同一台服务器上的另一个页面加载。以下代码可供将来想找到相同的人：
Also, in my case I was wanting to add a new AccordionPane to the AccordionContainer with content loaded from another page on the same server. Code below for anyone who finds this in the future wanting to do the same:
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'));
}
另外，如果要在选择孩子时启用动画，请添加 true 到动画属性：
Also, if you want to enable animation when selecting the child, add true to the animate property:
accordion.selectChild(dijit.byId('newpane'), true);
这篇关于以编程方式向现有AccordionContainer添加新的Dojo AccordionPane的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
