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

Panel,afui的核心组件



组件名称:Panel

    使用说明:按照官方的说法,panel组件是af3的“核心(heart of the ui)”,panel用于构造应用中独立的内容展示区域,是真正用于装载信息和用户交互的控件的地方,panle控件还需要声明在class="pages"的div元素之中。

    方法:同样panel并非一个javascript的类,也没有专属方法。

属性:panel可用的声明式属性,说到这个,不得不说intel app framework的文档真的是烂到没话说,af3退出有一段时间了,里面好多af2x的东西,比如panel的属性selected,在af3中就被抛弃了,而应该改为添加“active”这个class !

class="active" 在class中添加“active” 类名,指出panle所在view中默认激活的panel,(在2.x中是设置属性‘selected="true"’).
data-include="filename.html" - 导致装载该文件的内容到panel中,党需要分离内容到不同文件中时很有用(当应用较大的时候)。af.ui.ready的事件只有在所有的文件都被装载后才会触发。
data-tab="anchor_id" - 设置panel激活时在footer上选中的A元素的id,当你通过脚本激活panel时特别有用。

    事件: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="panel"></div>

示意代码:


<div class="pages">
          <div class="panel  active" id="pageHome"  data-nav="leftMenu" data-aside="rightMenu" data-title="Title for pane1">
                <ul class="list">
                    <li><h3>great cases</h3></li>
                    <li><div>case 1</div></li>
                    <li class="divider"></li>
                    <li><h3>new templetes</h3></li>
                    <li><div>template 2</div></li>
                    <li class="divider"></li>
                    <li><h3></h3></li>
                    <li><ul class="list inset" style="display:inline-block;border:solid 1px blue;corner-radius:2px;"><li><div> baced</div></li><li><div> 222</div></li></ul></li>
                </ul>        

          </div>     

        <div class="panel" id="page2"  data-nav="leftMenu" data-title="title for panel2" style="overflow:hidden">

        </div>
    </div>

第二章 App Framework 3.0的组件View, af3的驱动力 [Learn AF3系列] 第四章 App Framework 3组件之Button:

时间: 2024-11-05 23:33:38

[Learn AF3]第三章 App Framework 3组件之Panel:afui的核心的相关文章

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

Drawer——Side menu 组件名称:Drawer     说明:af3中的side menu和af2中有很大变化,af3中的side menu实际上是通过插件$.afui.drawer来实现的     方法: show (id, position, string) 显示side menu,参数中指定的是nav的 id, 要显示的位置:left.right,指定变换效果:cover,reveal,push hide (string,string) 隐藏Side Menu,参数为nav的i

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

Button    组件名称:Button     是否js控件:否     使用说明:如果说panel组件是af3的“核心(heart of the ui)”,那么Button就是af中的五虎上将之一,在af app中使用的频率非常之高. 1,在af中你可以让任何元素表现的像个button控件,比如下面的三种元素,将会呈现的一模一样: 1 <a class="button">Home</a> 2 <span class="button"

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

AF3的弹出对话框Popup 组件名称:Popup 是否js控件:是,$.afui.popup     说明:af3中的popup和af2中相比变化不大,依然是通过插件popup来实现的     方法: show () 显示popup对话框 hide () 隐藏popup对话框 构造参数:构造popup的时候,可以简单的传递一个字符串,此时popup显示为一个alert对话框.也可以传递一个object对象,对象可以具有如下的属性设置: 1 id (string) popup 包裹DOM元素的I

我的Android第三章:Android的组件介绍

小编摘录了Android文档介绍Android四大组件的基本内容,感觉文档的内容写的很详细所以小编将它写入了博客 Android 使用Java语言开发.Android SDK 工具编译代码-以及任意数据并连同相关资源打包进一个Android 包内,它是一个以.apk 为后缀的压缩文件. 一个 .apk 文件中的 所有代码就是一个程序.这个.apk文件就用于在Android设备上安装这个程序. 一旦安装成功,这个Android程序就拥有了自己独立的运行沙盒(沙盒是在受限的安全环境中运行应用程序的一

RESTful【第三章】:序列化组件的使用及接口设计

序列化组件的使用及接口设计 一.Django原生的serializer(序列化) 使用步骤: 1.导入模块 from django.core.serializers import serialize 2.获取queryset 3.对queryset进行序列化 4.将序列化后的数据,响应给客户端 实例: #1.导入Django自带的原生的序列化模块 from django.core.serializers import serialize class CourseView(APIView): de

[Learn AF3] App Framework 3.0中的内置矢量图标

AF3的内置矢量图标 介绍:要使用af3中的图标,必须首先引入icon.css,由于文件中已经内置了字体文件数据,因此不需要引入字体文件支持. <link rel="stylesheet" type="text/css" href="js/af3.0/icons.min.css" /> 使用:引入icon.css文件之后,我们就可以通过给需要显示图标的元素添加css类名来显示图标(实际上就是一个矢量字符),注意需要同时添加icon 和

Learn Prolog Now 翻译 - 第三章 - 递归 - 第四节,更多的实践和练习

在学习了前三章内容后,我们应该对Prolog编程有了直观和理性的认识.由于合一.变量初始化.证明搜索和递归都是Prolog的核心概念,所以有如下更多的一些实践和练习. 这里我会先录入题目,后期再给出我自己的程序代码和一些思考. 实践1 试想有如下的描述迷宫的知识库.其中的事实描述了点和点之间的联通关系,即connected/2谓词逻辑给出了这样的事实:迷宫中能从参数1的点,直接到达参数2的点.而且, 联通关系是有方向的.单向不能往返的: connected(1,2). connected(3,4

Android艺术开发探索第三章————View的事件体系(下)

Android艺术开发探索第三章----View的事件体系(下) 在这里就能学习到很多,主要还是对View的事件分发做一个体系的了解 一.View的事件分发 上篇大致的说了一下View的基础知识和滑动,现在我们再来聊聊一个比较核心的知识点,那就是事件分发了,而且他还是一个难点,我们更加应该掌握,View的滑动冲突一直都是很苦恼的,这里,我们就来一起探索一下 1.点击事件的传递规则 我们分析的点击事件可不是View.OnClickListener,而是我们MotionEvent,即点击事件,关于M

《从0到1》笔记 第三章 所有成功的企业都是不同的

第三章 所有成功的企业都是不同的----科技企业的创新就是为了垄断,成功的科技企业都是垄断式的. 在商界,钱就是一切,或至少是非常重要.垄断者除了想着赚钱外还有余力想其它事情,而非垄断者就不行.在完全竞争中,企业着眼于短期利益,不可能对未来进行长期规划.要想企业从每日的生成竞赛中解脱出来,唯一的方法就是:获取垄断利润. 企业成功的原因各有不同:每个垄断企业都是靠解决独一无二的问题而获得垄断地位:而企业失败的原因却相同:它们都无法逃脱竞争. 国内的垄断者,如百度,解决了中文搜索的问题,垄断了搜索的