jquerymobile UI使用
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head>
<body>
<div data-role="page" id="home">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content">
<div style="">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2011/04/26/lakers/Lakers01.jpg">
</div>
<div data-role="navbar" data-iconpos="top" data-position="fixed">
<ul>
<li>
<a href="#page1" data-transition="flow" data-theme="a" data-icon="grid">
About Us
</a>
</li>
<li>
<a href="#page2" data-transition="flow" data-theme="a" data-icon="star">
Contact
</a>
</li>
<li>
<a href="#page3" data-transition="flow" data-theme="a" data-icon="info">
History
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<a data-role="button" data-transition="flow" href="#home" data-icon="home"
data-iconpos="left" class="ui-btn-right">
Home
</a>
<h3>
Header
</h3>
</div>
<div data-role="content">
<div style="">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2011/04/26/lakers/Lakers02.jpg">
</div>
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Divider
</li>
<li data-theme="">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-theme="">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-theme="">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-role="list-divider" role="heading">
Divider
</li>
</ul>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>
Section Header
</h3>
<div style=" text-align:center">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
</div>
</div>
</div>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>
Section Header
</h3>
<div style=" text-align:center">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
</div>
</div>
</div>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>
Section Header
</h3>
<div style=" text-align:center">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
</div>
</div>
</div>
<div data-role="navbar" data-iconpos="top" data-position="fixed">
<ul>
<li>
<a href="#page1" data-transition="flow" data-theme="a" data-icon="grid">
About Us
</a>
</li>
<li>
<a href="#page2" data-transition="flow" data-theme="a" data-icon="star">
Contact
</a>
</li>
<li>
<a href="#page3" data-transition="flow" data-theme="a" data-icon="info">
History
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-theme="a" data-role="header">
<a data-role="button" data-transition="flow" href="#home" data-icon="home"
data-iconpos="left" class="ui-btn-right">
Home
</a>
<h3>
Header
</h3>
</div>
<div data-role="content">
<div style="">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2011/04/26/lakers/Lakers03.jpg">
</div>
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Divider
</li>
<li data-theme="">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-theme="">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-theme="">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-role="list-divider" role="heading">
Divider
</li>
</ul>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>
Section Header
</h3>
<div style=" text-align:center">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
</div>
</div>
</div>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>
Section Header
</h3>
<div style=" text-align:center">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
</div>
</div>
</div>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>
Section Header
</h3>
<div style=" text-align:center">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
</div>
</div>
</div>
<div data-role="navbar" data-iconpos="top" data-position="fixed">
<ul>
<li>
<a href="#page1" data-transition="flow" data-theme="a" data-icon="grid">
About Us
</a>
</li>
<li>
<a href="#page2" data-transition="flow" data-theme="a" data-icon="star">
Contact
</a>
</li>
<li>
<a href="#page3" data-transition="flow" data-theme="a" data-icon="info">
History
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-theme="a" data-role="header">
<a data-role="button" data-transition="flow" href="#home" data-icon="home"
data-iconpos="left" class="ui-btn-right">
Home
</a>
<h3>
Header
</h3>
</div>
<div data-role="content">
<div style="">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2011/04/26/lakers/Lakers04.jpg">
</div>
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Divider
</li>
<li data-theme="">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-theme="">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-theme="">
<a href="#page1" data-transition="slide">
Button
</a>
</li>
<li data-role="list-divider" role="heading">
Divider
</li>
</ul>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>
Section Header
</h3>
<div style=" text-align:center">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
</div>
</div>
</div>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>
Section Header
</h3>
<div style=" text-align:center">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
</div>
</div>
</div>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>
Section Header
</h3>
<div style=" text-align:center">
<img style="width: 100%; height: 100%" src="http://bizhi.zhuoku.com/2013/06/10/zhuoku/zhuoku139.jpg">
</div>
</div>
</div>
<div data-role="navbar" data-iconpos="top" data-position="fixed">
<ul>
<li>
<a href="#page1" data-transition="flow" data-theme="a" data-icon="grid">
About Us
</a>
</li>
<li>
<a href="#page2" data-transition="flow" data-theme="a" data-icon="star">
Contact
</a>
</li>
<li>
<a href="#page3" data-transition="flow" data-theme="a" data-icon="info">
History
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
jquerymobile UI使用的更多相关文章
- Index
我主要在研究.NET/C# 实现 PC IMERP 和 Android IMERP ,目的在解决企业通信中遇到的各类自动化问题 分布式缓存框架: Microsoft Velocity:微软自家分布 ...
- GitHub上整理的一些工具
技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应用,关注软件开发领域 ...
- GitHub上整理的一些工具[转载]
Source:http://segmentfault.com/q/1010000002404545 技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddi ...
- GitHub 开源工具整理
技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应用,关注软件开发领域 ...
- GitHub上整理的一些工具，求补充
http://segmentfault.com/q/1010000002404545 技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MS ...
- GitHub上整理的一些资料（转）
技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应用,关注软件开发领域 ...
- GitHub上整理
GitHub上整理 技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应 ...
- Web前端相关资源
Web前端相关 GRUNT: js task runner Sea.js: js模块化 knockout.js:MVVM开发前台,绑定技术 Angular.js: 使用超动感HTML & JS ...
- GitHub上整理的一些资料
技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应用,关注软件开发领域 ...
随机推荐
- C# 串口通信总结
在C#串口通信开发过程中有的产家只提供通信协议,这时候开发人员要自己根据协议来封装方法,有的产家比较人性化提供了封装好的通信协议方法供开发人员调用. 1.只提供通信协议(例如,今年早些时候开发的出钞机 ...
- iOS网络传输Delegate不被触发的本质原因
NSURLSession一共有四种Delegate (文后附表有Session和SessionTask分类表格) NSURLSessionDelegate, NSURLSessionDownloadD ...
- Dijkstra算法亲自实践
按路径长度递增次序产生算法: 把顶点集合V分成两组: (1)S:已求出的顶点的集合(初始时只含有源点V0) (2)V-S=T:尚未确定的顶点集合 将T中顶点按递增的次序加入到S中,保证: (1)从源点 ...
- hdu 4685 二分匹配+强连通分量
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4685 题解: 这一题是poj 1904的加强版,poj 1904王子和公主的人数是一样多的,并且给出 ...
- 临时文档9--dfs
#include<iostream> #include<stdio.h> #include<math.h> #include<string.h> usi ...
- max_flow(Edmond_Karp) 分类： ACM TYPE 2014-09-02 10:47 92人阅读 评论(0) 收藏
#include <cstdio> #include <iostream> #include <cstring> #include<queue> usi ...
- Segment Tree 扫描线 分类： ACM TYPE 2014-08-29 13:08 89人阅读 评论(0) 收藏
#include<iostream> #include<cstdio> #include<algorithm> #define Max 1005 using nam ...
- Science：给青年科研工作者的忠告
- 用fscanf()从文件取数据时，如何判断文件结束
例子:从键盘输入若干行字符(每行长度不等),输入后把它们存储到一磁盘文件中.再从该文件中读入这些数据,将其中小写字母转换成大写字母后再显示屏上输出. 有两种方法 1.使用feof()函数 #inclu ...
- uva12534 Binary Matrix 2(最小费用最大流)
http://blog.csdn.net/qq564690377/article/details/17082055 做的时候觉得明显是费用流,但是真的不知道怎么建图,看了上面的博客会稍微清晰一点.后面 ...