之前主要用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的页面布局：

  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>

应用的导航栏和标签栏，通常都是固定页面的顶部和底部，对于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的值来选中对应的标签。

  1. <div title='AppFrameWork' id="main" class="panel" selected="true">第一个HTML页面</div>
  2.  
  3. <a href="#main" id='navbar_home' class='icon home pressed'>home</a>

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

  1. <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. CentOS系统中手动调整系统时间的方法

    我们一般使用“date -s”命令来修改系统时间.比如将系统时间设定成1996年6月10日的命令如下. #date -s 06/10/96 将系统时间设定成下午1点12分0秒的命令如下. #date ...

  2. A3992学习记录

    ATmega64+A3992驱动步进电机 //ATmega 64a 电机驱动板程序//编译环境 AVR Studio 4.17/AVR GCC//系统外部时钟16M//作者:虞恺 //日期:2012. ...

  3. ASP.NET工具

    每个开发人员现在应该下载的十种必备工具 发布日期: 7/20/2004 | 更新日期: 7/20/2004 本文自发布以来已经增加了新信息. 请参阅下面的编辑更新. 本文讨论: • 用于编写单元测试的 ...

  4. C++ 容器及选用总结

    目录 ==================================================== 第一章 容器 第二章 Vector和string 第三章 关联容器 第四章 迭代器 第五 ...

  5. 升级python版本导致Django无法使用的解决办法

    运行环境是CentOS6.2 x86_64,在把python从2.6.6升级到2.7.5后,由于环境变量的改变,在python代码中再import django的话将会出现以下报错:   “No mo ...

  6. 关于location

    ---恢复内容开始--- window.location跳转+替换+刷新 一.最外层top跳转页面,适合用于iframe框架集 top.window.location.href("${pag ...

  7. FragmentActivity和Activity的具体区别在哪里

    fragment是3.0以后的东西,为了在低版本中使用fragment就要用到android-support-v4.jar兼容包,而fragmentActivity就是这个兼容包里面的,它提供了操作f ...

  8. 1017: [JSOI2008]魔兽地图DotR - BZOJ

    Description DotR (Defense of the Robots) Allstars是一个风靡全球的魔兽地图,他的规则简单与同样流行的地图DotA (Defense of the Anc ...

  9. OSUnMapTbl[]的原理

    问题描述:     ucos任务队列中优先级获取 问题解决: uCOS-II是一个多任务的操作系统,每个任务都是一个应用程序,它有自己的寄存器和堆栈空间,即任务控制块TCB(task control ...

  10. uva 108

    降维  枚举行累加   然后求单行上最大连续和 #include <iostream> #include <cstring> #include <cstdio> # ...