<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />

        <style>

            .liwid>li {

                border: none !important;

                margin-bottom: 2px !important;

            }

        </style>

    </head>

    <body>

        <div data-role="page" id="mail">

            <div data-role="panel" id="cai">

                <ul class="ui-grid-d">

                    <a data-icon="info"></a>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

                    <li>5</li>

                    <li>6</li>

                </ul>

            </div>

            <div data-role="header">

                <a href="#cai" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext"></a>

                <h3>消息</h3>

                <a href="#" class="ui-btn ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>

            </div>

            <div data-role="main" class="ui-content">

                <input type="search" name="search">

            </div>

            <div data-role="content">

                <div data-role="main" class="ui-content">

                    <ul data-role="listview" class="liwid">

                        <li>

                            <a href="#"><img src="img/QQTX.jpg">

                                <h2>小科</h2>

                                <p>000</p>

                                <span class="ui-li-count">25</span></a>

                        </li>

                        <li>

                            <a href="#"><img src="img/QQTX.jpg">

                                <h2>user</h2>

                                <p>000</p>

                                <span class="ui-li-count">12</span></a>

                        </li>

                        <li>

                            <a href="#"><img src="img/QQTX.jpg">

                                <h2>user</h2>

                                <p>000</p>

                                <span class="ui-li-count">5</span></a>

                        </li>

                    </ul>

                </div>

            </div>

            <div data-role="footer" data-position="fixed" data-fullscreen="false">

                <div data-role="navbar">

                    <ul>

                        <li>

                            <a href="#mail" data-icon="comment" data-transition="none">消息</a>

                        </li>

                        <li>

                            <a href="#first" data-icon="user" data-transition="none">好友</a>

                        </li>

                        <li>

                            <a href="#star" data-icon="star" data-transition="none">动态</a>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

        <div data-role="page" id="first">

            <div data-role="panel" id="cai2">

                <ul class="ui-grid-d">

                    <a data-icon="info"></a>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

                    <li>5</li>

                    <li>6</li>

                </ul>

            </div>

            <div data-role="header">

                <a href="#cai2" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext"></a>

                <h3>好友列表</h3>

                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-notext">添加</a>

            </div>

            <div data-role="main" class="ui-content">

                <input type="search" name="search">

            </div>

            <div data-role="content">

                <div data-role="navbar" data-position="inline">

                    <ul>

                        <li>好友</li>

                        <li>群组</li>

                        <li>多人聊天</li>

                        <li>设备</li>

                        <li>通讯录</li>

                    </ul>

                </div>

                <div data-role="main" class="ui-content">

                    <div data-role="collapsibleset">

                        <div data-role="collapsible" data-collapsed-icon="carat-u" data-expanded-icon="carat-d">

                            <h3>我的好友 <span> 8/90</span></h3>

                            <p>好友</p>

                        </div>

                        <div data-role="collapsible" data-collapsed-icon="carat-u" data-expanded-icon="carat-d">

                            <h3>我的好友 <span> 8/90</span></h3>

                            <p>好友</p>

                        </div>

                        <div data-role="collapsible" data-collapsed-icon="carat-u" data-expanded-icon="carat-d">

                            <h3>我的好友 <span> 8/90</span></h3>

                            <p>好友</p>

                        </div>

                        <div data-role="collapsible" data-collapsed-icon="carat-u" data-expanded-icon="carat-d">

                            <h3>我的好友 <span> 8/90</span></h3>

                            <p>好友</p>

                        </div>

                    </div>

                </div>

            </div>

            <div data-role="footer" data-position="fixed" data-fullscreen="false">

                <div data-role="navbar">

                    <ul>

                        <li>

                            <a href="#mail" data-icon="comment" data-transition="none">消息</a>

                        </li>

                        <li>

                            <a href="#first" data-icon="user" data-transition="none">好友</a>

                        </li>

                        <li>

                            <a href="#star" data-icon="star" data-transition="none">动态</a>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

        <div data-role="page" id="star">

            <div data-role="panel" id="cai3">

                <ul class="ui-grid-d">

                    <a data-icon="info"></a>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

                    <li>5</li>

                    <li>6</li>

                </ul>

            </div>

            <div data-role="header">

                <a href="#cai3" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext"></a>

                <h3>动态</h3>

                <a href="#" class="ui-btn ui-corner-all ui-btn-icon-notext">更多</a>

            </div>

            <div data-role="main" class="ui-content">

                <input type="search" name="search">

                <div data-role="navbar">

                    <ul>

                        <li>

                            <a href="#" data-icon="star" data-transition="none">好友动态</a>

                        </li>

                        <li>

                            <a href="#" data-icon="location" data-transition="none" >附近</a>

                        </li>

                        <li>

                            <a href="#" data-icon="cloud" data-transition="none" >兴趣部落</a>

                        </li>

                    </ul>

                </div>

            </div>

            <div data-role="content">

                <div data-role="main" class="ui-content">

                    <ul data-role="listview" class="liwid">

                        <li>

                            <a href="#"><img src="img/QQTX.jpg">

                                <h2>京东购物</h2>

                            </a>

                        </li>

                        <li>

                            <a href="#"><img src="img/QQTX.jpg">

                                <h2>阅读</h2>

                            </a>

                        </li>

                        <li>

                            <a href="#"><img src="img/QQTX.jpg">

                                <h2>动漫</h2>

                            </a>

                        </li>

                    </ul>

                </div>

            </div>

            <div data-role="footer" data-position="fixed" data-fullscreen="false">

                <div data-role="navbar">

                    <ul>

                        <li>

                            <a href="#mail" data-icon="comment" data-transition="none" data-iconpos="left">消息</a>

                        </li>

                        <li>

                            <a href="#first" data-icon="user" data-transition="none">好友</a>

                        </li>

                        <li>

                            <a href="#star" data-icon="star" data-transition="none">动态</a>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </body>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>

    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>

