Question

我已动态创建了一个消息列表。我有一个<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>列表是消息。我希望能够按日期分割，这样可以更容易使用。

Answer 1

我有一个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');

ORIGINAL

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

Autodividers

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

默认情况下，用于创建分隔符的文本是项目文本的大写首字母。或者，您可以通过以编程方式在listview上设置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;
  }
});

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

如何在jquery mobile中动态创建列表时创建自动列表分隔符

1 个答案: