标签：
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：
[Learn AF3]第三章 App Framework 3组件之Panel：afui的核心
标签：
原文地址：http://www.cnblogs.com/dajianshi/p/4317786.html
