0

我已经动态创建了一个消息列表。我有一个<ul>标签，我正在动态生成一个列表。但是，我不知道如何为此添加列表分隔符。js中是否有一个我可以调用的刷新方法，它会在我有我的列表后添加分隔符？

这就是我所拥有的：

<ul id="messages" data-autodividers="true" data-role="listview" data-theme="c">

    //a list of <li> are dynamically generated here

</ul>

这只会在列表分隔符上附加到最顶部，我需要在<li>标签中使用其中的几个。我的列表<li>是消息。我希望能够按日期划分分隔符，这样它就更容易使用了。

4

1 回答 1

7

我有一个 jsfiddle http://jsfiddle.net/yVtVE/2/

代码有点不同，但它可以工作

假设这样的列表

<ul data-role="listview" id="MessagesList" data-autodividers="true">
                <li date="2013-03-20"><a href="#">Event 1</a></li>
                <li date="2013-03-20"><a href="#">Event 2</a></li>
                <li date="2013-03-19"><a href="#">Event 3</a></li>
           </ul>

你的代码是

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

原来的

来自 JQM 文档http://api.jquerymobile.com/listview/

自动分频器

列表视图可以配置为自动为其项目生成分隔符。这是通过向任何列表视图添加 data-autodividers="true" 属性来完成的。

默认情况下，用于创建分隔符的文本是项目文本的大写首字母。或者，您可以通过以编程方式在列表视图上设置 autodividersSelector 选项来指定分隔符文本。例如，要向 id="mylistview" 的元素添加自定义选择器：

$( "#mylistview" ).listview({
autodividers: true,
// the selector function is passed a <li> element from the listview;
// it should return the appropriate divider text for that <li>
// element as a string
autodividersSelector: function ( li ) {
var out = /* generate a string based on the content of li */;
return out;
}
});

假设您的消息中有一个日期，您的代码将像这样工作

$( "#mylistview" ).listview({
autodividers: true,
autodividersSelector: function ( li ) {
    var re = /\/\d{4}\/\d{2}\/\d{2}/i;
    var out = $(this).html().match(re);
    return out;
  }
});

我没有测试过这段代码，它可能有错误，但它会给你一个尝试的想法。

于 2013-03-20T15:19:09.270 回答