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

时间:2022-09-17 13:18:05

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. &lbrack;Learn AF3&rsqb;第六章 App Framework 3&period;0中的内置矢量图标

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

  2. &lbrack;Learn AF3&rsqb;第三章 App Framework 3组件之Panel:afui的核心

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

  3. &lbrack;Learn AF3&rsqb;第一章 如何使用App Framework 3&period;0 构造应用程序

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

  4. &lbrack;Learn AF3&rsqb;第七章 App framework组件之Popup

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

  5. &lbrack;Learn AF3&rsqb;第五章 App Framework 3组件之Drawer——Side Menu

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

  6. &lbrack;Learn AF3&rsqb;第四章 App framework组件之Button

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

  7. &lbrack;译&rsqb;Intel App Framework 3&period;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": &quot ...

随机推荐

  1. &lbrack;C&num;&rsqb;多线程下载

    发现电脑里以前编写的下载程序... 做个记录,那时做的挺匆忙的,没用委托,通过公开出窗体来修改下载进度,做的比较乱... ==!! 程序具体功能(流程): 1.检测系统托盘图标内的进程名是否符合要求 ...

  2. 基于CentOS与VmwareStation10搭建Oracle11G RAC 64集群环境:4&period;安装Oracle RAC FAQ-4&period;4&period;无法图形化安装Grid Infrastructure

    无法图形化安装: [grid@linuxrac1 grid]$ ./runInstaller Starting Oracle Universal Installer... Checking Temp ...

  3. 一个网站的head和body是如何进行优化的

    我们知道任何一个网站都要被解析成html后,浏览器才能识别,换句话说,用任何一门技术做的网站,都是被浏览器解析成为html.因此我们必须懂得,一个html页面由三部分组成,那就是html的开始标签和结 ...

  4. Spring IOC(三)依赖注入

    本系列目录: Spring IOC(一)概览 Spring IOC(二)容器初始化 Spring IOC(三)依赖注入 Spring IOC(四)总结 目录 1.AbstractBeanFactory ...

  5. CSRF 漏洞测试

    CSRF简介: CSRF中文名:跨站请求伪造,英文译为:Cross-site request forgery,CSRF攻击就是attacker(攻击者)利用victim(受害者)尚未失效的身份认证信息 ...

  6. golang的map

    map--字典 map的基本使用: package main import "fmt" // 先声明 type PersonInfo struct { id string name ...

  7. UOJ&period;35&period;&lbrack;模板&rsqb;后缀排序&lpar;后缀数组 倍增&rpar;

    题目链接 论找到一个好的教程的正确性.. 后缀数组 下标从1编号: //299ms 2560kb #include <cstdio> #include <cstring> #i ...

  8. sql server 小技巧&lpar;6&rpar; Cannot resolve the collation conflict between &quot&semi;Latin1&lowbar;General&lowbar;CI&lowbar;AI&quot&semi; and &quot&semi;Chinese&lowbar;PRC&lowbar;CI&lowbar;AS&quot&semi; in the equal to operation

    今天查询二个db,出现这个错误,二种方法,一种是把db里的collation改成一样的:如果不方便可以直接在sql语句后面转一下: select * from table where crm_mscr ...

  9. 淘宝、天猫又开源了一个动态化、高性能的UI框架

    前言 淘宝.天猫一直致力于解决 页面动态化的问题 在2017年的4月发布了v1.0解决方案:Tangram模型 及其对应的 Android库 vlayout,该解决方案在手机淘宝.天猫 Android ...

  10. iOS实现传递不定长的多个参数

    我们在使用苹果官方的文档的时候会发现可传不定数的参数例如: // [[UIAlertView alloc]initWithTitle:<#(nullable NSString *)#> m ...