【Intel AF 2.1 学习笔记一】AF程序结构
Intel App Framework（原jqMobi）是用来开发hybrid app的开源免费框架，被intel收编之后发布了最新的2.1版本，最近正在学习。af的所谓程序结构，就是AF网页的架构，大家直接看代码就都清楚了（因为我加了注释：^_^）。
<!doctype html>
<!-- 肯定必须是html5页面-->
<html>
<head>
<meta charset="utf-8">
<!-- 移动应用必备：自适应设备宽度，锁定页面缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 引入af的css -->
<link rel="stylesheet" type="text/css" href="js/af2.1/css/af.ui.min.css" />
<link rel="stylesheet" type="text/css" href="js/af2.1/css/icons.min.css" />
<!-- af基础脚本文件 -->
<script src="js/af2.1/appframework.js"></script>
<!-- 如果需要使用jquery，新版已经支持，可以将上面的一行换为下面两行：
<script src="js/jquery.js"></script>
<script src="js/af2.1/jq.appframework.js"></script>
-->
<script src="js/af2.1/ui/appframework.ui.js"></script>
<script src="js/af2.1/af.plugins.min.js"></script>
<style>
.atright{float:right;}
.atleft{float:left;}
</style>
</head>
<body>
<div id="afui" class="android"><!-- 应用页面主体必须包含在id为“afui”的div或body内 -->
<header id="headerMain" ><!--header页面上方的导航条:) 可以通过设置id="header"使之成为默认的header（panel不需要设置）。另外，可以有多个header，此时panel中需要用data-header属性指定，或者在panel中内嵌header也可以-->
<a class="button backButton atleft">返回</a>
<a class="button icon settings atright">设置</a>
<h1>First App build on AF</h1><!--内容会被 子页面（panel）的data-title属性替换 -->
</header>
<div id="content"><!--ok，主要内容在这儿，所有的页面（panel）都应该在这个id为“content”的div里面 -->
<!-- 页面一 data-nav设置的是左边的sidemenu data-aside设置右边的sidemenu-->
<div id="pageSettings" class="panel upage" data-nav="leftMenu" data-aside="rightMenu2" data-title="Settings" data-header="headerMain" >
<p>这是设置页面</p>
<footer id="footer3">
<a class="icon home" href="#pageMain"></a>
<a class="icon error" href="#">Footer3</a>
</footer>
</div>
<!-- 页面二，这才是主页面，注意selected属性 -->
<div id="pageMain" class="panel upage" data-nav="leftMenu" data-aside="rightMenu" data-title="AppAF" selected="true" data-header="headerMain"data-footer="footerMain">
<p>这是主页面</p>
</div>
</div>
<footer id="footerMain"><!--footer页面下方的导航条:) 如同header一样，你可以通过设置id="navbar"来声明为默认的footer导航条（panel不需要设置）。同样 可以有多个footer，panel中需要用data-footer属性指定，或者在panel中内嵌footer-->
<a class="icon settings" href="#pageSettings"></a>
</footer>
<footer id="footer2">
<a class="icon home" href="#pageMain"></a>
</footer>
<nav id="leftMenu">
<h1>Left Menu</h1>
</nav>
<aside id="rightMenu">
<h1>Right Menu</h1>
</aside>
<aside id="rightMenu2">
<h1>2nd Right Menu</h1>
</aside>
</div>
<script>
$.ui.ready(function(){
/* 由于af在宽度大于一定值得设备上（768）会默认总是显示左边的sidemenu，如果要禁止需要禁止splitView设置*/
$.ui.splitView=false;//不起作用，要在ui.lanuch被调用之前才行，此时应该调用下面的方法
$.ui.disableSplitView();
});
</script>
</body>
</html>
<!-- 肯定必须是html5页面-->
<html>
<head>
<meta charset="utf-8">
<!-- 移动应用必备：自适应设备宽度，锁定页面缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 引入af的css -->
<link rel="stylesheet" type="text/css" href="js/af2.1/css/af.ui.min.css" />
<link rel="stylesheet" type="text/css" href="js/af2.1/css/icons.min.css" />
<!-- af基础脚本文件 -->
<script src="js/af2.1/appframework.js"></script>
<!-- 如果需要使用jquery，新版已经支持，可以将上面的一行换为下面两行：
<script src="js/jquery.js"></script>
<script src="js/af2.1/jq.appframework.js"></script>
-->
<script src="js/af2.1/ui/appframework.ui.js"></script>
<script src="js/af2.1/af.plugins.min.js"></script>
<style>
.atright{float:right;}
.atleft{float:left;}
</style>
</head>
<body>
<div id="afui" class="android"><!-- 应用页面主体必须包含在id为“afui”的div或body内 -->
<header id="headerMain" ><!--header页面上方的导航条:) 可以通过设置id="header"使之成为默认的header（panel不需要设置）。另外，可以有多个header，此时panel中需要用data-header属性指定，或者在panel中内嵌header也可以-->
<a class="button backButton atleft">返回</a>
<a class="button icon settings atright">设置</a>
<h1>First App build on AF</h1><!--内容会被 子页面（panel）的data-title属性替换 -->
</header>
<div id="content"><!--ok，主要内容在这儿，所有的页面（panel）都应该在这个id为“content”的div里面 -->
<!-- 页面一 data-nav设置的是左边的sidemenu data-aside设置右边的sidemenu-->
<div id="pageSettings" class="panel upage" data-nav="leftMenu" data-aside="rightMenu2" data-title="Settings" data-header="headerMain" >
<p>这是设置页面</p>
<footer id="footer3">
<a class="icon home" href="#pageMain"></a>
<a class="icon error" href="#">Footer3</a>
</footer>
</div>
<!-- 页面二，这才是主页面，注意selected属性 -->
<div id="pageMain" class="panel upage" data-nav="leftMenu" data-aside="rightMenu" data-title="AppAF" selected="true" data-header="headerMain"data-footer="footerMain">
<p>这是主页面</p>
</div>
</div>
<footer id="footerMain"><!--footer页面下方的导航条:) 如同header一样，你可以通过设置id="navbar"来声明为默认的footer导航条（panel不需要设置）。同样 可以有多个footer，panel中需要用data-footer属性指定，或者在panel中内嵌footer-->
<a class="icon settings" href="#pageSettings"></a>
</footer>
<footer id="footer2">
<a class="icon home" href="#pageMain"></a>
</footer>
<nav id="leftMenu">
<h1>Left Menu</h1>
</nav>
<aside id="rightMenu">
<h1>Right Menu</h1>
</aside>
<aside id="rightMenu2">
<h1>2nd Right Menu</h1>
</aside>
</div>
<script>
$.ui.ready(function(){
/* 由于af在宽度大于一定值得设备上（768）会默认总是显示左边的sidemenu，如果要禁止需要禁止splitView设置*/
$.ui.splitView=false;//不起作用，要在ui.lanuch被调用之前才行，此时应该调用下面的方法
$.ui.disableSplitView();
});
</script>
</body>
</html>
下一节学习af中的page，也就是panel。