</html>

》》jqurey mobile 初的更多相关文章

  1. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  2. jQuery Mobile的默认配置项具体解释,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/35258199 学习jQuery Mob ...

  3. 修改JQM的默认配置属性

    从本文开始,使用 jQuery Mobile 与 HTML5 开发 Web App 系列将会进入第三部分——jQuery Mobile 事件与方法,这其中将会利用之前所讲述的 jQuery Mobil ...

  4. JQM事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  5. protobuf初体验

    概念介绍 Protocol buffers 是google公司的与语言无关.与平台无关的.可扩张的为序列化话结构数据,就像xml一样,办事更加的小巧.快速.简单.Protocol buffers 目前 ...

  6. 【初探移动前端开发05】jQuery Mobile (整合版)

    前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...

  7. 【初探移动前端开发05】jQuery Mobile (下)

    前言 继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...

  8. 【初探移动前端开发03】jQuery Mobile（上）

    前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...

  9. jQuery mobile 开发问题记录

    一.动态加载页面问题 1.存在这样一个页面布局: main.html 为主界面A,B为该页面中的三个page,其中A为splitview左部分页面,B为右半部页面 a1.html 为一个独立的页面 a ...

随机推荐

  1. 关于C++中vector和set使用sort方法进行排序

    C++中vector和set都是非常方便的容器, sort方法是algorithm头文件里的一个标准函数,能进行高效的排序,默认是按元素从小到大排序 将sort方法用到vector和set中能实现多种 ...

  2. HTML5与phonegap接口对比

    HTML5与phonegap接口对比 接口 HTML5 phonegap 差异 地理定位 geolocation 单次定位: navigator.geolocation.getCurrentPosit ...

  3. 入门到熟练-Eclipse开发工具

    1. 概述 本文用于Eclipse说明开发功能的各种配置.希望可以帮助到对于Eclipse工具设置不同熟练的朋友,快速上手Eclipse开发工具. 2. Eclipse的配置 2.1. 设置Eclip ...

  4. 从零开始搭建Vue组件库 VV-UI

    前言: 前端组件化是当今热议的话题之一,也是我们在开发单页应用经常会碰到的一个问题,现在我们有了功能非常完善的Element-UI.各个大厂也相继宣布开源XXX-UI.但是也会存在一些问题,比如每个公 ...

  5. 使用java生成mapbox-gl可读的vector tile

    概述 mapbox-gl主要数据源来自mapbox vector tile,本文就是要阐述怎样把postgresql中的地理空间数据转换成vector tile,流程图如下: 配置 该工程采用spri ...

  6. 二:Redis快速入门及应用

    Redis的使用难吗?不难,Redis用好容易吗?不容易.Redis的使用虽然不难,但与业务结合的应用场景特别多.特别紧,用好并不容易.我们希望通过一篇文章及Demo,即可轻松.快速入门并学会应用. ...

  7. ssh远程登录,禁止root登录

    1,useradd xiaobingpasswd xiaobing (设置密码) 2,禁止root登陆,修改 /etc/ssh/sshd_configPermitRootLogin yes 改为 Pe ...

  8. 使用dropwizard(3)-加入DI-dagger2

    前言 习惯了Spring全家桶,对spring的容器爱不释手.使用dropwizard,看起来确实很轻,然而,真正使用的时候不得不面临一个问题.我们不可能一个resource就能把所有的业务逻辑囊括! ...

  9. StackExchange.Redis学习笔记(四) 事务控制和Batch批量操作

    Redis事物 Redis命令实现事务 Redis的事物包含在multi和exec(执行)或者discard(回滚)命令中 和sql事务不同的是,Redis调用Exec只是将所有的命令变成一个单元一起 ...

  10. 九、VueJs 填坑日记之在项目中使用jQuery

    很多人学习 js 都是从 jQuery 开始的,我也不例外.有时候进行一些操作的时候,还是感觉 jQuery 比较好用,那么,我们如何在项目中使用 jQuery 呢?这篇博文带你实践. 引用 jQue ...