jquery - 使用 jQuery Mobile 的自动分隔 ListView 设计问题

Question

你好，

我在演示中使用的是 jQuery Mobile。我使用 autodividers 做了一个简单的例子，效果很好；但是，我正在寻找如上所示的一些不同类型的列表。

应该有字母，名称后面应该有地址。

名字和地址应该分别有棕色和白色的背景色..

是否可以使用 jQuery Mobile 创建这样的列表类型？

这是我试过的:http://jsfiddle.net/5wZ3E/1/

var name = new Array();
name[0] = "Saab";
name[1] = "Volvo";
name[2] = "BMW";
name[3] = "BOW";
name[4] = "BLW";

var address = new Array();
address[0] = "Sjnnnnvvf";
address[1] = "Vtyubolvo";
address[2] = "BhjhubbMW";
address[3] = "ftyui";
address[4] = "fybmi";

$(document).ready(function () {
    for(var i=0;i<name.length;i++){
        $('#folderData').append('<li><a class="lastname">'+name[i]+'</a></li>');
    }

    $("#folderData").listview({
        autodividers: true,
    });

    $('#folderData').listview('refresh');
});

Answer 1

您可能需要这样的东西:http://jsfiddle.net/Littm/LxvyU/1/

JS:

var name = new Array();
name[0] = "Saab";
name[1] = "Volvo";
name[2] = "BMW";
name[3] = "BOW";
name[4] = "BLW";

var address = new Array();
address[0] = "Sjnnnnvvf";
address[1] = "Vtyubolvo";
address[2] = "BhjhubbMW";
address[3] = "ftyui";
address[4] = "fybmi";

$(document).ready(function () {
    for(var i=0;i<name.length;i++){
        $('#folderData').append('<li><h3>'+name[i]+'</h3><p>'+address[i]+'</p></li>');
    }

    // Refreshing the list
    $('#folderData').listview('refresh');
});   

HTML:

<ul data-role="listview" data-autodividers="true" id="folderData" data-divider-theme="d" data-theme="d"></ul>

****CSS:***

.ui-li-static.ui-li {
    padding: 0;
    border: none;
}

.ui-li-divider {
    background: white;
    border: none;
}

.ui-li-heading {
    background-color: gray;
    color: white;
    line-height: 20px;
    padding: 10px;
    margin: 0 0 10px 0;
    border-radius: 5px;
}

.ui-li-desc {
    padding: 10px;
}