标签：前端 框架 jquerymobile
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>
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：前端 框架 jquerymobile
原文地址：http://blog.csdn.net/bboyjoe/article/details/48094401
