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:企业级应用,关注软件开发领域 ...
随机推荐
- Netsharp快速入门(之11) 销售管理(开发销售订单工作区)
作者:秋时 杨昶 时间:2014-02-15 转载须说明出处 4.3 销售订单开发 4.3.1 部件工作区设置 1.创建部件工作区,建工作区向导中要注意勾选组合并系部分.具体要建立的部 ...
- char a[] = "hello"; char c[] = {'h','e','l','l','o'}; int b[] = {1, 2, 3, 4, 5};的长度区别，及内存中空间开辟情况
1, char a[] = "hello"; char c[] = {'h','e','l','l','o'}; int b[] = {1, 2, 3, 4, 5}; 数组是开辟一 ...
- Dijkstra算法亲自实践
按路径长度递增次序产生算法: 把顶点集合V分成两组: (1)S:已求出的顶点的集合(初始时只含有源点V0) (2)V-S=T:尚未确定的顶点集合 将T中顶点按递增的次序加入到S中,保证: (1)从源点 ...
- Reveal 破解
永久试用Reveal,只需要打开 ~/Library/Preferences/com.ittybittyapps.Reveal.plist 把IBAApplicationPersistenceData ...
- java 解决JFrame不能设置背景色的问题 分类： Java Game 2014-08-15 09:48 119人阅读 评论(0) 收藏
这段时间比较多,于是写一写JAVA的一些IT技术文章.如有JAVA高手请加QQ:314783246,互相讨论. 在Java的GUI设计中,Frame和JFrame两者之间有很大差别,上次刚学时编一个窗 ...
- 【bzoj1004】[HNOI2008]Cards
1004: [HNOI2008]Cards Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2928 Solved: 1754[Submit][Sta ...
- sampleGradient(sampler,uv,dds,ddy)
vsm里面用这个梯度采样 采放了z,z*z的shadowmap 这种采样方式和普通sample有什么区别
- .NET设计模式（14）：代理模式（Proxy Pattern）（转）
摘要:在软件系统中,有些对象有时候由于跨越网络或者其他的障碍,而不能够或者不想直接访问另一个对象,如果直接访问会给系统带来不必要的复杂性,这时候可以在客户程序和目标对象之间增加一层中间层,让代理对象来 ...
- uialertview 改变文字显示位置
- (void)willPresentAlertView:(UIAlertView *)alertView{ UIView * view = [alertView.subviews objectAtI ...
- HTML页面加载和解析流程详细介绍
浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元 ...