jQuery Mobile 列表

时间：2014-05-08 07:40:17 收藏：0 阅读：423

一、jQuery Mobile 列表视图：jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。

1、创建列表

向 <ol> 或 <ul> 元素添加 data-role="listview"。

如需使这些项目可点击，请在每个列表项（<li>）中规定链接：

　　<div data-role="page" id="pageone">
        <div data-role="content">
            <h1>有序列表：</h1>
            <ol data-role="listview">
                <li><a href="#">列表项</a></li>
                <li><a href="#">列表项</a></li>
                <li><a href="#">列表项</a></li>
            </ol>
            
            <h1>无序列表</h1>
            <ul data-role="listview">
                <li><a href="#">列表项</a></li>
                <li><a href="#">列表项</a></li>
                <li><a href="#">列表项</a></li>
            </ul>
        </div>
    </div>

如需为列表添加圆角和外边距，请使用 data-inset="true" 属性：

　　<div data-role="page" id="pageone">
        <div data-role="content">
            <h1>不带data-inset="true"属性</h1>
            <ol data-role="listview">
                <li><a href="#">列表项</a></li>
                <li><a href="#">列表项</a></li>
                <li><a href="#">列表项</a></li>
            </ol>
            
            <h1>带data-inset="true"属性</h1>
            <ul data-role="listview" data-inset="true">
                <li><a href="#">列表项</a></li>
                <li><a href="#">列表项</a></li>
                <li><a href="#">列表项</a></li>
            </ul>
        </div>
    </div>

给文字加上超链接默认地，列表中的列表项会自动转换为按钮（无需 data-role="button"）。如果没有加超链接那么是只读列表，就不是按钮，不可点击

2、列表分隔符

列表分隔符（List Dividers）用于把项目组织和组合为分类/节。

如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性：

<div data-role="page" id="pageone">
        <div data-role="content">
            <h1>列表分隔符</h1>
            <ul data-role="listview">
                <li data-role="list-divider"><a href="#">广州</a></li>
                <li><a href="#">清远</a></li>
                <li data-role="list-divider">湛江</li>
                <li>深圳</li>
                <li data-role="list-divider">珠海</li>
                <li>中山</li>
                <li data-role="list-divider">东莞</li>
                <li>河源</li>
                <li data-role="list-divider">梅州</li>
            </ul>
        </div>
    </div>

如果您的列表是字母顺序的（比如通讯录），jQuery Mobile 自动添加恰当的分隔符，通过在 <ol> 或 <ul> 元素上设置 data-autodividers="true" 属性：

<div data-role="page" id="pageone">
        <div data-role="content">
            <h1>列表分隔符</h1>
            <ul data-role="listview" data-autodividers="true" data-inset="true">
                <li><a href="#">Adele</a></li>
                <li><a href="#">Agnes</a></li>
                <li><a href="#">Albert</a></li>
                <li><a href="#">Billy</a></li>
                <li><a href="#">Bob</a></li>
                <li><a href="#">Calvin</a></li>
                <li><a href="#">Cameron</a></li>
                <li><a href="#">Chloe</a></li>
                <li><a href="#">Christina</a></li>
                <li><a href="#">Diana</a></li>
                <li><a href="#">Gabriel</a></li>
                <li><a href="#">Glen</a></li>
                <li><a href="#">Ralph</a></li>
                <li><a href="#">Valarie</a></li>
            </ul>
        </div>
    </div>

data-autodividers="true" 属性通过对列表项文本的首字母进行大写来创建分隔符。

3、搜索过滤器

如需在列表中添加搜索框，请使用 data-filter="true" 属性：

<div data-role="page" id="pageone">
        <div data-role="content">
            <h2>我的通讯录</h2>
            <ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true">
                <li><a href="#">Adele</a></li>
                <li><a href="#">Agnes</a></li>
                <li><a href="#">Albert</a></li>
                <li><a href="#">Billy</a></li>
                <li><a href="#">Bob</a></li>
                <li><a href="#">Calvin</a></li>
                <li><a href="#">Cameron</a></li>
                <li><a href="#">Chloe</a></li>
                <li><a href="#">Christina</a></li>
                <li><a href="#">Diana</a></li>
                <li><a href="#">Gabriel</a></li>
                <li><a href="#">Glen</a></li>
                <li><a href="#">Ralph</a></li>
                <li><a href="#">Valarie</a></li>
            </ul>
        </div>
    </div>

默认地，搜索框中的文本是 "Filter items..."。

如需修改默认文本，请使用 data-filter-placeholder 属性：

<div data-role="page" id="pageone">
        <div data-role="content">
            <h2>我的通讯录</h2>
            <ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名 ...">
                <li><a href="#">Adele</a></li>
                <li><a href="#">Agnes</a></li>
                <li><a href="#">Albert</a></li>
                <li><a href="#">Billy</a></li>
                <li><a href="#">Bob</a></li>
                <li><a href="#">Calvin</a></li>
                <li><a href="#">Cameron</a></li>
                <li><a href="#">Chloe</a></li>
                <li><a href="#">Christina</a></li>
                <li><a href="#">Diana</a></li>
                <li><a href="#">Gabriel</a></li>
                <li><a href="#">Glen</a></li>
                <li><a href="#">Ralph</a></li>
                <li><a href="#">Valarie</a></li>
            </ul>
        </div>
    </div>

二、jQuery Mobile 列表内容

1、jQuery Mobile 列表缩略图

对于大于 16x16px 的图像，请在链接中添加 <img> 元素。

jQuery Mobile 将自动把图像调整至 80x80px：

jQuery Mobile 列表,布布扣,bubuko.com