Language: ENCN

Inline Pages (DOM Cache)

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

Enable Inline Pages

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
});

Inline Pages Structure

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

Inline Pages Structure With Dynamic Navbar

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

Inline Page URL

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>

Go back in navigation

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>

Load Inline Pages using JavaScript

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

Going back using JavaScript

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

Conclusion

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