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#制作高仿360安全卫士窗体<二>
继上次C#制作高仿360安全卫士窗体<一>发布之后响应还不错,我的博客放肆雷特也来了不少的新朋友,在这里先谢谢大家的支持!我自己也反复看了一下觉得对不起大家,写的非常乱而且很少文字介绍.在 ...
- android 开发Parcelable 怎么传值ArrayList
public class TradeEntity implements Parcelable{ public String id; //有关进度条的参数 ArrayList<TradeState ...
- android 下载图片出现SkImageDecoder::Factory returned null，BitmapFactory.Options压缩
网上有很多说是因为没有采用HttpClient造成的,尼玛,我改成了HttpClient 请求图片之后还是会出现SkImageDecoder::Factory returned null, 但是直接使 ...
- 【Sort List】cpp
题目: Sort a linked list in O(n log n) time using constant space complexity. 代码: /** * Definition for ...
- spring framework项目源码github托管地址
方法一:直接下载,github托管地址:http://repo.spring.io/simple/libs-release-local/org/springframework/spring/ 方法二: ...
- Leetcode#109 Convert Sorted List to Binary Search Tree
原题地址 跟Convert Sorted Array to Binary Search Tree(参见这篇文章)类似,只不过用list就不能随机访问了. 代码: TreeNode *buildBST( ...
- short-path problem (Spfa) 分类： ACM TYPE 2014-09-02 00:30 103人阅读 评论(0) 收藏
#include <cstdio> #include <iostream> #include <cstring> #include <queue> #i ...
- shadowmap 及优化
对于子阴影的走样, 条纹 开zbias resterizeState zbias = 1000...大概这样 另一个方法是画背面 backface是指一个人肚子那面,后背那面 而不是肚子的里面那层 所 ...
- spring mvc Controller与jquery Form表单提交代码demo
1.JSP表单 <% String basePath = request.getScheme() + "://" + request.getServerName() +&qu ...
- [C++]内存字节对齐
当我们写一个class类,然后sizeof(),然后发现这个值往往比你想象的大,这是为什么呢?这里就要讲到内存对齐的问题. 先来看一下内存对齐的几条原则: 1.对于class(struct/union ...