2

kendo ui mobile の次のスニペットは、iOS デバイス用の HTML をレンダリングするときに、最初のリスト項目に詳細開示インジケーター (リスト セルの右側にある ">" アイコン) を含むリストを作成します。

            <ul data-role="listview" data-click="tap_Item">
                <li id="menuItem1"><a>Item one</a></li>
                <li id="menuItem2">Item two</li>
                <li id="menuItem3">Item three</li>
            </ul>

アンカー タグ内に「項目 1」を配置すると、そのセルに詳細開示インジケーターが与えられます。

カスタム テンプレートを使用してリストを生成する場合:

<script type="text/x-kendo-template" id="custom_list">
    <h3 class="item-title">${startDate}</h3>
</script>

セルに詳細開示インジケータを与えるにはどうすればよいですか?

4

2 に答える 2

3

最も簡単な方法は、css クラスkm-listview-linkをリスト項目の内容に追加することです。

<li id="menuItem2"><span class="km-listview-link">Item two</span></li>

または、これは Kendo がその矢印を配置するために使用している CSS です。セレクターを別のものに変更できます。

.km-listview-link:after {
    color: #7B7B7B;
    border-color: #777;
    content: "\a0";
    display: block;
    position: absolute;
    right: 1rem;
    top: 50%;
    margin-top: -0.32rem;
    margin-left: -0.2rem;
    border-style: solid;
    border-width: .24rem .24rem 0 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: .5rem;
    height: .5rem;
    display: inline-block;
    vertical-align: middle;
}
于 2013-01-06T17:46:44.100 に答える
0

ヘッダーの周りにアンカー タグを配置し、listview-link の役割を与えます。

<a data-role="listview-link"><h3 class="item-title">${startDate}</h3></a>
于 2013-01-05T00:17:42.660 に答える