自定义Dojo Accordion Container小部件,可选择不展开ContentPane

时间:2012-04-27 17:10:18

标签: javascript html dojo

我正在尝试创建一个自定义的dojo小部件,以阻止对内容窗格的“转换”。我正在尝试将窗格链接到另一个页面而不是滑动。

我会使用属性doExpand =“false”示例指定此选项:

<div id="menu">

<div dojoType="AccordionMenu" doLayout="true" class="tundra" style="height: 300px">

<div dojoType="AccordionPane" doExpand="false" title="<p>Home</p>"></div>

<div dojoType="AccordionPane" selected="true" title="<p>Tasks 1</p>">
<ul class="nav">
     <li><a href="#">Task 1</a></li>
     <li><a href="#">Task 2</a></li>
     <li><a href="#">Task 3</a></li>
</ul>                    
</div>

<div dojoType="AccordionPane"  title="<p>Tasks 2</p>">
<ul class="nav">
     <li><a href="#">Task 1</a></li>
     <li><a href="#">Task 2</a></li>
     <li><a href="#">Task 3</a></li>
</ul>                    
</div>    

</div>

</div>

我已经设置了我的自定义小部件:

<script>

dojo.require("dojo.parser");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuSeparator");
dojo.require("dijit.MenuItem");
dojo.require("dijit.PopupMenuItem");
dojo.require("dijit.layout.AccordionContainer");    

dojo.ready(function(){

console.log('AccordionMenu loading');

dojo.declare("AccordionMenu",
    [dijit.layout.AccordionContainer],
    {
        postMixInProperties: function(){
        console.log('AccordionMenu postMixInProperties');
        },

        _transition: function(/*dijit._Widget?*/ newWidget, /*dijit._Widget?*/ oldWidget, /*Boolean*/ animate){
        if (newWidget.doExpand == true){
            this.inherited(arguments);
        };

        }


    });

console.log('AccordionPane loading done');

dojo.declare("AccordionPane",
    [dijit.layout.ContentPane],
    {
        doExpand: true,

        postMixInProperties: function(){
        console.log('AccordionPane postMixInProperties');
        }

    });

console.log('AccordionPane loading done');    

});    

dojo.addOnLoad( function(){
console.log('parse menu');
dojo.parser.parse("menu");
});


</script>

这有点有效,但是当我点击不同的ContentPane时,它不会折叠前一个。可能有更好的方法来做到这一点。

以下是一个实例 - http://jsfiddle.net/qPqhK/15/

1 个答案:

答案 0 :(得分:1)

好的,我找到了答案 - 我需要在dijit.layout.StackContainer中进一步覆盖selectChild方法。旧的widget / newWidget变量在_transition方法中出现故障。

selectChild: function(page){
            console.log(page);

            if (page.doExpand == true){
                console.log('true')
                this.inherited(arguments)
            };


        }    

http://jsfiddle.net/KvXmR/1/