autidividers使用jQuery mobile列出视图设计问题

Question

您好，

我在我的演示中使用jQuery mobile。我用一个很好的自动分割器做了一个简单的例子;但是，我正在寻找一些不同类型的列表，如上所示。

应该有按字母顺序排列的字母，名称后跟地址。

名称和地址应分别为棕色和白色背景颜色。

是否可以使用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;
}

Answer 2

如果您不需要在li中使用锚标记，Littm'sansans将会起作用。如果您想在原始问题中保留锚点，请尝试以下操作：

以下是您更新的 FIDDLE

$(document).on("pagebeforeshow", "#page1",function () {
    var name = ["Saab","Volvo","BMW","BOW", "BLW"];
    var address = ["Sjnnnnvvf","Vtyubolvo","BhjhubbMW","ftyui","fybmi"];

    var lItems = '';
    for(var i=0;i<name.length;i++){
      lItems += '<li data-icon="false" ><a class="lastname"><h3 class="brown">'+name[i]+'</h3><p  class="white">' + address[1] + '</p></a></li>';
    }
    $("#folderData").append($(lItems)).listview({autodividers: true}).listview('refresh');

});

li上的

data-icon="false"会阻止它添加正确的图标。棕色和白色的类处理样式：

.brown {
    background-color: #774F38 !important;
    color: white;
    text-shadow: none;
    padding: 8px;
    margin: 0 !important;
}
.white {
    background-color: white !important;
    padding: 8px;
}
.lastname{
    padding: 0 !important;
    margin-top: 0px !important;
    background-color: white !important;
}
.ui-li{
    border-top: 0 !important;
}
.ui-li-divider {
    background: #eee;
}

Answer 3

$（document）.ready（function（）{

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

     }
    $("#folderData").listview({
        autodividers: true,
        autodividersSelector:function(li){             
          return name[li.index('.test')];
        }


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

根据您管理css颜色 干杯!!