在《小强的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. JAVA 水题

    纯粹是让我来掌握熟练度的. 1.金蝉素数 某古寺的一块石碑上依稀刻有一些神秘的自然数. 专家研究发现:这些数是由1,3,5,7,9 这5 个奇数字排列组成的5 位素数,且同时去掉它的最高位与最低位数字 ...

  2. 【2017 Multi-University Training Contest - Team 7 && hdu 6121】Build a tree

    [链接]点击打开链接 [题意] 询问n个点的完全k叉树,所有子树节点个数的异或总和为多少. [题解] 考虑如下的一棵k=3叉树,假设这棵树恰好有n个节点. 因为满的k叉树,第i层的节点个数为k^(i- ...

  3. Mysql学习总结（14）——Mysql主从复制配置

    mysql主从复制 怎么安装mysql数据库,这里不说了,只说它的主从复制,步骤如下: 1.主从服务器分别作以下操作:   1.1.版本一致   1.2.初始化表,并在后台启动mysql   1.3. ...

  4. Nginx分发服务

    nginx配置分发tomcat服务 http://blog.csdn.net/yan_chou/article/details/53265775 http://www.cnblogs.com/deng ...

  5. Qt产生随机数（两种方法）

    第一种方法 #include <QTime> QTime time; time= QTime::currentTime(); qsrand(time.msec()+time.second( ...

  6. Dcloud课程5 php如何实现文件缓存技术（静态数据缓存）

    Dcloud课程5 php如何实现文件缓存技术(静态数据缓存) 一.总结 一句话总结:保存在磁盘上的静态文件,用PHP生成数据到静态文件中.其实cookie和session使用的就是这样的技术,所以c ...

  7. iOS_04_数据类型、常量、变量

    一.数据 1.什么是数据 * 生活中时时刻刻都在跟数据打交道,比如体重数据.血压数据.股价数据等.在我们使用计算机的过程中,会接触到各种各样的数据,有文档数据,图片数据,视频数据,还有聊天QQ产生的文 ...

  8. jquery 获取上一个兄弟元素和下一个兄弟元素

    jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQu ...

  9. （转）Oracle命令

    转自:http://www.cnblogs.com/NaughtyBoy/p/3181052.html Oracle登录命令 1.运行SQLPLUS工具 C:\Users\wd-pc>sqlpl ...

  10. 清除浮动.md

    清除浮动的三种方法 1 加空div层(.clear) 2 overflow属性设置(.clearo) 3 :after伪元素(.clearfix) <!DOCTYPE html> < ...