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. Vmware 注册服务 开机自启

    现在的服务器性能往往过剩,利用虚拟机可以提高服务器的利用效率.VMware是一款很好的虚拟机软件,但是其WorkSation版本并不支持开机自动启动,支持开机自启的Server又长年没有更新,已经无法 ...

  2. spring security 注解@EnableGlobalMethodSecurity详解

     1.Spring Security默认是禁用注解的,要想开启注解,需要在继承WebSecurityConfigurerAdapter的类上加@EnableGlobalMethodSecurity注解 ...

  3. thinkphp前台模版字符串截取

    ThinkPHP\Common\extend.php 中管理前台模版的截取{$vons.title|msubstr=0,26} 原始的代码是无法使用截取支持…. 由于涉及到只有汉字检测最为准确 需要加 ...

  4. sql　拼接同列的值

    sql中有时需要将列的值转成行的形式,比如下面的数据,具有相同Path的ZumenID有哪一些,该怎么做呢? 常见的做法可以参见这篇文章http://www.cnblogs.com/xiashengw ...

  5. Spring Boot Gradle 打包可执行Jar文件！

    使用Gradle构建项目,继承了Ant的灵活和Maven的生命周期管理,不再使用XML作为配置文件格式,采用了DSL格式,使得脚本更加简洁. 构建环境: jdk1.6以上,此处使用1.8 Gradle ...

  6. Spring面试问题集锦

    Q. 对于依赖倒置原则(Dependency Inversion Principle,DIP),依赖注入(Dependency Injection,DI)和控制反转(Inversion of Cont ...

  7. 目录_JVM专题

    (PS:多为<深入理解Java虚拟机——JVM高级特性与最佳实践>一书的阅读笔记,权记于此以备忘) 纲要: 类加载(加载.连接(验证.准备.解析).初始化) (类的生命周期:除此5个外,还 ...

  8. css3学习系列之初识 transform (一)

    一.transform是哈? 从字面意思来看 transform的含义是:改变,使…变形:转换,对 没错 就是变形 变形当有 放大缩小 东倒 西歪,刚好css3中 transform 也出这个 放几个 ...

  9. 路由策略和策略路由 & route-map

    今天,这个专题应用下route-map,在这个之前,有很多内容需要掌握,不是简单的制定一个路由图就可以了. -------- 本次专题理论的东西居多,但是不是复制黏贴,是加上自己的理解思想. 第一个要 ...

  10. (笔记)Mysql命令show databases：显示所有数据库

    show databases命令用于显示所有数据库. show databases命令格式:show databases; (注意:最后有个s) 例如:mysql> show databases ...