【Intel AF 2.1 学习笔记二】AF中的页面——Panel

Panel

　　Panel控件是你的app中的独立内容的区域控件。它是af UI的核心。Panel div 元素实际上承载了app中你管理和显示的界面元素和内容。

创建panel控件是相当地容易的：在id为“content”的div元素中添加一个class设置为“panel”的新div元素，然后为其设置id属性和通过data-title属性设置其title。

对于panel控件，App Framework UI背后实现了很多魔法，比如添加滚动逻辑，修复Android平台上的bug，如果你不小心在content元素外面建立了一个panel控件，没关系afui会在framework启动的时候自动将它移动到content元素之中。

 

Panel控件还有很多属性，例如自动滚动的开关等等，请继续往下看。

Panel的属性和CSS属性

　　你可以给panel的div元素添加属性来改变它的默认行为，修改一些CSS属性同样可能引起panel默认行为的变化而不仅仅是style改变那么简单。下面就是这些能够修改panel行为的CSS属性和元素属性：

1. css property - overflow:hidden - 如果设置了此属性，这会禁止panel控件自动绑定scroller控件。这当panel控件需要自动扩展的时候，如作为carousel或者google map的时候。
2. selected="true" - 设置后该panel就会成为app的默认页面。
3. modal="true" - 这样设置将使panel成为模态窗口并占据所有的屏幕空间（也是可以通过CSS来调整的）。
4. data-header="id" - 绑定某个id的header
5. data-footer="id" - 绑定某个id的footer
6. data-nav="id" -绑定某个id的左侧sidemenu （通过nav标签声明）
7. data-aside="id" -绑定某个id的右侧sidemenu （通过aside标签声明）
8. data-defer="filename.html" - 此声明将导致延迟装载某远端的url的内容到panel中。这在分离内容到不同文件中时很有用。只有所有的url内容都异步地load完成后，af.ui.ready事件才会被触发。
9. data-tab="anchor_id" - 绑定panel到footer中的tab（a）的id。当你通过脚本而不是用户点击激活panel的时候很有用。
10. data-load="func_name" - panel装载完成后执行的函数名称。div元素将会作为参数传递，因此你可以使用独立的函数，能够访问到其他属性。
11. data-unload="func_name" - panel卸载后触发的函数名称。

记住，虽然你可以为panel添加任何的属性，但是以上这些属性是特定的属性，它们可以触发AFUI的特定逻辑处理。

---

以上是官网上的资料汇总，下面是我总结的一些要点：

页面之间的切换（现有页面panel）

1. 启动之前，设置selected属性，选择默认页面
2. 通过锚链接元素<a href="#panelid" ></a>，可以设置如下属性
   data-transition：切换动画
3. 调用$.ui.loadContent(“#panelId”,newTab,goBack,transition)，

　　　　其参数意义：transition：要使用的切换动画，goBack：是否退回操作，是回退操作同时影响动画的方向。newTab：true会清空历史，只保留默认页

页面切换动画：

• data-transition="slide" - 向左滑动，回退时向右滑动
• data-transition="up" - 向上滑动，回退时向下
• data-transition="down" - 向下滑动，回退时向上
• data-transition="pop" - 弹出
• data-transition="flip" - 沿Y轴翻滚
• data-transition="fade" - 淡入淡出