0

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

在此处输入图像描述

我想知道的两件事

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

2 回答 2

2

我使用了 edurocher 提供的 HTML 并制作了这个小提琴。

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();
});

Dojo 自定义列表项

于 2013-03-27T15:36:57.637 回答
1

您可以做的只是将 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>

希望这可以帮助。

于 2013-03-27T14:18:55.143 回答