Dojo 使用 domConstruct 将声明性代码添加到现有手风琴中
Dojo adding declarative code using domConstruct to existing accordion
我有一个手风琴,它以编程方式添加了内容窗格。在其中一个窗格中,我想添加一个具有许多选项卡的选项卡容器。每个选项卡都有许多需要动态创建的控件。但是以动态方式创建它让我很难过。我决定采用不同的方法来使用 domConstruct.place 添加它。我以声明方式完成了代码的设计,并在每个选项卡的单独 html 页面中进行了设计。然后,我尝试将整个选项卡容器作为子项添加到现有手风琴的内容窗格中。
屏幕上仅显示文本内容,但没有选项卡容器控件。
这是代码:
require(["dgrid/OnDemandGrid", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/layout/TabContainer", "dijit/form/Button", "dgrid/Selection",
"dgrid/Keyboard", "dojo/_base/declare", "dojo/store/JsonRest", "dojo/store/Observable", "dojo/store/Memory", "dijit/registry", "dgrid/extensions/DijitRegistry",
"dgrid/extensions/Pagination", "dgrid/extensions/CompoundColumns", "dgrid/extensions/ColumnResizer", "dojo/dom-construct", "dojo/text!../App/tab.html", "dojo/domReady!"],
function(Grid, ContentPane, AccordionContainer, TabContainer, Button, Selection,
Keyboard, declare, JsonRest, Observable, Memory, registry, DigitRegistry,
Pagination, CompoundColumns, ColumnResizer, domConstruct, tabHtml){
var aContainer = registry.byId('accord');
if (!aContainer) {
console.log('Accordion does not exist');
aContainer = new AccordionContainer({style:"width: auto; height: 680px;"}, "accord");
}
//Grid creation part goes here. Grid appears and events works.
var cpid = "acordcp1_tc_cp1_" + getRandomNumber();
var cp1 = new ContentPane({id: cpid, title: "pane1", content: grid});
aContainer.addChild(cp1);
aContainer.startup();
aContainer.selectChild(cp1);
aContainer.resize();
console.log("TAB HTML", tabHtml);
var tb1 = domConstruct.create("div", {innerHTML: tabHtml}, cpid, "first");
}
这是来自 dojotoolkit 教程的示例选项卡容器声明性代码,我正在尝试将其放在手风琴的内容窗格中。
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
Lorem ipsum and all around...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
Lorem ipsum and all around - last...
</div>
</div>
但我得到的是:
洛雷姆伊普苏姆和周围...Lorem ipsum和周围 - 第二...Lorem ipsum和周围 - 最后...
是的,只有文本与网格控件一起显示在折叠项的内容窗格中。
我拥有的道场配置也是:
<script type="text/javascript"
djconfig="isDebug: true, parseOnLoad: true" src="dojo/dojo/dojo.js"></script>
我做错了什么?
这种方法不正确吗?有什么建议?
我真的很感谢你的帮助。谢谢。
公羊
dojo 解析器是将您的标记转换为 dojo 小部件和 dijits 的原因。它在加载页面时运行一次。添加到页面后,您需要在标记上运行它。您有两种选择。
-
等待运行解析器。在配置中将 parseOnLoad 设置为 false,然后在添加标记后在代码中调用 parser.parse((。
-
在新div 上再次运行解析器。
parser.parse(tb1)
如果您有其他需要首先显示的声明性代码,则第二种方法是必需的。
相关文章:
- 当我尝试添加文本效果时,有东西阻止了JavaScript的运行'手风琴'在html文档中
- 将window.scrollTo添加到简单的jQuery手风琴中
- 动态地将额外的行添加到 jquery 手风琴中
- Twitter 引导程序:在开放手风琴标题中添加一个类
- 在引导手风琴上, 有没有办法在折叠时向标题添加固定的保存按钮.
- JQuery 手风琴在添加内容和对齐时遇到问题
- Dojo 使用 domConstruct 将声明性代码添加到现有手风琴中
- 在 Bootstrap 3 手风琴中添加动态闭合面板
- 将ng-click事件添加到angular ui手风琴中
- 在嵌套手风琴中添加淡入效果
- 添加“;x〃;隐藏当前打开的手风琴的图标
- 谷歌地图手风琴幻灯片,如何添加标记
- CSS手风琴->添加jquery以更改“;悬停”;切换,但JS没有;t注册
- 引导3活动类添加/移除手风琴容器外的按钮
- 如何将活动类添加到第一个手风琴
- 当以手风琴方式打开外部菜单项时,无法向第一个子菜单项添加新的颜色类
- 添加网页可访问性推特引导手风琴
- 添加一个手风琴在谷歌地图infoBubble(从谷歌地图实用程序库)
- 如何添加一个加号或减号手风琴在引导?手风琴关闭时显示加号,手风琴打开时显示减号
- 如何使用jquery向基本手风琴添加加号和减号