在《小强的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. Event Serializers官网剖析（博主推荐）

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...

  2. 00091_字符输入流Reader

    1.字符输入流Reader (1)字符输入流Reader我们读取拥有中文的文件时,使用的字节流在读取,那么我们读取到的都是一个一个字节: (2)只要把这些字节去查阅对应的编码表,就能够得到与之对应的字 ...

  3. 推荐一个iOS应用UI界面设计站点

    Patterns是一个分享ios应用UI界面的站点,专注于分享iOS应用UI界面的细节.依照设计元素进行分类,依照iOS经常使用功能对各类UI进行分类展示. 链接:url=http%3A%2F%2Fw ...

  4. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  5. amazeui学习笔记--css（基本样式）--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

  6. elementUI upload 对图片的宽高做校验

    很开心今天中午没有吃饭!原因是一直没有解决掉一个小问题,于是一直试错,最后看了下源码才有了点头绪,历时四五个小时才解决掉,有点怀疑自己的能力了,所以写下此文,记录一下今天的囧况!一般情况下遇到问题,自 ...

  7. POJ 2376 Cleaning Shifts 区间覆盖问题

    http://poj.org/problem?id=2376 题目大意: 给你一些区间的起点和终点,让你用最小的区间覆盖一个大的区间. 思路: 贪心,按区间的起点找满足条件的并且终点尽量大的. 一开始 ...

  8. PythonAdvanced

    PythonAdvanced function 函数 (要多使用函数,方便,少变量,好改错) 函数是可以重复执行的语句块,可以重复使用 作用: 1.用于封装语句块,提高代码的重用性 2.定义用户级别的 ...

  9. 苹果手机wifi代理设置方法--用于抓包

    杯具了!@@@@@@@变态的公司不能直接上网了,但是经过我的研究.可以用代理上网,电脑是可以了,但是的iphone肿么办,哇咔咔,不要捉急,我来告诉你怎么让你的iphone通过代理上网.动起来吧. 请 ...

  10. Tomcat基础配置和高级配置

    **********  第一部分 Tomcat基础配置   *********** 一.Apatch Tomcat 在win下配置 大部分转载自:http://blog.csdn.net/liuhao ...