af3的变化非常大。参见[译]Intel App Framework 3.0的变化

　　一、应用需要引用的js脚本：

　　af3中不在自己实现dom选择器，而是选择基于jquey或兼容jquery的库如zepto等，touch layer也依靠fastclick。下面就是af3应用的head部分示意代码，对比2.x变化很明显，这里引入了jquery和fastclick，没有了appframework.js

 <head>

        <title>LearAF3</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="js/af3.0/af.ui.css" />

        <link rel="stylesheet" type="text/css" href="js/af3.0/icons.min.css" />

        <script src="js/libs/jquery/jquery-2.1.1.min.js"></script>

        <script src="js/libs/fastclick/fastclick-1.0.3.min.js"></script>

        <script src="js/af3.0/appframework.ui.js"></script>

   　　  ...    
  </head>

　　二、页面组织结构：

　　af3中应用视觉元素组织变化巨大，一改2.x时代panel和header，footer混乱的现象，3.0中新增加了一个顶级元素类型（除afui）view，现在header，footer和panel页面都属于view元素，一个view内部的panel有相同的header和footer，需要不同的footer或header需要创建新的view，窃以为这样清爽多了:)，请看：

<body>

    <div class="view" id="viewMain">

            <header>

                <h1 class="title">Main view</h1>

                <a class="button icon menuButton" style="float:right"></a>

            </header>

            <div class="pages">

                <div class="panel active" id="page01"> this is page in main view</div>

            </div>

            <footer>

                <a  data-transition="up-reveal" class="icon html5" onclick="$.afui.loadContent('#view2',false,false,'slide');">Next view</a>

            </footer>

        </div>

        <div class="view active" id="view2">

            <header>

                <h1 class="title">view 22</h1>

                <a class="button icon menuButton" style="float:right"></a>

            </header>

            <div class="pages">

                <div class="panel active" id="page22" >

                    <p>this is page in  view 2</p>

                </div>

            </div>

            <footer>

                <a href="#viewMain" data-transition="up-reveal:back" class="icon home">back to main view</a>

            </footer>

        </div>

</body>

需要注意的是，view中的panel元素，还需要包裹一层pages元素，即使只有一个panel。

代码中同时显示了切换view的三种方式：

  1. 编辑时，通过添加active 类名来指定默认view
  2. 运行时，通过锚定view的id来切换
  3. 运行时，通过js函数loadContent

　　三、自定义themes：

　　af3中默认使用系统theme，如果你需要自定义theme，需要设定useOSThemes为false

$.afui.useOSThemes=false; //This must be set before $(document).ready()

另外，还需要在view之外再包裹一层id为afui的div元素，并指定相应theme的class。af3内置的theme有：

ios，ios7，android(light,dark),win8(light dark),bb/*blackberry*/,tizen

　　四、总体代码：

<!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

    <head>

        <title>LearAF3</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="js/af3.0/af.ui.base.css" />

        <link rel="stylesheet" type="text/css" href="js/af3.0/af.ui.css" />

        <link rel="stylesheet" type="text/css" href="js/af3.0/icons.min.css" />

        <script src="js/libs/jquery/jquery-2.1.1.min.js"></script>

        <script src="js/libs/fastclick/fastclick-1.0.3.min.js"></script>

        <script src="js/af3.0/appframework.ui.js"></script>

        <script>

            $.afui.useOSThemes=false;

        </script>

    </head>

    <body>

    <div id="afui" class="bb">

        <div id="splashscreen">

            <h1>Lear App Framework 3</h1>

            <span class="icon loading">loading...</span>

        </div>

        <div class="view" id="viewMain">

            <header>

                <h1 class="title">Main view</h1>

                <a class="button icon menuButton" style="float:right"></a>

            </header>

            <div class="pages">

                <div class="panel" id="page1">

                    <p>this is page in main view</p>

                </div>

            </div>

            <footer>

                <a  data-transition="up" class="icon html5" onclick="$.afui.loadContent('#view2',false,false,'up');">Next view</a>

            </footer>

        </div>

        <div class="view active" id="view2">

            <header>

                <h1 class="title">view 22</h1>

                <a class="button icon menuButton" style="float:right"></a>

            </header>

            <div class="pages">

                <div class="panel active" id="page2"  >

                    <p>this is page in  view 2</p>

                </div>

            </div>

            <footer>

                <a href="#viewMain" data-transition="up:back" class="icon home">back to main view</a>

            </footer>

        </div>

    </div>

    </body>

</html>

　　五、导航历史（history）：

　　af3为每个view，单独记录页面（panel）的浏览记录。

　　目前发现af3中每个view下面必须指出默认panel，否则不显示默认panel。并且需要通过给panel添加active类名，而不是通过data-selected="true"

