【Intel AF 2.1 学习笔记二】AF中的页面——Panel
Panel
Panel控件是你的app中的独立内容的区域控件。它是af UI的核心。Panel div 元素实际上承载了app中你管理和显示的界面元素和内容。
创建panel控件是相当地容易的:在id为“content”的div元素中添加一个class设置为“panel”的新div元素,然后为其设置id属性和通过data-title属性设置其title。
对于panel控件,App Framework UI背后实现了很多魔法,比如添加滚动逻辑,修复Android平台上的bug,如果你不小心在content元素外面建立了一个panel控件,没关系afui会在framework启动的时候自动将它移动到content元素之中。
Panel控件还有很多属性,例如自动滚动的开关等等,请继续往下看。
Panel的属性和CSS属性
你可以给panel的div元素添加属性来改变它的默认行为,修改一些CSS属性同样可能引起panel默认行为的变化而不仅仅是style改变那么简单。下面就是这些能够修改panel行为的CSS属性和元素属性:
- css property - overflow:hidden - 如果设置了此属性,这会禁止panel控件自动绑定scroller控件。这当panel控件需要自动扩展的时候,如作为carousel或者google map的时候。
- selected="true" - 设置后该panel就会成为app的默认页面。
- modal="true" - 这样设置将使panel成为模态窗口并占据所有的屏幕空间(也是可以通过CSS来调整的)。
- data-header="id" - 绑定某个id的header
- data-footer="id" - 绑定某个id的footer
- data-nav="id" -绑定某个id的左侧sidemenu (通过nav标签声明)
- data-aside="id" -绑定某个id的右侧sidemenu (通过aside标签声明)
- data-defer="filename.html" - 此声明将导致延迟装载某远端的url的内容到panel中。这在分离内容到不同文件中时很有用。只有所有的url内容都异步地load完成后,af.ui.ready事件才会被触发。
- data-tab="anchor_id" - 绑定panel到footer中的tab(a)的id。当你通过脚本而不是用户点击激活panel的时候很有用。
- data-load="func_name" - panel装载完成后执行的函数名称。div元素将会作为参数传递,因此你可以使用独立的函数,能够访问到其他属性。
- data-unload="func_name" - panel卸载后触发的函数名称。
记住,虽然你可以为panel添加任何的属性,但是以上这些属性是特定的属性,它们可以触发AFUI的特定逻辑处理。
以上是官网上的资料汇总,下面是我总结的一些要点:
页面之间的切换(现有页面panel)
- 启动之前,设置selected属性,选择默认页面
- 通过锚链接元素<a href="#panelid" ></a>,可以设置如下属性
data-transition:切换动画 - 调用$.ui.loadContent(“#panelId”,newTab,goBack,transition)
,
其参数意义:transition:要使用的切换动画,goBack:是否退回操作,是回退操作同时影响动画的方向。newTab:true会清空历史,只保留默认页
页面切换动画:
- data-transition="slide" - 向左滑动,回退时向右滑动
- data-transition="up" - 向上滑动,回退时向下
- data-transition="down" - 向下滑动,回退时向上
- data-transition="pop" - 弹出
- data-transition="flip" - 沿Y轴翻滚
- data-transition="fade" - 淡入淡出
【Intel AF 2.1 学习笔记二】AF中的页面——Panel的更多相关文章
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- redis学习笔记(二)——java中jedis的简单使用
redis怎么在java中使用,那就是要用到jedis了,jedis是redis的java版本的客户端实现,原本原本想上来就直接学spring整合redis的,但是一口吃个胖子,还是脚踏实地,从基础开 ...
- 鸟书shell 学习笔记(二) shell中正則表達式相关
通配符与正則表達式的差别 通配符是bash原生支持的语法,正則表達式是处理字符串的一种表示方式, 正則表達式须要支持的工具支持才干够 语系设置 : export LANG=C grep alias 设 ...
- dubbo学习笔记(二)dubbo中的filter
转:https://www.cnblogs.com/cdfive2018/p/10219730.html dubbo框架提供了filter机制的扩展点(本文基于dubbo2.6.0版本). 扩展接口 ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- HTML DOM(学习笔记二)
嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
随机推荐
- hdu3038(种类并查集,推荐)
题目大意:有n次询问,给出a到b区间的总和,问这n次给出的总和中有几次是和前面已近给出的是矛盾的?? 很有意思的一道题目,要是没有做过种类并查集,我肯定会以为这种题目是线段树题目...... 思路:我 ...
- [转]自定义注释@interface的用法
一.什么是注释 说起注释,得先提一提什么是元数据(metadata).所谓元数据就是数据的数据.也就是说,元数据是描述数据的.就象数据表中的字段一样,每个字段描述了这个字段下的数据的含义.而J ...
- redis过期回调以及键空间通知
背景 最近需要涉及一个定时通知的业务,之前的办法是采用定时任务,每秒查询一次.后来了解到Redis的键空间通知机制,其中的过期通知,和业务非常贴合. 键空间通知 下面是Redis中文文档的介绍 键空间 ...
- 大数据 -- Spark
Spark体系架构 zhuangzai Spark体系架构包括如下三个主要组件: 数据存储 API 管理框架 接下来让我们详细了解一下这些组件. 数据存储: Spark用HDFS文件系统存储数据.它可 ...
- WebService工作原理及传输安全问题
WebService是一种能够接收从Internet或者Intranet外其它系统发来的请求,是一种轻量级的独立通讯技术. XML(Extensible MarkUp Language)扩展型标记语言 ...
- VMware下的Centos7联网并设置固定IP
安装CentOS7之后总得联网呀,而且不能一直连服务器,我们需要一个其他工具连它,所以一个固定IP也很重要了. 工具/原料 CentOS7 VMware 方法/步骤 首先设置vmware能 ...
- Java堆外内存管理
Java堆外内存管理 1.JVM可以使用的内存分外2种:堆内存和堆外内存: 堆内存完全由JVM负责分配和释放,如果程序没有缺陷代码导致内存泄露,那么就不会遇到java.lang.OutOfMemo ...
- 依赖注入:Ninject学习笔记
依赖注入(DI)就不多说了,可以自行百度,本笔记整理自Pro ASP.NET MVC5. 1,Ninject安装 Ninject是一个开源的注入容器,可以通过VS的Nuget进行安装.由于是在mvc中 ...
- SpringBoot 无法显示html文件 找不到html文件 如果显示html文件
两种情况: 1.如果使用了 thymeleaf 模板引擎,html文件可以放在 template文件夹中,如果不是一定不要放进去,否则找不到,因为html是静态页面,所以放在把此类文件放在了stati ...
- PCL点云配准(1)
在逆向工程,计算机视觉,文物数字化等领域中,由于点云的不完整,旋转错位,平移错位等,使得要得到的完整的点云就需要对局部点云进行配准,为了得到被测物体的完整数据模型,需要确定一个合适的坐标系,将从各个视 ...