小强的HTML5移动开发之路(37)——jqMobi快速入门
在《小强的HTML5移动开发之路(33)——
jqMobi基础》中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下:
拷贝上面的/css目录、/plugins目录、/ui目录、/appframework.js文件,如下图所示。
如果需要也可以拷贝index.html,然后自己修改,比如上面我的index01.html和index02.html
接下来引入css与js文件
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
index01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jqMobi</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>
<body>
<div id="afui">
<div id="content">
<div id="home" title="首页" class="panel" selected="true"
data-footer="custom_footer"> </div>
<div id="about" title="关于我们" class="panel"
data-footer="custom_footer"> </div>
<header id="custom_header">
<h1>首页</h1>
</header>
<footer id="custom_footer">
<a href='#home' class='icon home'>首页</a>
<a href='#about' class='icon info'>关于我们</a>
</footer>
</div>
</div>
</body>
</html>
上面代码说明:
1、UI container
<div id="afui">
这里面是写的内容
</div>
2、Content Area
<div id="afui">
<div id="content">
<!-- this is where your panels will go -->
这里写的是 panel
</div>
</div>
3、panels 是jqMobi的核心 可以有多个
<div id="afui">
<div id="content">
<div id="main" title="Welcome" class="panel" selected="true">
在这个里面写我们的对应内容
</div>
</div>
</div>
4、header与footer
(1)每个panel单独的header与footer
<div id="afui">
<div id="content">
<div id="main" title="Welcome" class="panel" selected="true">
<header>
<h1>Welcome</h1>
<a class="button" style="float:right;" class="icon home"></a>
</header>
对应页面的内容
<footer>
<a href='#about' class='icon info'>About</a>
</footer>
</div>
</div>
</div>(2)公用的header和footer可以在多个panel中调用
<div id="afui">
<div id="content">
<div id="main" title="Welcome" class="panel" selected="true" data-footer="custom_footer"
data-header="custom_header">
对应页面的内容
</div>
<header id="custom_header">
<h1>Welcome</h1>
<a class="button" style="float:right;" class="icon home"></a>
</header>
<footer id="custom_footer">
<a href='#about' class='icon info'>About</a>
</footer>
</div>
</div>(3)另一种方法
<div id="header">
<!-- any additional HTML you want can go here -->
<a onclick="$.ui.toggleSideMenu();" class="button">Toggle Side Menu</a>
</div>
<div id="content">
<!-- this is where your panels will go -->
<div id="main" title="Welcome" class="panel" selected="true">
内容
</div>
<div id="about" title="About" class="panel" data-nav="second_nav">
<!-- by setting data-nav the "second_nav" will be shown on this panel -->
</div>
</div>
//底部
<div id="navbar">
<a target="#welcome" class="icon home">Home</a>
</div>
运行效果
小强的HTML5移动开发之路(37)——jqMobi快速入门的更多相关文章
- 小强的HTML5移动开发之路(18)——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路(14)——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路(13)——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路(11)——链接,图片,表格,框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路(42)——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路(12)——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路(3)——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
- 小强的HTML5移动开发之路(1)——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...
- 小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
随机推荐
- bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何
bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结 一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...
- HTTP请求报文、响应报文
HTTP请求报文 HTTP请求报文由3部分组成(请求行+请求头+请求体): 请求行:①是请求方法,GET和POST是最常见的HTTP方法,除此以外还包括DELETE.HEAD.OPTIONS.PUT. ...
- 【Educational Codeforces Round 33 B】Beautiful Divisors
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 把所有的那些数字打表出来. 逆序枚举就好 [代码] /* 1.Shoud it use long long ? 2.Have you ...
- JPA的配置文件persistence.xml参数详解
<?xml version="1.0" encoding="UTF-8"?> <persistence version="1.0&q ...
- 基于am3358的led跑马灯測试
#include <sys/ioctl.h> #include<stdio.h> #include <fcntl.h> #include <sys/types ...
- Codeforces Round 363 Div. 1 (A,B,C,D,E,F)
Codeforces Round 363 Div. 1 题目链接:## 点击打开链接 A. Vacations (1s, 256MB) 题目大意:给定连续 \(n\) 天,每天为如下四种状态之一: 不 ...
- Caused by: java.lang.NoSuchMethodException: <init> [class android.content.Context, interface android
在写自己定义的view时,有时会报下面错误: Caused by: java.lang.NoSuchMethodException: <init> [class android.co ...
- 使用MongoDb连接数据库服务器
链接MongoDb数据库服务器的字符串格式: mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:portN] ...
- 【BZOJ 4199】 [Noi2015]品酒大会
[链接]h在这里写链接 [题意] 给你一个长度为n的字符串s; 标志了每一杯酒; 以及n个数字,表示每一杯酒的美味度ai. 两杯酒(i,j)称为r相似 当且仅当 ...
- java測试网络连接是否成功并设置超时时间
/** * 获取RMI接口状态 * * @return "0":服务正常,"1": 连接报错,"2":连接超时 */ @Override p ...