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