Introduction of views and view
1,views (<div class= "views" >)
(1) Views are the main container of application. There can be only one views in an application.
(2) The views are also the containers for all View (excluding Modal and Panel).
2,view (<div class= "View" >)
(1) View in the application is a separate part, it has its own settings, page switching and history.
(2) Each view can have different navigation bars, toolbar layouts, and different styles. So the View is like another application embedded in the application. This feature allows you to manipulate different parts of an application separately.
(3) View can be placed anywhere in the application, but there is an important rule-all visible View should be placed in views (<div class= "views" >). Because we will be used to do the page switch animation.
Second, the creation and initialization of the view
Define Views in 1,html page
Let's say we're going to do an application that contains two modules (two views) and the home code results are as follows:
<body>
...
<div class= "Panel panel-left panel-cover" >
<div class= "View Panel-view" > ... </div>
</div>
<!--views-->
<div class= "views" >
<!--main view-->
<div class= "View View-main" >
<!--navbar-->
<!--Pages-->
<!--toolbar-->
</div>
<!--another view-->
<div class= "View Another-view" >
<!--navbar-->
<!--Pages-->
<!--toolbar-->
</div>
</div>
<div class= "Popup" >
<div class= "View Popup-view" > ... </div>
</div>
...
</body>
2, initializing the View
We've already created the desired view in HTML, and then we're going to initialize our view in JavaScript.
var myApp = new Framework7 ({
// ...
});
/* Initialize View * *
var Mainview = Myapp.addview ('. View-main ', {
Dynamicnavbar:true
})
var Anotherview = Myapp.addview ('. Another-view ');
Access and use of views
The
1,view methods and properties
View instance has many useful ways to manipulate itself. In the example above, we have stored the two-view initialized instances in both Mainview and Anotherview variables. Take Mainview as an example to see these methods and parameters.
Properties
mainview.params initialization parameters, you can read or override certain properties, such as MainView.params.linksView = '. Another-view '
mainview.history Returns an array of strings containing all histories, each of which is the URL of a page
mainview.contentcache returns the cached page. This property can only be used when the content is dynamically generated.
mainview.url The URL of the current page
mainview.pagescontainer the current pageshtml element
mainview.activepage The page Data
mainview.main The current page is the main view
Mainview.router router object, and there are many routes-related methods
Methods
MainView.router.load (options) read more about the IT in router API
MainView.router.back (options) read More about the IT in Router API
Mainview.hidenavbar () Hide navigation bar in Current View
Mainview.shownavbar () show navigation bar in Current view
Mainview.hidetoolbar () Hide toolbars in Current view
Mainview.showtoolbar () Show toolbars in Current View
Mainview.destroy () Destroy initialized view, unbind event, disable browse navigation
2, get the current view instance
Sometimes we need to get to the current active view, or as a pop-up window, pop-up panel, and so on view. You can use the Myapp.getcurrentview () method.
For example, if you initialize a view in one panel (panel) and the Panel is currently open, you will get this view in this way.
Similarly, if we use the Tab bar Layout (tab bar layout), this method will get the current active tab corresponding to the view.
(1) If there is only one active view
var CurrentView = Myapp.getcurrentview ();
(2) If you currently have more than one active view (such as a Split view layout), you must add an index parameter.
Myapp.getcurrentview (Index)
3, using HTML elements to get view instance
When we initialize the view, Framework7 adds an attribute on the element so that we can access it through JS.
var viewselement = $$ ('. View-main ') [0];
var viewinstance = Viewselement.f7view;
4, get all the view instances
All view instances are also stored in an application instance's Views attribute, such as we can find the main view
for (var i = 0; i < myApp.views.length i + +) {
var view = Myapp.views[i];
if (view.main) Myapp.alert (' I found main view! ')
}
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
