Question

您可以在记事本或其他任何内容中复制/粘贴以下代码：

<!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时添加背景颜色，而不是将其放在后面，因为你可以看到2行“红色”和“绿色”。

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

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

但是没有这样的风格属性。

属性here btw。

有可能吗？

提前谢谢。

Answer 1

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

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

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

对于您的样式问题，您实际应用的解决方案实际上可以应用，ListItem继承dijit / _WidgetBase，因此将支持样式属性。以下内容应该有效：

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

如何使用Dojo动态创建自定义列表项？

1 个答案: