[Learn AF3] Chapter III The core of the Panel:afui of the APP Framework 3 components

Core components of Panel,afui

Component Name : Panel

Instructions for use : according to the official statement, the panel component is AF3 's "core (heart of the UI)", a panel used to construct a separate content presentation area in the application, a place to actually load information and user interaction controls, The Panle control also needs to be declared in the DIV element of class= "pages".

method: The same panel is not a JavaScript class and has no proprietary method.

Properties:The declarative properties that are available to the Panel, speaking of which, I have to say that the Intel App framework documentation is really rotten to nothing, Af3 quit for a while, there are many af2x things, such as the panel's properties selected, In the AF3 is abandoned, but should instead add "active" this class!

Add the "active" class name in class to indicate the panel that is activated by default in the view of Panle ( set property ' selected='true"in 2.x) ). Data-include="filename.html" -Causes the contents of the file to be loaded into the panel, It is useful when the party needs to separate content into different files (when the application is large). Af.ui.ready events are triggered only when all the files are loaded. data-tab="anchor_id" -sets the ID of the A element selected on footer when the panel activates and is particularly useful when you activate a panel through a script.

event:Panel's event

panelbeforeload -This event is fired before the panel was transitioned/loaded  -This event was fired when A panel has been loaded. panelbeforeunload -This event is fired before the panel was transitioned/unloaded  -this event is fired When a panel has been unloaded.

use : <div class= "Panel" ></div>

Schematic code:

<Divclass= "pages">          <Divclass= "Panel Active"ID= "Pagehome"Data-nav= "Leftmenu"Data-aside= "Rightmenu"Data-title= "Title for pane1">                                    <ulclass= "List">                    <Li><H3>Great cases</H3></Li>                    <Li><Div>Case 1</Div></Li>                    <Liclass= "Divider"></Li>                    <Li><H3>New Templetes</H3></Li>                    <Li><Div>Template 2</Div></Li>                    <Liclass= "Divider"></Li>                    <Li><H3></H3></Li>                    <Li><ulclass= "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>                             <Divclass= "Panel"ID= "Page2"Data-nav= "Leftmenu" data-title= "title for Panel2"style= "Overflow:hidden">                            </Div>        </Div>

Chapter II Component view of App Framework 3.0, AF3 driving force [Learn AF3 Series] button for App Framework 3 component fourth:

[Learn AF3] Chapter III The core of the APP Framework 3 component Panel:afui