jqueryMobile列表
data-role="listview"
data-role="listview"
如需为列表添加圆角和外边距,请使用 data-inset="true" 属性:
实例
<ul data-role="listview" data-inset="true"
>
列表中的列表项会自动转换为按钮(无需 data-role="button")
列表分隔符 (data-role="divider")
data-role="list-divider"
data-autodividers="true"
<li><a href="#">Adam</a></li> <li><a href="#">Angela</a></li> <li><a href="#">Bill</a></li> <li><a href="#">Calvin</a></li> ... </ul>
像列表中添加搜索框
<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名"
>
列表分隔符
列表分隔符(List Dividers)用于把项目组织和组合为分类/节。
如需规定列表分隔符,请向 <li> 元素添加 data-role="list-divider" 属性:
更改列表图标
可折叠的列表
<div data-role="content">
<div data-role="collapsible">
<h4>A</h4>
<ul data-role="listview">
<li><a href="#">Adam</a></li>
<li><a href="#">Angela</a></li>
</ul>
</div>
<div data-role="collapsible">
<h4>B</h4>
<ul data-role="listview">
<li><a href="#">Bill</a></li>
<li><a href="#">Bob</a></li>
</ul>
</div>
<div data-role="collapsible">
<h4>C</h4>
<ul data-role="listview">
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Christina</a></li>
</ul>
</div>
</div>
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步