Программно добавить новую Dojo AccordionPane в существующий AccordionContainer - PullRequest
Новая
       44

Программно добавить новую Dojo AccordionPane в существующий AccordionContainer

2 голосов
/ 25 августа 2010

Я пытаюсь добавить новый AccordionPane к существующему контейнеру, но я не могу заставить его работать.

Кто-нибудь может подсказать, где я ошибаюсь? 

<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>

Ответы [ 2 ]

2 голосов
/ 15 декабря 2011

Как исходный плакат сказал , чтобы добавить новую AccordionPane к TOP AccordionContainer, используйте 0 для insertIndex .Если вы хотите добавить новую AccordionPanel к BOTTOM AccordionContainer, просто удалите insertIndex из .addChild, как показано ниже: 

        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 с содержимым, загруженным с другой страницы на том же сервере.Приведенный ниже код для тех, кто найдет это в будущем и хочет сделать то же самое: 

        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 к animate свойство: 

            accordion.selectChild(dijit.byId('newpane'), true);
2 голосов
/ 25 августа 2010

Получилось, спасибо. 

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