为什么这个Dojo代码段不起作用?

xpszyzbs  于 2022-12-08  发布在  Dojo
关注(0)|答案(3)|浏览(214)

所以当我尝试将一个div插入到BorderContainer中时,我的页面没有加载。这是怎么回事?我做错了什么?
如果我注解掉标题行,边框容器就可以正常加载。如果我把div放回,页面就不再加载了。

mf98qq94

mf98qq941#

您将top定义为ContentPaneAPI,将Banner定义为domNode。因此,要设置domNode,您需要设置内容。

top.set('content', banner);

如果要向内容页面添加小部件(将其视为代码,而不是HTML),则需要添加它dom。

top.set('content', bannerWidget.domNode);

bannerWidget.startup();
top.addChild(bannerWidget);

如果您传递一个小部件,它必须是dijit/_WidgetBase的子类,并且您需要在它上面调用startup。
我更喜欢每个窗格使用一个小部件。我有多个小部件 Package 成一个小部件。

juzqafwq

juzqafwq2#

因为你只需要注入html内容,正确的方法是使用denov和Manjunatha描述的“content”属性。
在这种特殊情况下,正如Manjunatha所说,您不需要domConstruct部分,也可能不需要div,最后您可以在示例化语句中提供内容,因此紧凑形式将是:var top = new ContentPane({..., content: title}); .
然后你可以使用top.addChild(aWidget)将小部件添加到顶部--例如,对于一个菜单栏,它会出现在内容(标题)的下面。但是aWidget必须是一个小部件,而横幅不是。

qacovj5a

qacovj5a3#

看一下这个jsfiddle最初,窗格的内容是foo!bar!,单击按钮“Click”时,内容将更改为Button

**

  • HTML语言
    **
<div id="target"></div>
<div id="click">

</div>

**

  • JS代码
    **
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");

dojo.ready(function() {
    var bc = new dijit.layout.BorderContainer( {
        'class': 'theBorderContainer'
    }, 'target');

    var p1 = new dijit.layout.ContentPane( {
        region: 'center',
        content: '<p>foo! bar!</p>'
    });
    var p2 = new dijit.layout.ContentPane( {
        region: 'top',
        content: '<p>top!</p>'
    });

  var btn = new dijit.form.Button({
  name:"button",
  title:"Hello",
  label:"Hello"
  });

  var btn1 = new dijit.form.Button({
  name:"click",
  title:"Click",
  label:"Click",
  onClick:function(evt){
  p1.set('content',btn);
  }
  },click);

    bc.startup();

    bc.addChild(p1);
    bc.addChild(p2);
    p1.startup();
});

**

  • CSS程式码
    **
body, html {
    width: 100%;
    height: 100%;
}
.theBorderContainer{
    width: 100%;
    height: 90%;
}

相关问题