博客

jQuery Mobile Listview autodividers选项

  • Post category:jquery

jQuery Mobile Listview的autodividers选项是用于自动生成可用作字母索引的分组的基于列表项内容的dividers。通过这个选项，可以简单高效地创建一个具有分组索引的列表。

以下是实现自动生成分组的步骤：

1. 添加data-autodividers="true"到列表属性中

首先，在HTML中定义一个具有data-role="listview"和data-autodividers="true"属性的列表。data-autodividers是告诉Listview要自动生成分组dividers。

<ul data-role="listview" data-autodividers="true">
    <li>Banana</li>
    <li>Blackberry</li>
    <li>Blueberry</li>
    <li>Cantaloupe</li>
    <li>Cherry</li>
    <li>Clementine</li>
    <li>Cucumber</li>
    <li>Date</li>
    <li>Elderberry</li>
    <li>Grape</li>
    <li>Guava</li>
    <li>Kiwi</li>
</ul>

在这里，我们只需添加data-autodividers="true"到列表属性中，不需要手动添加分组dividers。

2. 添加生成分组标题的方法

其次，需要指定在哪些列表项之间插入分组dividers，以及如何定义这些dividers的标签。为实现这个功能，需要指定一个函数来生成分组的标题。

<ul data-role="listview" data-autodividers="true" data-filter="true">
    <li>Banana</li>
    <li>Blackberry</li>
    <li>Blueberry</li>
    <li>Cantaloupe</li>
    <li>Cherry</li>
    <li>Clementine</li>
    <li>Cucumber</li>
    <li>Date</li>
    <li>Elderberry</li>
    <li>Grape</li>
    <li>Guava</li>
    <li>Kiwi</li>
</ul>

<script>
$(document).on("pagecreate", function(){
    //定义一个函数，返回用于分组的标题 
    $( "ul[data-autodividers=true]" ).on( "listviewbeforefilter", function ( e, data ) {
        var $ul = $( this ),
            $input = $( data.input ),
            value = $input.val(),
            html = "";
        $ul.find( "li" ).each( function () {
            var $this = $( this ),
               text = $this.text(),
               firstChar = text.slice( 0, 1 ).toUpperCase();
            if ( firstChar === value ) {
                html += "<li data-role='list-divider'>" + firstChar + "</li>";
            }
        });
        $ul.html( html + $ul.html() );
        $ul.listview( "refresh" );
    });
});
</script>

在这个例子中，我们使用listviewbeforefilter事件来启动上面的函数。这个函数会在用户开始搜索常规列表时被调用。它会对列表项进行循环，检测每个元素的第一个字符。如果它是相同的，则创建一个新的列表分组器元素，并将其添加到列表中。之后，刷新列表视图。

示例1：

让我们来看一个实际的例子。我们有一个水果列表，其中包含水果名称以及其所属的国家。现在我们想根据这些国家自动生成分组。

<ul data-role="listview" data-autodividers="true" data-filter="true">
    <li><h1>China</h1></li>
    <li><a href="#">Lychee</a></li>
    <li><a href="#">Longan</a></li>
    <li><a href="#">Pomegranate</a></li>
    <li><h1>USA</h1></li>
    <li><a href="#">Apple</a></li>
    <li><a href="#">Strawberry</a></li>
    <li><a href="#">Orange</a></li>
    <li><a href="#">Blueberry</a></li>
</ul>

<script>
$(document).on("pagecreate", function(){
    //定义一个函数，返回用于分组的标题 
    $( "ul[data-autodividers=true]" ).on( "listviewbeforefilter", function ( e, data ) {
        var $ul = $( this ),
            $input = $( data.input ),
            value = $input.val(),
            html = "";
        $ul.find( "li" ).each( function () {
            var $this = $( this ),
               text = $this.find("h1").text(),
               firstChar = text.slice( 0, 1 ).toUpperCase();
            if ( firstChar === value ) {
                html += "<li data-role='list-divider'>" + firstChar + "</li>";
            }
        });
        $ul.html( html + $ul.html() );
        $ul.listview( "refresh" );
    });
});
</script>

在此例子中，我们增加了<h1>标签表示水果所属的国家，然后在JS中改变获取列值的方法以获取该标签中的文本。

示例2：

第二个例子将附加地区信息到列表项并对其进行分组。

<ul data-role="listview" data-autodividers="true" data-filter="true">
    <li><a href="#" data-following="east">New York City</a></li>
    <li><a href="#" data-following="east">Boston</a></li>
    <li><a href="#" data-following="west">San Francisco</a></li>
    <li><a href="#" data-following="west">Los Angeles</a></li>
</ul>

<script>
$(document).on("pagecreate", function(){
    //定义一个函数，返回用于分组的标题 
    $( "ul[data-autodividers=true]" ).on( "listviewbeforefilter", function ( e, data ) {
        var $ul = $( this ),
            $input = $( data.input ),
            value = $input.val(),
            html = "";
        $ul.find( "li" ).each( function () {
            var $this = $( this ),
               region = $this.find("a").data("following"),
               firstChar = region.slice( 0, 1 ).toUpperCase();
            if ( firstChar === value ) {
                html += "<li data-role='list-divider'>" + firstChar + "</li>";
            }
           html += $this.prop('outerHTML');
        });
        $ul.html( html );
        $ul.listview( "refresh" );
    });
});
</script>

在此例子中，我们添加data-following属性到列表项，用于指定该项目所属的那一个地区。JS中更改获取属性信息的方法以获取城市所属地区，然后将新的列表项插入到相应的分组中。

这样，您就根据具体的列表内容自动生成了分组索引。希望本文对您有所帮助，谢谢！

Tags: