在《小强的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快速入门的更多相关文章

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  7. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  8. 小强的HTML5移动开发之路（1）——HTML介绍

    来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

  9. 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

随机推荐

  1. eclipse-hierarchyviewer 不能使用

    今天安装了adt-bundle以后,发现hierarchyviewer不能用.点开了以后连手机没有效果.后来发现,还需要进入hierarchyviewer所在的sdk目录进行下权限的设置 chmod ...

  2. 【Codeforces Round #431 (Div. 2) A】Odds and Ends

    [链接]点击打开链接 [题意] 让你把一个数组分成奇数个部分. 且每个部分的长度都是奇数. [题解] 很简单的脑洞题. 开头和结尾一定要为奇数,然后 n为奇数的话,就选整个数组咯. n为偶数的话,不能 ...

  3. 使用Struts2和jQuery EasyUI实现简单CRUD系统（七）——数据分页处理

    上篇完毕多选删除的功能之后,接下来就是做分页功能了.曾经的分页是一个麻烦的问题.并且数据量巨大的时候,直接把这些元素取出来显然速度较慢,所以取一定区间的数据还是高效的. watermark/2/tex ...

  4. GOROOT,GOPATH,GOBIN,project

    GOROOT,GOPATH,GOBIN,project目录   我们接下来一个一个来看关于Go语言中的三个目录的详细解释先通过go env查看go的环境变量(我这里是mac的环境,所以可能和你的不同) ...

  5. UVA 11437 - Triangle Fun 向量几何

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  6. js进阶 13-2 jquery动画滑动效果哪些注意事项

    js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...

  7. UVA 10635 - Prince and Princess LCS转化为LIS

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  8. [Maven实战]（6）仓库（本地仓库，远程仓库，镜像）

    1. 简单介绍 maven能够在某个位置统一存储全部maven项目共享的构件,这个统一的位置就是仓库.实际的Maven项目将不会各自存储其依赖文件,它们仅仅须要声明这些依赖的坐标,在须要的时候(比如. ...

  9. C#实现人脸识别

    C#实现基于ffmpeg加虹软的人脸识别 关于人脸识别 目前的人脸识别已经相对成熟,有各种收费免费的商业方案和开源方案,其中OpenCV很早就支持了人脸识别,在我选择人脸识别开发库时,也横向对比了三种 ...

  10. linux 查看 *.a *.so 符号表(zt)

    objdump -tT libName.so | grep symbel symbolName nm -D libName.so | grep symbel symbolName 很多非常熟悉wind ...