0

このチュートリアルの助けを借りてカスタムリストを作成しています。 このチュートリアルの助けを借りて、ラベルを追加し、リストの右側と左側に揃えることができますが、片側にさらにラベルを垂直に揃えるオプションはありません。実はこんな感じで実装したい

ここに画像の説明を入力してください

私が知りたい2つのこと

  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 に答える