The change of AF3 is very big. See also [Translate]intel App Framework 3.0 Changes
First, the application needs to reference the JS script:
Instead of implementing the DOM selector in AF3, you choose Jquey-based or jquery-compatible libraries such as zepto, and touch layer also relies on fastclick. Here is the head part of the AF3 application code, the contrast 2.x change is very obvious, here the introduction of jquery and Fastclick, without the Appframework.js
<Head> <title>LearAF3</title> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Linkrel= "stylesheet"type= "Text/css"href= "Js/af3.0/af.ui.base.css" /> <Linkrel= "stylesheet"type= "Text/css"href= "Js/af3.0/af.ui.css" /> <Linkrel= "stylesheet"type= "Text/css"href= "Js/af3.0/icons.min.css" /> <Scriptsrc= "Js/libs/jquery/jquery-2.1.1.min.js"></Script> <Scriptsrc= "Js/libs/fastclick/fastclick-1.0.3.min.js"></Script> <Scriptsrc= "Js/af3.0/appframework.ui.js"></Script>...
</Head>
Second, the page organization structure:
AF3 the application of visual elements in the organization changes greatly, A change in the 2.x era panel and header,footer chaotic phenomenon, 3.0 new added a top-level element type (except Afui) view, now Header,footer and panel pages belong to the view element, a view inside the panel has the same header and Foo ter, need a different footer or header need to create a new view, I think this is more refreshing:), see:
<body> <div class= "View" id= "Viewmain" >It is important to note that the panel element in the view also needs to wrap a layer of pages elements, even if there is only one panel.
The code also shows the three ways to switch view:
- When editing, specify the default view by adding the active class name
- At run time, switch by anchoring the view's ID
- At run time, through the JS function loadcontent
Third, custom themes:
System theme is used by default in AF3, if you need to customize theme, you need to set Useosthemes to False
$.afui.useosthemes=false//Thismust is set before $ (document). Ready ()Also, you need to wrap a layer of DIV elements with ID afui outside of the view and specify the class of the corresponding theme. AF3 built-in theme are:
Ios,ios7,android (Light,dark), Win8 (light dark), BB/*blackberry*/, TizenIv. Overall Code:
<!DOCTYPE HTML><!--to the license header, choose License Headers in Project properties.to change this template file, choose Tools | Templatesand Open the template in the editor. -<HTML> <Head> <title>LearAF3</title> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Linkrel= "stylesheet"type= "Text/css"href= "Js/af3.0/af.ui.base.css" /> <Linkrel= "stylesheet"type= "Text/css"href= "Js/af3.0/af.ui.css" /> <Linkrel= "stylesheet"type= "Text/css"href= "Js/af3.0/icons.min.css" /> <Scriptsrc= "Js/libs/jquery/jquery-2.1.1.min.js"></Script> <Scriptsrc= "Js/libs/fastclick/fastclick-1.0.3.min.js"></Script> <Scriptsrc= "Js/af3.0/appframework.ui.js"></Script> <Script>$.afui.useosthemes=false; </Script> </Head> <Body> <DivID= "Afui"class= "BB"> <DivID= "SplashScreen"> <H1>Lear App Framework 3</H1> <spanclass= "icon loading">Loading ...</span> </Div> <Divclass= "View"ID= "Viewmain"> <Header> <H1class= "title">Main View</H1> <aclass= "button icon Menubutton"style= "Float:right"></a> </Header> <Divclass= "pages"> <Divclass= "Panel"ID= "Page1"> <P>This is the page in main view</P> </Div> </Div> <Footer> <adata-transition= "Up"class= "icon HTML5"onclick= "$.afui.loadcontent (' #view2 ', False,false, ' up ');">Next View</a> </Footer> </Div> <Divclass= "View Active"ID= "View2"> <Header> <H1class= "title">View 22</H1> <aclass= "button icon Menubutton"style= "Float:right"></a> </Header> <Divclass= "pages"> <Divclass= "Panel Active"ID= "Page2" > <P>This is the page in view 2</P> </Div> </Div> <Footer> <ahref= "#viewMain"data-transition= "Up:back"class= "icon Home">Back to Main view</a> </Footer> </Div> </Div> </Body></HTML>View CodeV. Navigation history:
Af3 The browsing history for each view, individually recorded page (panel).
It is now found that the default panel must be indicated under each view in AF3, otherwise the default panel will not be displayed. And you need to add the active class name to the panel, not by data-selected= "true"
[Structure of the Lear AF3]AF3 application
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
