标签：

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的特定逻辑处理。

以上是官网上的资料翻译，下面就是我自己的一些心得了:)

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

标签：

原文地址：http://www.cnblogs.com/dajianshi/p/4276310.html