本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（37）——jqMobi快速入门
在《HTML5移动开发之路（33）—— jqMobi基础》中我们了解了什么是jqMobi，并从官方下载了jqMobi开发包，下载后解压目录如下：
拷贝上面的/css目录、/plugins目录、/ui目录、/appframework.js文件,如下图所示。
如果需要也可以拷贝index.html，然后自己修改,比如上面我的index01.html和index02.html
接下来引入css与js文件
[plain] view plain copy print?![HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP]( "HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP")
![HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP]( "HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP")
index01.html
[html] view plain copy print?![HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP]( "HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP")
![HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP]( "HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP")
- >
- <html>
- <head>
- <meta charset="utf-8">
- <title>jqMobititle>
- <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
[html] view plain copy print?![HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP]( "HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP")
- <div id="afui">
- 这里面是写的内容
- div>
2、Content Area
[html] view plain copy print?![HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP]( "HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP")
![HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP]( "HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP")
- <div id="afui">
- <span style="white-space:pre"> span><div id="content">
- <span style="white-space:pre"> span>
- <span style="white-space:pre"> span>这里写的是 panel
- <span style="white-space:pre"> span>div>
- div>
3、panels 是jqMobi的核心 可以有多个
[html] view plain copy print?![HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP]( "HTML5移动开发之路（37）——jqMobi快速入门-LMLPHP")
- <div id="afui">
- <span style="white-space:pre"> span><div id="content">
- <span style="white-space:pre"> span><div id="main" title="Welcome" class="panel" selected="true">
- <span style="white-space:pre"> span>在这个里面写我们的对应内容
- <span style="white-space:pre"> span>div>
- <span style="white-space:pre"> span>div>
- div>
4、header与footer
运行效果