标签:前端 框架 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