以编程方式将新的 Dojo AccordionPane 添加到现有 AccordionContainer

本文介绍了以编程方式将新的 Dojo AccordionPane 添加到现有 AccordionContainer的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将新的 AccordionPane 添加到现有容器中，但在我的一生中，我无法让它工作.

有人能指出我哪里出错了吗?

解决方案

正如原发帖人所说，添加新的 AccordionPane 到 AccordionContainer 的 TOP，使用 0 作为 insertIndex.如果您更愿意将新的 AccordionPanel 添加到 AccordionContainer 的BOTTOM，只需从 .addChild 中删除 insertIndex，如下所示:

 函数测试() {var 手风琴 = dijit.byId("myacc");var d = new dijit.layout.AccordionPane({id:'newpane', title:'hello', content: 'testing'});手风琴.addChild(d);手风琴.selectChild(dijit.byId('newpane'));}

另外，在我的例子中，我想向 AccordionContainer 添加一个新的 AccordionPane，内容是从同一服务器上的另一个页面加载的.以下代码供以后发现此问题的任何人使用:

 函数测试() {var 手风琴 = dijit.byId("myacc");var d = new dijit.layout.AccordionPane({id:'newpane', title:'hello', href: "location/of/page.php", preload: true});手风琴.addChild(d);手风琴.selectChild(dijit.byId('newpane'));}

此外，如果您想在选择子项时启用动画，请将 true 添加到 animate 属性:

 手风琴.selectChild(dijit.byId('newpane'), true);

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>

解决方案

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'));
        }

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'));
        }

Also, if you want to enable animation when selecting the child, add true to the animate property:

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

这篇关于以编程方式将新的 Dojo AccordionPane 添加到现有 AccordionContainer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！