4、jQueryMobile基本使用Listview(二)

Sian · 发表于 2016-2-15 15:33:32

本帖最后由 Sian 于 2016-2-15 17:43 编辑

4.pic.jpg

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
         
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
         
<body>
<!-- data-role="page"代表的是一个页面，当前页面只会显示该div内的内容 -->
<div data-role="page">
<!-- data-role="header"表示的是表头信息，jQuery会自动加载相关样式 -->
<div data-role="header"><h1>页头信息</h1></div>
<!-- data-role="content"表示的是内容信息，jQuery会自动加载相关样式 -->
<div data-role="content">

    <ul data-role="listview">
        <li>
                <!-- 固定搭配img、h2、p这三个标签-->
            <a href="#">
                    <!-- 图片尺寸大于80x80才能填充完整 -->
                    <img src="http://www.yusian.com/download/sian.png"/>
                    <h2>标题</h2>
                    <p>详细内容</p>
            </a>
        </li>
    </ul>

    <h2>我的邮件</h2>
    <ul data-role="listview">
            <!-- class为ui-li-cout的样式可以生成计数的效果 -->
            <li><a href="#">收件箱<span class="ui-li-count">35</span></a></li>
            <li><a href="#">发件箱<span class="ui-li-count">42</span></a></li>
            <li><a href="#">垃圾篓<span class="ui-li-count">0</span></a></li>
    </ul>
    
    
</div>
<!-- data-role="footer"表示的是页脚底部信息，jQuery会自动加载相关样式 -->
<div data-role="footer"><h4>页脚注释</h4></div>
</div>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQueryMobile] 4、jQueryMobile基本使用Listview(二)