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:企业级应用,关注软件开发领域 ...
随机推荐
- 使用Java Service Wrapper在Linux下配置Tomcat应用
前言 Java Service Wrapper是Tanuki Software的一个产品,可以将Java应用注册成Windows或Linux服务,使其可以随系统开机启动,同时可以监控Java应用的状态 ...
- footer居底
结构部分: <div class="container"> <div class="header">header</div> ...
- hibernate--OneToOne
一对一(one to one) 单向关联映射 两个对象是一对一的的关系. 有两种策略可以实现一对一的关联映射 l 主键关联:即让两个对象具有相同的主键值,以表明他们之间的一对一的对应关系;数据库表不 ...
- orbis 链接 .a的问题
orbis-clang.exe :error: no such file or directory : libppfxd_delta.a 这个东西真是见鬼 明明在那里就是说找不到 在依赖里libppf ...
- Nginx负载均衡介绍
Nginx真心牛逼 nginx不单可以作为强大的web服务器,也可以作为一个反向代理服务器,而且nginx还可以按照调度规则实现动态.静态页面的分离,可以按照轮询.ip哈希.URL哈希.权重等多种方式 ...
- 7件你不知道但可以用CSS做的事
不管你信不信,CSS和JavaScript开始重叠,就像CSS增加了更多功能一新.在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时,人们对于JavaScript和CSS是如 ...
- centos msyql 安装与配置
Mysql具有简单易学.体积小等优点,深受编程开发初学者的喜爱 工具/原料 接入Internet的Centos计算机 安装Mysql 1 Centos 6.6下安装Mysql很简单, yum list ...
- c# 获取mac地址的2种方法
和大家分享下,互相学习一下吧.第一个获取方法好像获取不到mac地址,我用了第二种方法可以获取到.希望知道的可以说下为什么. 1,首先要添加引用:using System.Management; 2,代 ...
- iOS-CAEmitterLayer（粒子效果）
扩展:https://github.com/lichtschlag/Dazzle ; , , , ); , ); .f; .f; ; .f; .f; ...
- POJ 1665
#include<iostream>//chengdacaizi 08.11.12 #include<iomanip> #define p 3.1415927 using na ...