Question

我正在尝试从标签容器视图切换到标题窗格视图。我用一类“cPane”拉入所有dom对象。最初我指定为dijit.layout.ContentPane，当我点击切换按钮时，我试图重新分配给dijit.TitlePane。

似乎dom元素没有保留其属性。我尝试过每一种“破坏”方法，但是当我将它们分配给TitlePane时，它们都是空白的。如何在不丢失属性的情况下重新分配dom节点？感谢。

这是我的代码：http://jsfiddle.net/afarris/gFXnH/11/

dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");

dojo.addOnLoad(function() {

dojo.parser.parse("widget");

var cc = dojo.byId("contentContainer");

dojo.query(".cPane").forEach(function(n){
   new dijit.layout.ContentPane({
        title: dojo.attr(n, "title")
    }, n);
});

var dtc = new dijit.layout.TabContainer({
   style: "height:100px; width: 100%;"
}, cc);

dtc.startup();    

var tabMode = true;


new dijit.form.ToggleButton({
    showLabel: true,
    checked: false,
    onChange: function(val) {
        if (tabMode == true) {
            dtc.destroyDescendants(true);
            dojo.query(".cPane").forEach(function(n){
            console.log('found contentPane');
                new dijit.TitlePane({
                    title: dojo.attr(n, "title"), open: "true"
                }, n), cc;
            });            
        }

    },
    label: "toggle"
},
"viewToggle");    

});

<div class="tundra">
<div id="widget">
<button id="viewToggle"></button>
<div id="contentContainer">
    <div class="cPane" title="First" style="width: 100%; height: 100px">test</div>
    <div class="cPane" title="Second" style="width: 100%; height: 100px"><p>demo</p></div>
 </div>
</div>

Answer 1

当您调用.destroyDescendants时，您正在销毁标签容器，该容器会破坏内容窗格，这会破坏您原来的.cPane div。所以他们不会把它作为TitlePanes投入使用。

构建初始ContentPane时，您将<。em> <。em> 销毁标签容器。

因此，在销毁内容之前，您需要将内容从内容窗格中删除。如果您将内容放入内容窗格而不是将内容转换为内容窗格，则可能不那么容易混淆。（当你创建TitlePanes时也一样。）然后你可以使用'place'将你的内容从ContentPane移动到TitlePane（例如http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/）

我不太确定你想要达到的目标，所以回答它有点棘手。

将dom节点重新分配给不同的dijit容器

1 个答案: