jQuery Mobile 列表视图

列表视图：是一种标准的HTML列表，分为有序列表（<ol>）和无序列表（<ul>）

创建： data-role="listview" 默认地，列表中的列表项 <a>会自动转换为按钮（无需data-role="button"）

为列表添加圆角和外边距：data-inset="true"

e.g.

<div data-role="content">

<h2>有序列表：</h2>

<ol data-role="listview" data-inset="true">

<li><a href="#">item1</a></li>

<li><a href="#">item2</a></li>

</ol>

<h2>无序列表：</h2>

<ul data-role="listview">

<li><a href="#">item1</a></li>

<li><a href="#">item2</a></li>

</ul>

</div>

列表分隔符：data-role="list-divider"

e.g.

<ul data-role="listview">
<li data-role="list-divider">欧洲</a></li>
<li><a href="#">法国</a></li>
<li><a href="#">德国</a></li>
</ul>
data-autodividers="true" // 通过对列表项文本的首字母进行大写来自动创建分隔符
e.g.
<ul data-role="listview" data-autodividers="true">
<li><a href="#">Angela</a></li>
<li><a href="#">Boby</a></li>
<li><a href="#">Mary</a></li>
<li><a href="#">Silina</a></li>
</ul>

搜索过滤器：data-filter="true" 会在列表上方添加搜索框
data-filter-placeholder="搜索框中的文本" //可自定义，默认是“Filter items...”
e.g.
<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true"
data-filter-placeholder="输入搜索条件">
<li>.....</li>......
</ul>

创建没有链接的列表：去掉<a>，简单使用文本代替内容
e.g.
<ul data-role="listview">
<li>item1</li>
<li>item2</li>
</ul>