Events 单击标题栏调整边框容器的大小

我想在标题栏的onClick事件上调整dijit borderContainer的大小，但是resize函数的行为非常奇怪（resize（）仅在第二次单击后才起作用）。这是我使用的代码：

<div data-dojo-type="dijit.layout.BorderContainer" id="borderContainer">
<div data-dojo-type="dijit.TitlePane" region="top" id="titlePane" title="Title">
    <script type="dojo/method">
        dojo.connect(dijit.byId("titlePane"), "onClick", function(){dijit.byId("borderContainer").resize()});
    </script>
</div>
<div data-dojo-type="dijit.layout.TabContainer" region="center" id="tabContainer">
    <div data-dojo-type="dijit.layout.ContentPane" id="contentPane" title="content" selected="true">
        This is the content
    </div>  
</div>

connect（dijit.byId（“titlePane”），“onClick”，function（）{dijit.byId（“borderContainer”）.resize（）}）；
这就是内容

你见过这种行为吗？非常感谢您的专业知识。感谢

事实上，

resize（）

第一次也能工作，但是你看不到任何事情发生，因为你应该在

onClick

发生后立即调用

resize（）

，而不是在

标题栏的

调整动画完成后（默认为200毫秒后）调用，因为除此之外，

borderContainer

的大小将调整为相同的大小

这就是我的建议：

dijit.byId("titlePane").watch("open", function(param, oldValue, newValue) {
    var animation = newValue ? this._wipeIn : this._wipeOut;
    var handler = dojo.connect(animation, "onEnd", this, function() {
        dijit.byId("borderContainer").resize();    
        dojo.disconnect(handler);            
    });
});

请参阅JSFIDLE上的一个工作示例：

编辑：仔细想想，您也可以在这两个动画上创建永久连接，但我认为这会导致代码可读性降低：

var titlePane = dijit.byId("titlePane");
var borderContainer = dijit.byId("borderContainer");
dojo.connect(titlePane._wipeIn, "onEnd", borderContainer, "resize");
dojo.connect(titlePane._wipeOut, "onEnd", borderContainer, "resize");

实际上，

resize（）

第一次也可以工作，但是您看不到任何事情发生，因为您应该在

onClick

发生后调用

resize（）

，而不是在

标题栏的

调整大小动画完成后立即调用（默认情况下为200毫秒后），因为除此之外，

borderContainer

的大小将调整为相同的大小

这就是我的建议：

dijit.byId("titlePane").watch("open", function(param, oldValue, newValue) {
    var animation = newValue ? this._wipeIn : this._wipeOut;
    var handler = dojo.connect(animation, "onEnd", this, function() {
        dijit.byId("borderContainer").resize();    
        dojo.disconnect(handler);            
    });
});

请参阅JSFIDLE上的一个工作示例：

编辑：仔细想想，您也可以在这两个动画上创建永久连接，但我认为这会导致代码可读性降低：

var titlePane = dijit.byId("titlePane");
var borderContainer = dijit.byId("borderContainer");
dojo.connect(titlePane._wipeIn, "onEnd", borderContainer, "resize");
dojo.connect(titlePane._wipeOut, "onEnd", borderContainer, "resize");

---

非常感谢您的及时回复。我完全忘记了动画的时间。。。你的例子很好用。希望能帮助很多人。谢谢你！非常感谢您的及时回复。我完全忘记了动画的时间。。。你的例子很好用。希望能帮助很多人。谢谢你！