Question

以下的kendo ui mobile片段在为iOS设备呈现HTML时，会在第一个列表项上创建一个带有详细信息披露指示符（列表单元格右侧的“＆gt;”图标）的列表：

            <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>

将“第一项”放在锚标记中会为该单元格提供详细的披露指示。

使用自定义模板生成列表时：

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

如何为细胞提供详细的披露指标？

Answer 1

最简单的方法是将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;
}

Answer 2

我会在标题周围添加一个锚标记，并为其提供listview-link角色：

<a data-role="listview-link"><h3 class="item-title">${startDate}</h3></a>

kendo mobile - 列表视图中的详细信息披露指标

2 个答案: