0

我正在尝试从选项卡容器视图切换到标题窗格视图。我正在使用“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>
4

1 回答 1

0

当您调用 .destroyDescendants 时，您正在破坏选项卡容器，这会破坏内容窗格，从而破坏您原来的 .cPane div。因此，它们不能作为 TitlePanes 放入。

当您构建初始 ContentPane 时，您将.cPane节点放入您的 ContentPanes（而不是在您的 ContentPane 中），因此当您销毁选项卡容器时它们会消失。

因此，您需要在销毁内容之前将内容从内容窗格中取出。如果您将内容放入内容窗格而不是将内容放入内容窗格，这可能不会那么令人困惑。（当您创建 TitlePanes 时也是如此。）然后您可以使用“place”将您的内容从 ContentPane 移动到 TitlePane（例如http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/）

我不太确定你想要达到什么目标，所以回答起来有点棘手。

于 2012-05-05T00:19:13.787 回答