javascript - 如何在 phonegap javascript 中像 tablview 一样显示列表？

Question

HTML：

<ul id="listview" data-inset="true"></ul>

JavaScript：

for(i=0;i<titles.length;i++){
    $('#listview').append('<li><a href="#">'+titles[i]+'</a>      </li>');
}

它会显示简单的列表，但我需要列表视图作为表格视图？

Answer 1

PhoneGap 不是将您的 JS / HTML 编译为 Objective-C 样式代码的包装器。我假设您想要实现的目标类似于下图：

您需要#listview使用 CSS 设置样式以实现此目的。例如，您可以尝试这样的事情：

#listview {
    list-style: none;
    float: left;
    width: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

    #listview li {
        width: 100%;
        padding: 10px;
        font-weight: bold;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        background-color: #fff;
        float: left;
        clear: both;
        border-bottom: 1px solid #ccc;
    }
        #listview li:last-of-type {
            border-bottom: none;
        }