您的位置：首页 > Web前端 > JQuery

jQueryMobile的组件之列表(listview)

2015-08-30 00:23 761 查看
data-role="listview"——指明列表元素为listview组件；

data-filter="true"——设置listview具有过滤属性；

data-inset="true"——设置listview具有过滤之后返回插入的特性；

ui-filterable——设置表单具备过滤属性；

data-type="search"——设置input为搜索框；

data-filter-reveal="true"——设置listview组件初始状态为过滤隐藏的状态；

data-input——指明listview组件与特定搜索框关联；

data-autodividers="true"——设置listview具备类似通讯录的效果，即以首字母分类；

更多细节请查看jQueryMobile手册

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>listview示例</title>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page"  id="page_one">
<div data-role="header" data-position="fixed">
<h1>欢迎来到主页</h1>
</div>
<div data-role="content">
<!--设置无序列表-->
<ul data-role="listview">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
<br>
<br>
<br>
<!--设置有序列表-->
<ol data-role="listview">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ol>
<br>
<br>
<br>
<!--设置过滤属性-->
<ul data-role="listview" data-filter="true" data-inset="true">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>

<!--设置搜索寻找匹配项-->
<form class="ui-filterable">
<input id="autoinput" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
<br>
<br>
<br>
<!--设置通讯录效果，按包含内容查找-->
<ul data-role="listview" data-filter="true" data-autodividers="true" data-inset="true">
<li><a href="#">Apple</a></li>
<li><a href="#">Berry</a></li>
<li><a href="#">Black</a></li>
<li><a href="#">Cindy</a></li>
<li><a href="#">Coder</a></li>
<li><a href="#">Dog</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>底部</h1>
</div>
</div>

</body>
</html>


在iphone6中的效果：



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航