[译]Intel App Framework 3.0的变化  [Learn AF3系列]   第二章 学习App Framework 3.0的组件一：View

[Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序的更多相关文章

  1. [译]Intel App Framework 3.0的变化

    App Framework 3.0 原文 IAN M. (Intel) 发布于 2015-02-11  05:24 我们高兴地宣布App Framework 的新版本3.0发布了.你可以获得最新的代码 ...

  2. [Learn AF3]第二章 App Framework 3.0的组件View——AF3的驱动引擎

    View:af3中的驱动引擎   组件名称:View     使用说明:按照官方的说法,view组件是af3的“驱动引擎(driving force)”,view是af3应用的基础,一个app中可以包 ...

  3. [Learn AF3]第六章 App Framework 3.0中的内置矢量图标

    AF3的内置矢量图标 介绍:要使用af3中的图标,必须首先引入icon.css,由于文件中已经内置了字体文件数据,因此不需要引入字体文件支持. <link rel="styleshee ...

  4. 第一章：hybrid app开发之技术选型

    伴随着移动互联网的兴起,越来越多的企业将部分资源投入其中,想在互联网+的大潮中分一杯羹,并期望着站在风口上,成为时代的弄潮儿. 现在不会做一个app都不好意思说是搞互联网的,那么开发一个app的方式有 ...

  5. 《Java从入门到失业》第一章：计算机基础知识（三）：程序语言简介

    1.3程序语言简介 我们经常会听到一些名词:低级语言.高级语言.编译型.解释型.面向过程.面向对象等.这些到底是啥意思呢?在正式进入Java世界前,笔者也尝试简单的聊一聊这块东西. 1.3.1低级语言 ...

  6. [Learn AF3]第三章 App Framework 3组件之Panel：afui的核心

    Panel,afui的核心组件 组件名称:Panel     使用说明:按照官方的说法,panel组件是af3的“核心(heart of the ui)”,panel用于构造应用中独立的内容展示区域, ...

  7. [Learn AF3]第七章 App framework组件之Popup

    AF3的弹出对话框Popup 组件名称:Popup 是否js控件:是,$.afui.popup     说明:af3中的popup和af2中相比变化不大,依然是通过插件popup来实现的     方法 ...

  8. [Learn AF3]第五章 App Framework 3组件之Drawer——Side Menu

    Drawer——Side menu 组件名称:Drawer     说明:af3中的side menu和af2中有很大变化,af3中的side menu实际上是通过插件$.afui.drawer来实现 ...

  9. [AFUI]App Framework Quickstart

    ---------------------------------------------------------------------------------------------------- ...

随机推荐

  1. 4. EM算法-高斯混合模型GMM详细代码实现

    1. EM算法-数学基础 2. EM算法-原理详解 3. EM算法-高斯混合模型GMM 4. EM算法-高斯混合模型GMM详细代码实现 5. EM算法-高斯混合模型GMM+Lasso 1. 前言 EM ...

  2. iOSAFNetworking 网络请求

    前言 在 iOS 开发中,一般情况下,简单的向某个 Web 站点简单的页面提交请求并获取服务器的响应,用 Xcode 自带的 NSURLConnection 是能胜任的.但是,在绝大部分下我们所需要访 ...

  3. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  4. How to Use updateConstraints(什么时候该使用updateConstraints)

    How to Use updateConstraintshtml, body {overflow-x: initial !important;}html { font-size: 14px; } bo ...

  5. Map 与 JavaBean 的相互装换

    目的 为了方便使用 DbUtils,在插入数据时需要传入含有占位符的 SQL 语句和对应占位符的值(数组),封装代码如下: /** * 插入实体 */ public static <T> ...

  6. 聊聊Google face api

    图像处理开源了很多东西,保存下一些基础的东西,以用来follow最新的东西. Google Face API 是什么? Google 的 Face API 用于面部检测,从图片中找出人的面部,以及位置 ...

  7. javascrpt 代码

    一.window.open关闭子页面时刷新父页面 window.opener.location.reload(); window.opener=null;window.close(); 二.AJAX返 ...

  8. eclipse多个项目保存到gitee上一个仓库中

    自己练习创建到多个项目,想同步到gitee上一个仓库中. 1. 首先在gitee上创建项目springtest 2. 在eclipse默认项目存放到地方创建文件夹springtest,用来同步gite ...

  9. MVC的JavaScriptResult使用

    JavaScriptResult的使用有两个必要的前提: 1.Ajax 2.jquery.unobtrusive-ajax.js 使用代码示例 controller public ActionResu ...

  10. C# Notes

    Token Based Authentication Attributes Tutorial - Conditional - Obsolete Covariance and Contravarianc ...