》》jqurey mobile 初
<!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 初的更多相关文章
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- jQuery Mobile的默认配置项具体解释,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/35258199 学习jQuery Mob ...
- 修改JQM的默认配置属性
从本文开始,使用 jQuery Mobile 与 HTML5 开发 Web App 系列将会进入第三部分——jQuery Mobile 事件与方法,这其中将会利用之前所讲述的 jQuery Mobil ...
- JQM事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- protobuf初体验
概念介绍 Protocol buffers 是google公司的与语言无关.与平台无关的.可扩张的为序列化话结构数据,就像xml一样,办事更加的小巧.快速.简单.Protocol buffers 目前 ...
- 【初探移动前端开发05】jQuery Mobile (整合版)
前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...
- 【初探移动前端开发05】jQuery Mobile (下)
前言 继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...
- 【初探移动前端开发03】jQuery Mobile（上）
前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...
- jQuery mobile 开发问题记录
一.动态加载页面问题 1.存在这样一个页面布局: main.html 为主界面A,B为该页面中的三个page,其中A为splitview左部分页面,B为右半部页面 a1.html 为一个独立的页面 a ...
随机推荐
- Android模仿iOS iMessages10照片选择器的实现
不知不觉已经接近半年多没有写过博客了,这段时间,也是我刚好毕业走出校园的时间,由于学习工作的原因,一直没有真正静下心来写下些什么东西.这个星期刚入了小米笔记本pro的坑,本着新电脑新生活的理念嘻嘻-- ...
- Cisco VPN Client Win10无法使用的解决办法
http://files.cnblogs.com/files/Flyear/VPN_Win10_ByDuke.zip 1. 关闭系统所有窗口,控制面板一定要关闭. 2. 运行winfix.exe, 按 ...
- Spring IOC容器分析(2) -- BeanDefinition
上文对Spring IOC容器的核心BeanFactory接口分析发现:在默认Bean工厂DefaultListableBeanFactory中对象不是以Object形成存储,而是以BeanDefin ...
- kafka学习笔记2:生产者
这次的笔记主要记录一下kafka的生产者的使用和一些重要的参数. 文中主要截图均来自kafka权威指南 主要涉及到两个类KafkaProducer和ProducerRecord. 总览 生产者的主要架 ...
- 如何自学Python？
关于如何自学Python,我也是有话说的.来看看? Python具有丰富和强大的类库,常被称为胶水语言.而且语法简洁而清晰,功能强大且简单易学,因而得到了广泛应用和支持.它特别适合专家使用,也非常适 ...
- ADO.NET中SqlCommand对数据库操作
我们要不断地进行数据库的读写,那么ExecuteNonQuery(),ExecuteReader()与ExecuteScalar()就是我们在对数据库进行操作时要用到的,下面我来依次认识一下: ...
- 《天书夜读：从汇编语言到windows内核编程》八 文件操作与注册表操作
1)Windows运用程序的文件与注册表操作进入R0层之后,都有对应的内核函数实现.在windows内核中,无论打开的是文件.注册表或者设备,都需要使用InitializeObjectAttribut ...
- GitLab搭建详细过程
一.前提 系统:Centos 6.5 软件版本:gitlab-7.8.4 Selinux:关闭 防火墙规则:先清空(搭建好了后续自己添加相关放行规则) 二.yum源配置和相关依赖包 1.添加epel源 ...
- Qemu 简述
Qemu 架构 Qemu 是纯软件实现的虚拟化模拟器,几乎可以模拟任何硬件设备,我们最熟悉的就是能够模拟一台能够独立运行操作系统的虚拟机,虚拟机认为自己和硬件打交道,但其实是和 Qemu 模拟出来的硬 ...
- 设计模式的征途—12.享元（Flyweight）模式
现在在大力推行节约型社会,“浪费可耻,节俭光荣”.在软件系统中,有时候也会存在资源浪费的情况,例如,在计算机内存中存储了多个完全相同或者非常相似的对象,如果这些对象的数量太多将导致系统运行代价过高.那 ...