码迷,mamicode.com
首页 > Web开发 > 详细

jQueryMobile的组件之列表(listview)

时间:2015-08-30 01:00:09      阅读:242      评论:0      收藏:0      [点我收藏+]

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

在iphone6中的效果:

技术分享

技术分享



版权声明:本文为博主原创文章,未经博主允许不得转载。

jQueryMobile的组件之列表(listview)

标签:前端   框架   jquerymobile   

原文地址:http://blog.csdn.net/bboyjoe/article/details/48094401

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!