appframework3.0--初识

appframework3.0–初识

---

作者：木尘2015-02-05
交流群：333492644

以前项目一直用的2.0也写过一些博客，后来因为项目比较忙所以落下了，现在项目即将上线，对于2.0我的项目虽然完成了，但是效果的确有些差强人意，有时间了，所以就开始研究3.0了，虽然3.0还没有发布，但是他的确比2.0要好的多，不管是从速度上还是从结构上都有了很大的突破

• 官网地址：http://app-framework-software.intel.com/30/
• github地址：https://github.com/01org/appframework/tree/3.0beta

---

版本介绍

1. Query selector library - 用 jQuery* or Zepto* 代替
2. 只支持 Android* 4+ , iOS* 6+ , WP* 8 , FF* OS ， Blackberry* 10
3. 不再提供“Touchlayer”，使Fastclick（https://github.com/ftlabs/fastclick）代替
4. 仅使用自然滚动。如果你需要一个JS滚动，有以下两个选择
   1) FTScroller（https://github.com/ftlabs/ftscroller）
   2) iScroll（http://cubiq.org/iscroll-5）

---

支持MVC

1. Backbone.js
2. angular.js
3. react.js
4. …

页面结构

• view：一个view只能有一个header和一个footer,可以有多个page
• header：头部，多个page公用一个header
• page：一个page可以有多个panel
• panel：panel则是要显示给我们的内容
• footer：底部，多个page公用一个footer
  

  例子：(Hello World~!)

<div class="view" id="mainView">
    <header><h1>My Header</h1></header>
    <div class="pages">
        <div class="panel" data-title="main" id="main" selected="true">
            Hello World~!
        </div>
    </div>
    <footer>
        <a href="#main" class="icon home">Home</a>
    </footer>
</div>

view

每一个都有一个history记录着历史跳转路径，并生成返回按钮 跳转方式：

<a href="#login" class="button" data-transition="up-reveal">Login</a>

过度动画：可以使用消失动画如：up-reveal:dismiss

• up-reveal
• down-reveal
• slide
• popup
• ….

panel

属性：

• selected=”true” 初始化后显示的panel
• data- -include=”filename.html” 页面分离，或远程获取页面
• data-tab=”anchor_id” panel的id，可以通过id跳转至该panel
  例子：

<div class="panel" id="login" selected="true"> </div> <!-- Default loaded panel -->

<div class="panel" id="login" data-tab="settings"> </div> <!-- Change the selected tab to settings -->

<div class="panel" id="login" data-defer="app/login"> </div> <!-- Load the login content from the HTTP request of app/login -->