【App FrameWork】框架的页面布局

之前主要用JqueryMobile+PhoneGap的模式开发移动应用，但JQueryMobile自身存在的硬伤太多，如加载速度缓慢，页面转场白屏、闪烁，头尾部导航浮动问题，页面滚动等等，用户体验效果不太好，从而开始研究一种新的前端框架-App FrameWork，也就是JQ.Mobi。

App FrameWork是基于HTML5重写的jQuery框架，对其进行了简化，更有利于在移动设备上应用，并且速度比较流畅。

App FrameWork官方网站：http://app-framework-software.intel.com/

要使用App FrameWork框架，先引入它的样式和脚本文件：

【App FrameWork】框架的页面布局

相对于JqueryMobile用data-role属性来划分导航区、内容区、底部区，这里采用id的方式来标识。

App FrameWork的页面布局：

 1 <body>
 2     <div id="afui">
 3         <!--header头部属于导航栏固定于整个应用的顶部-->
 4         <div id="header">
 5         </div>
 6         <!--content内容区则用于承载应用的不同页面-->
 7         <div id="content"> 
 8             <div title='AppFrameWork' id="main" class="panel" selected="true">
 9                  第一个HTML页面
10             </div>
11 
12             <div title='Shake' id="ShakePanel" class="panel" data-defer="Pages/Shake.html"></div>
13         </div>
14         <!--footer底部区则属于标签栏固定于整个应用的底部，用户可以通过点击不同的标签到达不同的页面。-->
15         <div id="navbar">
16             <a href="#main" id='navbar_home' class='icon home pressed'>home</a> 
17             <a href="#ShakePanel" id='navbar_shake' class='icon location'>Shake</a>
18         </div> 
19     </div>
20 </body>

View Code