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. Java SWT编程基础

    SWT常用组件列表及使用 https://blog.csdn.net/u013310025/article/details/52939452 SWT编程基础-控件和图形资源 https://blog. ...

  2. [转]关于重定向RedirectAttributes的用法

    刚才做项目的时候看到一篇写的很不错的博客,解决我之前对于RedirectAttributes的困惑,也给大家推荐下~ 原文地址https://zhuanlan.zhihu.com/p/21353217 ...

  3. vnc 登录 Ubuntu gnome 桌面出现 QXcbConnection : Failed to initialize XRandr 错误,然后打不开

    现象如下: 解决方法是在 启动的时候加入 -noload Welcome 参数 也可以在 ~/.local/share/applications/DigiaQt-qtcreator-community ...

  4. 配置Chrome Workspace功能

    配置Chrome Workspace功能 Chrome Workspace功能是将在Chrome开发者工具(F12)中对文档的修改直接应用于对应文件中.由于Chrome并不知道当然文档对应用的文件为哪 ...

  5. freemarker自己定义标签报错（二）

    freemarker自己定义标签 1.错误描写叙述 freemarker.core.ParseException: Unexpected end of file reached. at freemar ...

  6. linq操作符：连接操作符

    linq中的连接操作符主要包括Join()和GroupJoin()两个. 一.Join()操作符 Join()操作符非常类似于T-SQL中的inner join,它将两个数据源进行连接,根据两个数据源 ...

  7. 企业私有云部署im，视频服务

    1,安全问题 2,员工跨地域 3,内部视频培训 考勤申请,设备借用申请 名片申请 会议室预订 审批 内网,局域网部署 Android源码 https://github.com/starrtc/andr ...

  8. [maven] settings 文件 本地maven仓库

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  9. Python 类的初见

    #定义一个Python类 class Cat: #self关键字相当于c++类中的this指针 def eat(self): print("i am eating .") def ...

  10. 总结这两天连续干掉的bug In 创新实训 智能自然语言交流系

    临近项目合并,在pre合并中出现相当多的hug,遂记之 ps:这只是总结一下提纲,具体的方法在前文的博文中都详细记录.总结了. 平台的移植兼容性,虽然是跨平台的java,但是依旧有很多的意外: 1.从 ...