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

版本介绍

Query selector library - 用 jQuery* or Zepto* 代替

只支持 Android* 4+ , iOS* 6+ , WP* 8 , FF* OS ， Blackberry* 10

不再提供“Touchlayer”，使Fastclick（https://github.com/ftlabs/fastclick）代替

仅使用自然滚动。如果你需要一个JS滚动，有以下两个选择

1) FTScroller（https://github.com/ftlabs/ftscroller）

2) iScroll（http://cubiq.org/iscroll-5）

支持MVC

Backbone.js

angular.js

react.js

…

页面结构

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 -->