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

浏览数：24 / 时间：2015年06月11日

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>