[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>

af3页面切换的bug： 通过按钮切换到不同view中的panel，第一遍的时候可以，但是再次切换往往失灵，调试发现由于panel变换为当前页面后，af3添加了active类，最后的页面就会覆盖前面的页面成为默认页面，所以再次切换页面时，每个view中都只有一个固定的panel会显示，而不是指定的panel。我的解决方法是，在view的panelbeforeunload事件中自己手动移除panel的active类。

$('.view').on('panelbeforeunload',function(){

                     console.log('view before unload')

                     $(this).find('.panel').removeClass('active')

                 })

---

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