app-framework学习--pannel介绍

每一个panel在智能设备上都显示为一个页面：

<div id="content">内如果有多个panel，每次只能显示一个panel，关闭后才能显示另外一个panel。

  panel的属性:

官方文档：

1. css property - overflow:hidden - When set, this will disable auto-wiring of the scroller. Usefull for panels that need to auto expand, like carousels or google maps
2. selected="true" - When set, this will make the panel the default panel that gets loaded.
3. modal="true" - When set, this turns the panel into a modal window that takes up 100% of the screen (can be changed via CSS).
4. data-header="id" - when set, it will load the custom <header> tag with that ID for that panel
5. data-footer="id" - when set, it will load the custom <footer> tag with that ID for that panel
6. data-nav="id" - when set, it will load the custom <nav> tag with that ID for that panel
7. data-defer="filename.html" - This will load content into the panel from a remote page/url. This is useful for separating out content into different files. af.ui.ready is not available until all files are loaded asynchronously.
8. data-tab="anchor_id" - This will set the selected tab in the bottom navbar to the id. Useful for when you update your panel via JS and not clicking a bottom tab.
9. data-load="func_name" - This is the string name of a function to run when the panel is loaded. The div is passed in as a parameter so you can use a single function and act upon other attributes.
10. data-unload="func_name" - This is the string name of a function to run when the panel is unloaded

  data-header="id"  自定义header

  data-footer="id"  自定义footer

  data-nav="id"     左侧的导航条

  data-defer="filename.html"  可以根据设置的地址给panel加载内容。

  data-tab="anchor_id"   在此panel显示时，将选中footer中id为anchor_id的选项。

  data-load="func_name"  在panel加载后，执行的方法。这个方法在panel每次正好在当前页面时都会执行。

  data-unload="func_name"  在panelunload后执行的方法，也就是离开本panel时执行

  title="home"   可以设定header的显示的内容。

  

   selected="true" 可以是这个panel变成默认的panel

< div class = "panel" id = "about" style = "overflow:hidden" > </ div > <!-- no scrolling -->

 

< div class = "panel" id = "login" selected = "true" > </ div > <!-- Default loaded panel -->

 

< div class = "panel" id = "login" modal = "true" > </ div > <!-- Modal window -->

 

< div class = "panel" id = "about" data-header = "default" > </ div > <!-- Change the header -->

 

< div class = "panel" id = "login" data-footer = "none" > </ div > <!-- This removes the footer!-->

 

< div class = "panel" id = "login" data-nav = "settings" > </ div > <!-- Change the side nav menu -->

 

< div class = "panel" id = "login" data-tab = "settings" > </ div > <!-- Change the selected tab to settings -->

 

< div class = "panel" id = "login" data-defer = "app/login" > </ div > <!-- Load the login content from the HTTP request of app/login -->

 

< div class = "panel" id = "login" data-load = "showCount" data-counter = '5' > </ div > <!-- execute showCount when the panel is loaded -->

< script > function showCount(div){alert($(div).data('counter'));} </ script >

 

< div class = "panel" id = "loggin" data-unload = "showCount" data-counter = '3' > </ div > <!-- execute showCount when the panel is unloaded -->

欢迎加入学习交流群：333492644