appframework基础 : 四、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 -->

 

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