在《小强的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. cv2.putText 文字换行（'\n'）无法解析换行

    OpenCV putText() new line character cv2.putText 在向图像中添加文本信息时,如果在待添加的文本中含有换行转义符,一般它是无法正确处理的: cv2.putT ...

  2. [置顶] WebService学习总结（1）——WebService相关概念

    一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...

  3. 洛谷——P1046 陶陶摘苹果

    https://www.luogu.org/problem/show?pid=1046 题目描述 陶陶家的院子里有一棵苹果树,每到秋天树上就会结出10个苹果.苹果成熟的时候,陶陶就会跑去摘苹果.陶陶有 ...

  4. [D3] Debug D3 v4 with Dev Tools

    Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visual ...

  5. POJ 1466 Girls and Boys (ZOJ 1137 )最大独立点集

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=137 http://poj.org/problem?id=1466 题目大意: ...

  6. 【Struts2三】拦截器

    拦截器:就是在訪问action之前.对其进行拦截!能够在拦截器中做一些逻辑的处理! 比方权限验证.没有权限就不给予訪问! 拦截器等效于servlet中的过滤器! 使用拦截器步骤: 1.定义自己的拦截器 ...

  7. [D3] Modify DOM Elements with D3 v4

    Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing col ...

  8. SaltStack快速部署及测试

    测试环境:CentOS6.6 X86_64 # cat /etc/hosts 192.168.199.61 Ansible 192.168.199.60 Nginx1 192.168.199.62 N ...

  9. (转)Windows2008优化IIS7.5支持10万个同时请求的配置方法

    通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请求数限制,TCPIP连接数等方面,从而使WEB服务器的性能得以提升,保证WEB访问的访问流畅. 在运行中cmd后,输入:C:\Window ...

  10. 一些mysql innodb的建议

    http://blog.csdn.net/yunhua_lee/article/details/8239145 原文:http://dev.mysql.com/doc/refman/5.5/en/in ...