使用Dojo在IBM Worklight中自定义ListView

Question

我正在帮助制作自定义列表 this教程。在本教程的帮助下，我可以添加标签并将其对齐到列表的右侧和左侧。但我找不到在一侧垂直对齐更多标签的选项。实际上我想实现像这样

我想知道的两件事

1. 其他标签下的标签
2. 标签下的日期
3. 标签下的星级评分

Answer 1

我使用了edurocher提供的HTML并制作了this fiddle。

<强> HTML

<div data-dojo-type="dojox.mobile.View">
     <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='back:"Home", moveTo:"foo"'>Inbox</h1>

    <ul data-dojo-type="dojox.mobile.RoundRectList">

        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight: true'>
            <table>
                <tr>
                    <td style="padding: 5px" valign="top">
                        <div style="margin-bottom: 10px; border-top-style: solid; border-right-style: solid; border-color: #cccc00; border-width:4px; width: 8px; height: 8px; -webkit-transform:  scale(0.7,1) rotate(45deg);"></div>
                        <input type="checkbox" checked="true"></input>
                    </td>
                    <td>
                        <div style="font-weight: bold">Mike Cleron</div> <span style="font-weight: bold; font-size: small">Ice Cream Social Announcement</span>
 <span style="font-weight: normal;font-size: small">- Like ice cream sandwiches? Like being social? </span>
                    </td>
                    <td valign="top" align="right" width="60px">
                        <div style="margin-bottom: 10px">Oct 18</div>
                        <div>
            <div data-dojo-type="dojox/mobile/Rating" data-dojo-props='image:"http://archive.dojotoolkit.org/nightly/checkout/demos/mobileGallery/images/star-orange.png",numStars:1,value:1'></div> 
                        </div>
                    </td>
                </tr>
            </table>
        </li>

    </ul>
</div>

<强> JS

// Load the widget parser and mobile base
require(["dojox/mobile/parser", "dojox/mobile/deviceTheme", "dojox/mobile/Rating", "dojox/mobile/compat", "dojox/mobile"],
  function (parser, deviceTheme) {

    // Parse the page for widgets!
    parser.parse();
});

Answer 2

您可以做的只是将HTML内容添加到ListItem并使用标准HTML / CSS来定义布局。这是我使用HTML表快速提出的示例，看起来像您发送的示例：

    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight: true, selected: true'>
            <table>
            <tr>
            <td style="padding: 5px" valign="top">
            <div style="margin-bottom: 10px; border-top-style: solid; border-right-style: solid; border-color: #cccc00; border-width:4px; width: 8px; height: 8px; -webkit-transform:  scale(0.7,1) rotate(45deg);"></div>
            <input type="checkbox" checked="true"></input> 
            </td>
            <td>
            <div style="font-weight: bold">Mike Cleron</div>
            <span style="font-weight: bold; font-size: small">Ice Cream Social Announcement</span>
            <span style="font-weight: normal;font-size: small">- Like ice cream sandwiches? Like being social? </span>
            </td>
            <td valign="top" align="right" width="60px">
            <div style="margin-bottom: 10px">Oct 18</div>
            <div data-dojo-type="dojox/mobile/Rating" data-dojo-props='image:"images/star-orange.png",numStars:1,value:1'></div> 
            </td>
            </tr>
            </table>
        </li>

希望这有帮助。