gpt4 book ai didi

javascript - 如何使用 Dojo 动态创建自定义列表项?

转载 作者:行者123 更新时间:2023-12-03 10:07:02 25 4
gpt4 key购买 nike

您可以在记事本或其他任何地方复制/粘贴以下代码:

<!DOCTYPE HTML>
<html>
<head>
<title>index</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum- scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require(["dojox/mobile/parser",
"dijit/registry",
"dojox/mobile/deviceTheme",
"dojox/mobile",
"dojo/domReady!"],function(parser,registry){
parser.parse();
var list = registry.byId("list");
for(var i = 0;i < 18;i++){
var childWidget = new dojox.mobile.ListItem({id:"item"+i,
label:"ITEM"+i});

list.addChild(childWidget);

}
document.getElementById("item0").style.backgroundColor = "red";
document.getElementById("item1").style.backgroundColor = "green";

});
</script>




</head>
<body>

<div id="settings" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">

<!-- a sample heading -->
<h1 data-dojo-type="dojox.mobile.Heading">Settings</h1>

<!-- a rounded rectangle list container -->
<ul data-dojo-type="dojox.mobile.RoundRectList" id="list">
</ul>
</div>

<div id="article" data-dojo-type="dojox.mobile.View">

<!-- a sample heading -->
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='back: "settings",moveTo: "settings"'>Article</h1>

This is the article view
</div>
</body>
</html>

但是我正在努力处理的代码部分是:

   <script type="text/javascript">
require(["dojox/mobile/parser",
"dijit/registry",
"dojox/mobile/deviceTheme",
"dojox/mobile",
"dojo/domReady!"],function(parser,registry){
parser.parse();
var list = registry.byId("list");
for(var i = 0;i < 18;i++){
var childWidget = new dojox.mobile.ListItem({id:"item"+i,
label:"ITEM"+i});

list.addChild(childWidget);

}
document.getElementById("item0").style.backgroundColor = "red";
document.getElementById("item1").style.backgroundColor = "green";

});
</script>

正如您所看到的,ListItems 是这样动态创建的:

var childWidget = new dojox.mobile.ListItem({id:"item"+i,label:"ITEM"+i});

我想做的是在创建 ItemList 时放置背景颜色,而不是将其放在后面,因为您可以看到带有“红色”和“绿色”的两行。

所以我正在寻找这样的东西:

var childWidget = new dojox.mobile.ListItem({id:"item"+i,label:"ITEM"+i,style=????});

但是没有这样的 style 属性。

属性 here顺便说一句。

可以吗?

提前谢谢您。

最佳答案

首先,我建议您将 ListItem 添加到 AMD 依赖项列表中,并像任何其他 AMD 模块一样使用它:

require(["dojox/mobile/ListItem"], function(ListItem) {
new ListItem(...);
});

而不是通过旧的 dojox.mobile 表示法。

对于您的样式问题,您暗示的解决方案实际上可以应用,ListItem 继承 dijit/_WidgetBase ,因此将支持 style 属性。像下面这样的东西应该有效:

new ListItem({id: "theid", label: "thelabel", style: "background-color: red"});

关于javascript - 如何使用 Dojo 动态创建自定义列表项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30312250/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com