With this feature you may put all of your pages in DOM on app load, so you don't need to load any pages using Ajax or create them dynamically
By default, inline pages behavior is disabled. To enable it, we need to pass View's domCache: true parameter:
var mainView = myApp.addView('.view-main', {
domCache: true //enable inline pages
});As we said above, all of your pages could be already in DOM in index file on app load. So let's look at pages structure in index file:
<html>
<head>...</head>
<body>
...
<!-- Views -->
<div class="views">
<!-- View -->
<div class="view view-main">
<!-- Pages -->
<div class="pages">
<!-- Home page -->
<div class="page" data-page="index">
<div class="page-content">
<p>Home page</p>
</div>
</div>
<!-- About page -->
<div class="page cached" data-page="about">
<div class="page-content">
<p>About page</p>
</div>
</div>
<!-- Services page -->
<div class="page cached" data-page="services">
<div class="page-content">
<p>Services page</p>
</div>
</div>
</div>
</div>
</div>
...
</body>
</html>As you may see it is almost the same as in usual app layout, the only difference is that we already have all required pages and all additional pages have additional "cached" class
All additional (not currently active) pages should have additional cached class
Structure with Dynamic Navbar is supported only in iOS Theme
As you may see in Nabvar & Toolbar layout types dynamic navbar requires through-type layout. But in this layout type navbar is not inside of page.
So we also need put few navbar inners:
<html>
<head>...</head>
<body>
...
<!-- Views -->
<div class="views">
<!-- View -->
<div class="view view-main">
<!-- Navbar -->
<div class="navbar">
<!-- Home page navbar -->
<div class="navbar-inner" data-page="index">
<div class="center">Home</div>
</div>
<!-- About page navbar -->
<div class="navbar-inner cached" data-page="about">
<div class="center">About</div>
</div>
<!-- Services page navbar -->
<div class="navbar-inner cached" data-page="services">
<div class="center">Services</div>
</div>
</div>
<!-- Pages -->
<div class="pages navbar-through">
<!-- Home page -->
<div class="page" data-page="index">
<div class="page-content">
<p>Home page</p>
</div>
</div>
<!-- About page -->
<div class="page cached" data-page="about">
<div class="page-content">
<p>About page</p>
</div>
</div>
<!-- Services page -->
<div class="page cached" data-page="services">
<div class="page-content">
<p>Services page</p>
</div>
</div>
</div>
</div>
</div>
...
</body>
</html> All additional (not currently active) navbar-inner should have additional cached class
When using Dynamic Navbar with Inline Pages, every related "navbar-inner" should have the same related data-page attribute
Now, when we have our App structure with Views and Inline Pages we need to understand how we can create links to load such inline pages.
Inline Page URL follows this rule: #{{pageName}}, where {{pageName}} will be equal to loaded page name (data-page attribute)
So, if we want to load "about" page we may use the following link:
<a href="#about">Go to About page</a>There are absolutely the same rules as for usual Ajax Pages, the only difference is the page URL. All we need is to add "back" class to link:
<div class="page" data-page="about">
<!-- Just add additional "back" class to link -->
<a href="#index" class="back"> Go back to home page </a>
</div>It is also possible to load inline page using JavaScript API, not only using <a> tags. For this case we may use .router.load() View Navigation Methods:
// Initialize App
var myApp = new Framework7();
// Initialize View
var mainView = myApp.addView('.view-main')
// Load about page:
mainView.router.load({pageName: 'about'});Note, that it is only possible for Views that were initialized
You can also get the same as when you click "back" link but with JavaScript using .router.back() View Navigation Methods:
// Initialize App
var myApp = new Framework7();
// Initialize View
var mainView = myApp.addView('.view-main')
// Go back on main View
mainView.router.back();It is also possible only for Views that were initialized
As you may see linking and navigation for inline pages is pretty simple, all you should remember is that:
you may use usual <a> tags with plain "href" attribute that contains #{{pageName}} of required page
just add "back" class to any link (<a href="#index" class="back">) to make it work like "back" link