Pages

Page in Framework7 has the same meaning as when you think about web pages.

Let's look at page' HTML structure:

<body>
  ...
  <!-- Views -->
  <div class="views">
    <!-- Your main view -->
    <div class="view view-main">
      <!-- Pages -->
      <div class="pages">
        <div class="page" data-page="home">
          <div class="page-content">
            ... page content goes here ...
          </div>
        </div>
      </div>
    </div>
    <!-- Another view -->
    <div class="view another-view">
      <!-- Pages -->
      <div class="pages">
        <div class="page" data-page="home-another">
          <div class="page-content">
            ... page content goes here ...
          </div>
        </div>
      </div>
    </div>          
  </div>
  ...
</body>

<div class="pages"> is a wrapper container for pages within a single View. It is required because all page transitions happen here.

Few important notes

  • In main layout (index.html) each Page should be inside of Pages container (<div class="pages">), which always should be a child of View (<div class="view">).

data-page

As you may note each page has data-page attribute with unique page name. It is not required but very recommended to use it.

This attribute's value is very useful within "page events" or with "page callbacks" and help us to define which page is loaded to make required manipulations.

Page Content

All visual content (like list views, forms, etc.) we should put inside of <div class="page-content"> that should be a child of <div class="page">! This is required for correct styling, layout and scrolling

Page Events

Now, let's look at one of the most important part of page navigation - page events. These events allow us to manipulate just loaded pages by executing JavaScript for specific pages:

Event Target Description
page:beforeinit Page Element<div class="page"> Event will be triggered when Framework7 just inserts new page to DOM
page:init Page Element<div class="page"> Event will be triggered after Framework7 initialize required page's components and navbar
page:reinit Page Element<div class="page"> This event will be triggered when cached page becomes visible. It is only applicaple for Inline Pages (DOM cached pages)
page:beforeanimation Page Element<div class="page"> Event will be triggered when everything initialized and page (and navbar) is ready to be animated
page:afteranimation Page Element<div class="page"> Event will be triggered after page (and navbar) animation
page:beforeremove Page Element<div class="page"> Event will be triggered right before Page will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory
page:back Page Element<div class="page"> Event will be triggered right before "back" transition. Difference with "pageBeforeAnimation" is that this event will be triggered for the "old" page - page that slides from center to right
page:afterback Page Element<div class="page"> Event will be triggered right after "back" transition. Difference with "pageAfterAnimation" is that this event will be triggered for the "old" page - page that slides from center to right

Let's see how we can use these events. There are two ways to add page events handler:

// Option 1. Using one 'page:init' handler for all pages (recommended way):
$$(document).on('page:init', function (e) {
  // Do something here when page loaded and initialized
  
})
 
// Option 2. Using live 'page:init' event handlers for each page (not recommended)
$$(document).on('page:init', '.page[data-page="about"]', function (e) {
  // Do something here when page with data-page="about" attribute loaded and initialized
})          

As you may see it is pretty easy, but hey, how to determine which page is loaded in first option when we use only one handler? For this case we have cool Page Dage in event details:

Page Data

One of the most convenient parts in "page events" and page callbacks is that they contains so called Page Data:

// In page callbacks:
myApp.onPageInit('about', function (page) {
  // "page" variable contains all required information about loaded and initialized page 
})
 
// In page events:
$$(document).on('page:init', function (e) {
  // Page Data contains all required information about loaded and initialized page 
  var page = e.detail.page;
})

Now, in the example above we have Page Data in page variable. It is an object with the following properties:

Page Data Properties
page.name Contains string value of data-page attribute
page.url Contains string URL of just loaded page
page.query object with URL query parameters. If your page URL is "about.html?id=10&count=20&color=blue" then page.query will contain:
{
  id: '10',
  count: '20',
  color: 'blue'
}                  
page.view object. View instance that contains this page (if this View was initialized)
page.container Link to Page HTMLElement
page.from string - direction of where Page comes from. It will be "right" if you load new page, and "left" - if page comes after you click on "Back" button
page.navbarInnerContainer Link to related "navbar-inner" HTMLElement. Only for Dynamic Navbars
page.swipeBack boolean. Equals to true if page animation was initiated by swipe back. Available only within onPageBefore/AfterAnimation callbacks/events.
page.context object. Template7 context that was passed for this page when using Template7 pages
page.fromPage object. Page Data object of the previously active page

Ok, let's look again how we can using one event handler write code for different pages

$$(document).on('page:init', function (e) {
    var page = e.detail.page;
    // Code for About page
    if (page.name === 'about') {
        // We need to get count GET parameter from URL (about.html?count=10)
        var count = page.query.count;
        // Now we can generate some dummy list
        var listHTML = '<ul>';
        for (var i = 0; i < count; i++) {
            listHTML += '<li>' + i + '</li>';
        }
        listHTML += '</ul>';
        // And insert generated list to page content
        $$(page.container).find('.page-content').append(listHTML);
    }
    // Code for Services page
    if (page.name === 'services') {
        myApp.alert('Here comes our services!');
    }
});

What's next

Now we need to understand how the navigation between pages works. Also look at Page Callbacks to know how to use specific code for different pages without Page Events.