View:af3中的驱动引擎  


组件名称:View

    使用说明:按照官方的说法,view组件是af3的“驱动引擎(driving force)”,view是af3应用的基础,一个app中可以包含一个或多个view,它可以包含一个footer,一个header,可以包含N个panel和sidemenu(drawer),值得注意的是panel(也就是app的页面)需要包裹在class="pages"的div元素之中。

    方法:虽然view看似重要,但是af3并没有把view实现为一个javascript的类,所以也没有view的专属方法。

    事件:没有专属事件,以下是和panel通用的event

panelbeforeload - this event is fired before the panel is transitioned/loaded
panelload - This event is fired when a panel has been loaded.
panelbeforeunload - this event is fired before the panel is transitioned/unloaded
panelunload - This event is fired when a panel has been unloaded.

    使用:<div class="view"></div>

示意代码:

<div class="view active" id="view1">
<header>
</header>
<div class="pages">
<div class="panel active">page1</div>
</div>
</div>

view之间切换默认没有,不过可以在切换anchor中指定,或loadContent函数中设置,详细请看我总结的切换view的三种方式:

  1. 编辑时,通过添加active 类名来指定默认view
  2. 运行时,通过点击锚定元素来切换:<a href='#viewID' data-transition='slide'>go viewName</a>
  3. 运行时,通过js函数loadContent:$.afui.loadContent('#viewID',false,false,'slide'); 此方法同样适用于panel

注: af3中导航历史是基于view的而不是全局的,$.afui.goBack() 不适用于view。


第一章 如何使用App Framework 3.0 构造应用程序   [Learn AF3系列]

[Learn AF3]第二章 App Framework 3.0的组件View——AF3的驱动引擎的更多相关文章

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

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

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

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

  3. [Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序

    af3的变化非常大.参见[译]Intel App Framework 3.0的变化 一.应用需要引用的js脚本: af3中不在自己实现dom选择器,而是选择基于jquey或兼容jquery的库如zep ...

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

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

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

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

  6. [Learn AF3]第四章 App framework组件之Button

    Button    组件名称:Button     是否js控件:否     使用说明:如果说panel组件是af3的“核心(heart of the ui)”,那么Button就是af中的五虎上将之 ...

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

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

  8. 第二章 设计高质量的React组件

    第二章 设计高质量的React组件 高质量React组件的原则和方法: 划分组件边界的原则: React组件的数据种类: React组件的生命周期. 2.1 易于维护组件的设计要素 1.高内聚:指的是 ...

  9. 第二章App框架设计与重构

    response标准格式: { "isError":false, "errorType": 0, "errorMessage": " ...

随机推荐

  1. [转]oracle在删除表\表空间\用户时,如何释放磁盘空间

    一.drop表 执行drop table xx 语句 drop后的表被放在回收站(user_recyclebin)里,而不是直接删除掉.这样,回收站里的表信息就可以被恢复,或彻底清除. 通过查询回收站 ...

  2. swift-Xcode7.x(7.1,7.2,7.3)新建playground运行不能运行

    swift-Xcode7.xhtml, body {overflow-x: initial !important;}.CodeMirror { height: auto; } .CodeMirror- ...

  3. 【Unity】制作简易定时器(Timer)

    最近开始学习Unity,也想开始学习写一些简单的博客. 在网上学习了一些关于定时器的写法,在此简单总结一下,方便自己以后用到时查阅. 需求:制作定时器,运行3秒后执行第一次,之后每隔3秒执行一次操作. ...

  4. Java编程的逻辑 (70) - 原子变量和CAS

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  5. 在controller中无法通过注解@Value获取到配置文件中定义的值

    1. 默认的我们通常只在dao层用到jdbc的配置,然后使用到@Value注解获取到值. 这时候会在spring-dao扫描中加入下面配置 <context:property-placehold ...

  6. solr报错 ERROR SolrDispatchFilter null:ClientAbortException: java.net.SocketException: Broken pipe 原因是nginx截断了请求

    [root@localhost nginx]# lltotal 36drwx------. 2 www root 4096 Aug 13 13:25 client_body_tempdrwxr-xr- ...

  7. Java G1学习笔记

    引子 最近遇到很多朋友过来咨询G1调优的问题,我自己去年有专门学过一次G1,但是当时只是看了个皮毛,因此自己也有不少问题.总体来讲,对于G1我有几个疑惑,希望能够在这篇文章中得到解决. G1出现的初衷 ...

  8. CATALINA_BASE与CATALINA_HOME的区别

    http://blog.csdn.net/keda8997110/article/details/21400455 —————————————————————————————————————————— ...

  9. 升级R语言

    Linux (RedHat, CentOS)上升级R语言: sudo yum install R Windows上升级R语言: install.packages("installr" ...

  10. R语言-分组统计

    分组统计 1.假定有一组成绩数据,要求根据性别进行分组统计: > score    ID   score1 score2 Gender1  101 11.35321    0.9   male2 ...