在《小强的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. php操作zip压缩文件

    php操作zip压缩文件 一.总结 1.php操作zip:php可以操作zip压缩文件,通过 ZZIPLIB扩展库,这些扩展库可以通过composer安装,或者某些版本的php会自带 2.完美操作zi ...

  2. MyBatis学习总结（13）——Mybatis查询之resultMap和resultType区别

    MyBatis的每一个查询映射的返回类型都是ResultMap,只是当我们提供的返回类型属性是resultType的时候,MyBatis对自动的给我们把对应的值赋给resultType所指定对象的属性 ...

  3. 11.4 Android显示系统框架_APP与SurfaceFlinger内部机制分析

    4.1 APP跟SurfaceFlinger之间的重要数据结构 一个应用程序有一个或者多个surface(一般只有一个),一个surface有一个或者多个buffer,这些buffer需要应用向sur ...

  4. 【Codeforces Round #301 (Div. 2) E】Infinite Inversions

    [链接] 我是链接,点我呀:) [题意] 给你一个无限长的序列1,2,3,4... 然后给你n个操作. 每个操作ai,bi; 表示调换位置为ai和位置为bi的数的位置. (ai,bi<=10^9 ...

  5. FTP 访问的形式

    主要是扼要的列举一下访问的方式,不涉及太具体的内容.大家可以在百度上搜索一下具体的操作方法. 主要有: 1. 网页浏览器中输入 ftp://192.168.0.111的形式. 2. 资源管理器中输入f ...

  6. php实现运气模型（命运随机，克服困难）

    php实现运气模型(命运随机,克服困难) 一.总结 1.应该用表格来布局的,这种多列的用表格布局比div和span布局方便很多 2.span标签设置宽度:变成行内快元素:display:inline- ...

  7. 缓存（cache）的理解

    缓存的特点: 读取速度很快,容量相比硬盘较小: 缓存在实现时,本质上仍然是一块内存区域: cache 机制的一个核心关注点还在于,究竟什么样的数据应该放在缓存中,显然不是所有,那就应当是部分,就应该是 ...

  8. Redis学习笔记（六）---List

    1.ArrayList与LinkList的区别 ArrayList的使用数组存入的方式,所以根据索引查询数据速度快,而增删元素是比较慢的,它需要将数据一位一位的移动,知道达到要求. LinkList使 ...

  9. 【拆分版】 Docker-compose构建Logstash多实例，基于7.1.0

    [拆分版]Docker-compose构建Logstash多实例 写在最前 说起Logstash,这个组件并没有什么集群的概念,与其说是集群,不如说是各自去收集日志分析过滤存储到Elasticsear ...

  10. linux中关闭程序或进程