jquery mobile 学习笔记——listview

参考资料：jquery mobile 官方文档API

使用data-role="listview"属性可以直接制作列表,代码如下

<ul data-role="listview">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

结合<ul>标签或者<ol>标签实现列表效果，<ol>的效果就是添加有序数列

常用属性：

data-inset

data-filter

data-role="list-divider"

下面这个是使用listview实现的效果

可折叠列表 data-role="collapsible"

<div data-role="collapsible" data-theme="b" data-content-theme="b">
    <ul data-role="listview" data-filter="true">
        <li><a href="index.html">A</a></li>
        <li><a href="index.html">B</a></li>
        <li><a href="index.html">C</a></li>
        <li><a href="index.html">D</a></li>
        <li><a href="index.html">E</a></li>
        <li><a href="index.html">F</a></li>
        <li><a href="index.html">G</a></li>
        <li><a href="index.html">H</a></li>
        <li><a href="index.html">I</a></li>
        <li><a href="index.html">J</a></li>
    </ul>
</div>

可折叠列表 使用data-role="collapsible-set" 包含多个data-role="collapsible" 可设置展开项目，其他的自动折叠.

下面这个是使用collapsible实现的作品，其中日期下面是具体的时段,动态数据