在jQuery Mobile中动态创建列表时如何创建自动列表分隔符 [英] how to create auto list dividers when dynamically creating a list in jquery mobile

问题描述

我已经动态创建了消息列表.我有一个<ul>标记，并且正在动态生成一个列表.但是，我不知道如何为此添加列表分隔符.我可以在js中调用一个刷新方法，该方法将在我列出列表后添加分隔符?

I've created a list of messages dynamically. I have a <ul> tag and I'm generating a list inside dynamically. However, I don't know how to add list dividers to this. Would there be a refresh method in js that I can call which would add dividers after I have my list?

这就是我所拥有的:

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

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

</ul>

这仅附加在列表分隔符的最上方，我需要在<li>标记中使用其中的几个. 我的<li>列表是消息.我希望能够按日期设置分隔线，以便更轻松地使用它.

This only appends on list divider to the very top, I need several of them within the <li> tags. My list of <li>'s are messages. I want to be able to have dividers by Date so it makes it much easier to use.

推荐答案

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

I've a jsfiddle http://jsfiddle.net/yVtVE/2/

代码有些不同，但是可以使用

The code is a bit different but it works

假设这样的列表

<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"属性添加到任何列表视图来完成的.

A listview can be configured to automatically generate dividers for its items. This is done by adding a data-autodividers="true" attribute to any listview.

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

By default, the text used to create dividers is the uppercased first letter of the item's text. Alternatively you can specify divider text by setting the autodividersSelector option on the listview programmatically. For example, to add a custom selector to the element with 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;
}
});

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

Let's say you have a date in your message your code would work something like this

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

我尚未测试此代码，它可能有错误，但是可以给您一个尝试的想法.

I have not tested this code, it might have bugs, but it will give you an idea to try.

这篇关于在jQuery Mobile中动态创建列表时如何创建自动列表分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！