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

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

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

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

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

App FrameWork的页面布局：

 <body>

     <div id="afui">

         <!--header头部属于导航栏固定于整个应用的顶部-->

         <div id="header">

         </div>

         <!--content内容区则用于承载应用的不同页面-->

         <div id="content">

             <div title='AppFrameWork' id="main" class="panel" selected="true">

                  第一个HTML页面

             </div>

             <div title='Shake' id="ShakePanel" class="panel" data-defer="Pages/Shake.html"></div>

         </div>

         <!--footer底部区则属于标签栏固定于整个应用的底部，用户可以通过点击不同的标签到达不同的页面。-->

         <div id="navbar">

             <a href="#main" id='navbar_home' class='icon home pressed'>home</a>

             <a href="#ShakePanel" id='navbar_shake' class='icon location'>Shake</a>

         </div>

     </div>

 </body>

应用的导航栏和标签栏，通常都是固定页面的顶部和底部，对于web app布局中由于ios浏览器对于CSS的position:fixed支持很不好，因此通用的解决方案（包括jQ.mobi)都是使用绝对定位position:absolute。

App FrameWork框架页面基本都在同一个HTML文档中，在内容区(#content)里面放置多个class为"panel"的div， 这里每个div即为一个页面。当panel设置selected="true"属性后，在应用打开之后默认加载该页面，其他都是隐藏的(display:none)。这些页面之间通过锚链接来跳转，并将目标页面的display设置为"block"，同时给需要隐藏的页面一个向左移动的动画，加之panel页面使用绝对定位，宽度高度均铺满content，这样的跳转就达到了native应用页面切换的效果。在页面切换时，另外的动作就是将panel页面中已经定义的title属性中的值显示到导航中，并可以设置属性data-tab的值来选中对应的标签。

<div title='AppFrameWork' id="main" class="panel" selected="true">第一个HTML页面</div>

<a href="#main" id='navbar_home' class='icon home pressed'>home</a>

若页面内容分属于不同的HTML文件，则需要用到panel里面的data-defer属性，设置此属性之后该panel会加载远程的页面或者url。

<div title='Shake' id="ShakePanel" class="panel" data-defer="Pages/Shake.html"></div>

效果图：

     

如果页面过长会自动出现手势滚动的效果，如上面的第二个页面。

【App FrameWork】框架的页面布局的更多相关文章

  1. APP界面设计之页面布局的22条基本原则

    移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...

  2. APP界面设计与页面布局的23条基本原则

    一个App的好与不好,很大部分取决于移动App页面布局的合理性,优秀的布局顾名思义就是对页面的文字.图形或表格等进行排版.设计. 优秀的布局,需要对页面信息进行完整的考虑,既要考虑用户需求.用户行为, ...

  3. 移动端--用PX为单位+JS框架 实现页面布局

    一:大家先下载metahandler.js 二:准备一个用px实现的移动页面(宽度固定死的页面),引入metahandler.js框架 1.视口设置 width=640,是根据psd图来设置,有多宽设 ...

  4. [译]App Framework 2.1 （1）之 Quickstart

    最近有移动App项目,选择了 Hybrid 的框架Cordova  和  App Framework 框架开发. 本来应该从配置循序渐进开始写的,但由于上班时间太忙,这段时间抽不出空来,只能根据心情和 ...

  5. 初入APP（结合mui框架进行页面搭建）

      前  言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个 ...

  6. Redesign Your App for iOS 7 之 页面布局【转】

    前言 iOS7是目前iOS史上最颠覆的一次改版. 它的出现令人兴奋,因为它将会带我们进入一个全新的时代: 它的到来也让我们忧心,因为它颠覆了一切,包括我们过去做过的很多努力. 但是,相信大家乐意为这个 ...

  7. Zend Framework 入门（4）—页面布局

    Zend Framework 的页面布局模块——Zend_Layout——既可以跟 MVC 一起使用,也可以单独使用.本文只讨论与 MVC 一起使用的情况. 1. 布局脚本 在 application ...

  8. 【App FrameWork】页面之间的参数传递

    若应用中有多个页面,这时2个页面之间可能需要进行参数传递.那么如何来实现呢? 首先想到的就是URL参数传递的方式,如:在panel里设置属性 data-defer="Pages/Shake. ...

  9. Redesign Your App for iOS 7 之 页面布局

    Redesign Your App for iOS 7 之 页面布局 http://www.vinqon.com/codeblog/?detail/11109

随机推荐

  1. 多线程的单元测试工具 - GroboUtils

    写过Junit单元测试的同学应该会有感觉,Junit本身是不支持普通的多线程测试的,这是因为Junit的底层实现上,是用System.exit退出用例执行的.JVM都终止了,在测试线程启动的其他线程自 ...

  2. Windows api 函数全部列表 （未完成）

    网上找了很久,发现没有完整版的,msdn上面有,但是不方便查阅,所以想自己整理一下:由于工程量过于庞大,希望大家共同完成.MSDN:http://msdn.microsoft.com/en-us/li ...

  3. 【转】How to view word document in WPF application

    How to view word document in WPF application (CSVSTOViewWordInWPF) Introduction The Sample demonstra ...

  4. 1090. Highest Price in Supply Chain (25)

    时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A supply chain is a network of r ...

  5. HDU 3487 Splay

    给定两种操作,一种是把一个数列的某一段切下来插到剩余数列的某一个位置上. 一种是翻转操作,把数列的某一段进行翻转. 都是Splay的基本操作.标准的Rotateto调整出 [a,b]区间.然后对[a, ...

  6. Lua基础之table详解

    概要:1.table特性:2.table的构造:3.table常用函数:4.table遍历:5.table面向对象 原文地址:http://blog.csdn.net/dingkun520wy/art ...

  7. Ext.Ajax.request()方法和FormPanel.getForm().submit()方法，都返回success()方法的差异

    我还是不发表到博客园首页吧,要不然还是要被取消,>_< 还是言归正传吧,关于Ext.Ajax.request()方法和FormPanel.getForm().submit()方法返回suc ...

  8. 4.2 spring-import 标签的解析;

    对于spring配置文件的编写,我想,对于经历过庞大项目的人,都有那种恐惧的心理,太多的配置文件.不过,分模块都是大多数人能想到的方法,但是,怎么分模块,那就是仁者见仁,智者见智了.我的策略是使用im ...

  9. WCF服务的创建和发布到IIS

    一. WCF服务的创建 有两种创建方式: 1.WCF服务库 2.WCF服务应用程序 如下图所示: 这里选择WCF服务库.注意事项: 1.WCF服务库是一个类库项目,这里选择.net 3.5版本(版本高 ...

  10. uva 11151

    求最长回文串  就是将字符串翻转后求最长公子列..... #include <cstdio> #include <cstdlib> #include <algorithm ...