[Learn AF3]第二章 App Framework 3.0的组件View——AF3的驱动引擎
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的三种方式:
- 编辑时,通过添加active 类名来指定默认view
- 运行时,通过点击锚定元素来切换:<a href='#viewID' data-transition='slide'>go viewName</a>
- 运行时,通过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的驱动引擎的更多相关文章
- [Learn AF3]第六章 App Framework 3.0中的内置矢量图标
AF3的内置矢量图标 介绍:要使用af3中的图标,必须首先引入icon.css,由于文件中已经内置了字体文件数据,因此不需要引入字体文件支持. <link rel="styleshee ...
- [Learn AF3]第三章 App Framework 3组件之Panel:afui的核心
Panel,afui的核心组件 组件名称:Panel 使用说明:按照官方的说法,panel组件是af3的“核心(heart of the ui)”,panel用于构造应用中独立的内容展示区域, ...
- [Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序
af3的变化非常大.参见[译]Intel App Framework 3.0的变化 一.应用需要引用的js脚本: af3中不在自己实现dom选择器,而是选择基于jquey或兼容jquery的库如zep ...
- [Learn AF3]第七章 App framework组件之Popup
AF3的弹出对话框Popup 组件名称:Popup 是否js控件:是,$.afui.popup 说明:af3中的popup和af2中相比变化不大,依然是通过插件popup来实现的 方法 ...
- [Learn AF3]第五章 App Framework 3组件之Drawer——Side Menu
Drawer——Side menu 组件名称:Drawer 说明:af3中的side menu和af2中有很大变化,af3中的side menu实际上是通过插件$.afui.drawer来实现 ...
- [Learn AF3]第四章 App framework组件之Button
Button 组件名称:Button 是否js控件:否 使用说明:如果说panel组件是af3的“核心(heart of the ui)”,那么Button就是af中的五虎上将之 ...
- [译]Intel App Framework 3.0的变化
App Framework 3.0 原文 IAN M. (Intel) 发布于 2015-02-11 05:24 我们高兴地宣布App Framework 的新版本3.0发布了.你可以获得最新的代码 ...
- 第二章 设计高质量的React组件
第二章 设计高质量的React组件 高质量React组件的原则和方法: 划分组件边界的原则: React组件的数据种类: React组件的生命周期. 2.1 易于维护组件的设计要素 1.高内聚:指的是 ...
- 第二章App框架设计与重构
response标准格式: { "isError":false, "errorType": 0, "errorMessage": " ...
随机推荐
- mysql性能优化(一)
随着项目的上线,关注开始关注服务器的运维和优化,其中后端数据库状态查看和参数调优是比不可少的一步,可能用到的两个小工具: mysqltuner.pl tuning-primer.sh 参考: [1] ...
- ftp 自动上传数据库备份文件
将备份好的数据库文件传到另一个电脑上,自动上传数据库备份文件 #!/bin/bash # ####################################################### ...
- InstallShield打包,以及集成TFS、JenKins
一. InstallShield打包脚本教程,这里面写的很详细了 [海洋女神原创]一个完整的Installshield安装程序实例—艾泽拉斯之海洋女神出品(一)---基本设置一 需要补充的是Insta ...
- Linxu 学习记录
1.配置Java人环境变量,设置后需要使用命令: source /etc/profile 让配置立即生效. # jdk7 settings JAVA_HOME=/usr/jdk1..0_79 JRE_ ...
- Android——使用Toolbar + DrawerLayout快速实现高大上菜单侧滑(转)
今天就来使用官方支持库来快速实现这类效果,需要使用到Toolbar和DrawerLayout,详细步骤如下:(如果你还不知道这两个Widget,先自己Google吧~) 1.首先需要添加appcomp ...
- CycleGAN 各种变变变
转载自 简单介绍了一下GAN和DCGAN的原理.以及如何使用Tensorflow做一个简单的生成图片的demo. Ian Goodfellow对GAN一系列工作总结的ppt,确实精彩,推荐:独家 | ...
- Redis备份
Redis SAVE命令用来创建备份当前Redis数据库. 语法 Redis SAVE命令的基本语法如下所示: 127.0.0.1:6379> SAVE 例子 下面给出的例子创建备份当前的数据库 ...
- git操作:在CentOS7上面搭建GitLab服务器
在这篇文章中将要讲解如何在CentOS7上面搭建本地的GitLab服务器. 一.安装并配置必要的依赖关系 首先要在CentOS系统上面安装所需的依赖:ssh.防火墙.postfix(用于邮件通知).w ...
- Android progressbar条形带背景渐变进度风格进度条
效果图: 代码如下: <ProgressBar android:id="@+id/progressBar" style="?android:attr/progres ...
- Apche Kafka 的生与死 – failover 机制详解
转自:http://www.cnblogs.com/fxjwind/p/4972244.html Kafka 作为 high throughput 的消息中间件,以其性能,简单和稳定性,成为当前实时流 ...