[英]Custom Dojo Accordion Container widget with option to not expand ContentPane
I am trying to create a custom dojo widget that prevents the "transistion" to the content pane. 我正在尝试创建一个自定义的dojo小部件,以防止“过渡”到内容窗格。 I am trying to have the pane link to another page instead of sliding.
我正在尝试将窗格链接到另一页而不是滑动。
I would specify this option using an attribute doExpand="false" example: 我将使用属性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>
I have setup my custom widget like so: 我已经设置了我的自定义小部件,如下所示:
<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>
This somewhat works but it but when I click on a different ContentPane it doesn't collapse the previous one. 这样做虽然有些奏效,但是当我单击另一个ContentPane时,它不会折叠前一个。 There is probably a better way to do this.
可能有更好的方法来执行此操作。
Here is a live example - http://jsfiddle.net/qPqhK/15/ 这是一个实时示例-http://jsfiddle.net/qPqhK/15/
Okay, I found the answer - I needed to override the selectChild method further back in dijit.layout.StackContainer. 好的,我找到了答案-我需要在dijit.layout.StackContainer中进一步覆盖selectChild方法。 The oldWidget/newWidget vars were getting out of order in the _transition method.
_transition方法中的oldWidget / newWidget变量混乱。
selectChild: function(page){
console.log(page);
if (page.doExpand == true){
console.log('true')
this.inherited(arguments)
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.