2

我一直在网上（和这里）搜索，似乎无法弄清楚发生了什么。我有一个 jquery mobile (1.2) 页面，其中包含列表视图上的几个项目。我为每个 [li] 标签添加了一个自定义属性，并根据 jquery 移动演示将其设置为自动分隔符。

HTML

<div data-role="page" id="ScheduleDay">
<div data-role="header">
    <a href="#HomePage" data-icon="home" data-direction="reverse">Home</a>      
    <h1 id="ScheduleDayText">Schedule</h1>
</div>
<div data-role="content">   
    <ul data-role="listview" id="ScheduleList">
        <li time="3:30PM"><a href="#">Event 1</a></li>
        <li time="3:30PM"><a href="#">Event 2</a></li>
        <li time="4:30PM"><a href="#">Event 3</a></li>
   </ul>
</div>
</div>

查询

$("#ScheduleList").listview({
autodividers: true,
autodividersSelector: function ( li ) {
    var out = li.attr('time');]
    return out;
}
});
$('#ScheduleList').listview('refresh');

我创建了一个jsfiddle来展示我想要完成的工作。

我似乎无法让分隔线出现，而且我确信我忽略了一些相当小的东西（或者完全错过了这艘船——我对 jquery 还是很陌生）。

任何帮助将不胜感激。

4

1 回答 1

8

为了使它工作：

  1. 仍然需要data-autodividers="true"在您的<ul>
  2. 将代码放入适当的 jQM 处理程序pageinit()或pagebeforeshow()
  3. <中有一个错字var out = li.attr('time');]——你不需要最后的括号

话虽如此，您的列表视图的标记将如下所示：

<ul data-role="listview" id="ScheduleList" data-autodividers="true">
</ul>

和 JS 代码将如下所示：

$(document).on("pageinit", "#ScheduleDay", function(){
    $("#ScheduleList").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr("time");
            return out;
        }
    }).listview("refresh");
});

这是jsFiddle

于 2013-02-07T06:53:31.170 回答