Framework7 S1E3 : Multiple Pages

Framework7 S1E3 : Multiple Pages



Language :
Platform :
Rating : 5/5 (1)




Introduction

Given that in our previous framework7 episodes we've been working with a single page, let's now see how to work with multiple pages. Basically we'll have 4 buttons. Each button corresponds to a given individual page. When then button is clicked, we open its corresponsing page just within our mainview. This ensures that our partial pages have navigation bar as well as toolbar as you would expect.

Questions this Project answers.

  • Framework7 multiple pages.
  • Getting started with framework7.
  • Framework7 tutorial.

Libraries Used

These are the third parties used in this project.

Screenshot

  • Here's the screenshot of the project.
    Framework7 Multi-Pages

Tools used

Language: Javascript,HTML,CSS
Framework: Framework7
IDE: PHPStorm.
Topic: Framework7 download and install.

Source Code

Lets have a look at the source code.

index.htmlcentaurus.htmlic1011.htmlsombrero.htmlwhirlpool.htmlmain.jsVideo TutorialDownload
  • Our index.html file.
  • We reference Framework7 css files in the header.
  • We also reference our javascript scripts at the base of the body.
<!DOCTYPE html>
<html>
  <head>
    <!--META ATTRIBUTES-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Camposha.info</title>
    <!-- REFERENCE CSS-->
    <link rel="stylesheet" href="assets/css/framework7.material.min.css">
    <link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
    <link rel="stylesheet" href="assets/css/my-app.css">
  </head>
  <body>
    <!-- VIEWS-->
    <div class="views">
      <!-- Your main view, should have "view-main" class-->
      <div class="view view-main" data-url="/">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner sliding">
            <!-- We have home navbar without left link-->
            <div class="center">Camposha.info</div>
            <div class="right">
              <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only"> <i class="icon icon-bars"></i></a>
            </div>
          </div>
        </div>
        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
          <!-- Page, data-page contains page name-->
          <div data-page="index" class="page">
            <!-- Scrollable page content-->
            <div class="page-content">
              <div class="content-block-title"><h1>Welcome To Camposha.</h1></div>
              <div class="content-block">
                <div class="content-block-inner">
                  <h5>Camposha.info is a tutorials website.</h5>
                  <P> We do Java,Javascript,C#, Python, PHP among other web technologies.</P>
                </div>
              </div>
              <div class="content-block-title"><h2>Browse Pages</h2></div>
              <div class="content-block">
                <!--Rows-->
                <div class="row">
                  <!--Columns-->
                  <div class="col-50"><a href="pages/Centaurus.html" id="cyanBtn" class="button button-raised button-fill color-cyan">Fly To Centaurus A</a></div>
                  <div class="col-50"><a href="pages/IC1011.html" id="tealBtn" class="button button-raised button-fill color-teal">Fly To IC1011</a></div>
                </div>
                <br>
                <div class="row">
                  <div class="col-50"><a href="pages/Sombrero.html" id="greenBtn" class="button button-raised button-fill color-green">Fly To Sombrero</a></div>
                  <div class="col-50"><a href="pages/WhirlPool.html" id="blueBtn" class="button button-raised button-fill color-blue">Fly To Whirlpool</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner"><a href="pages/IC1011.html" class="link">IC 1011</a><a href="pages/Sombrero.html" class="link">Sombrero</a></div>
        </div>
      </div>
    </div>
    <!-- REFERENCE SCRIPTS-->
    <script type="text/javascript" src="assets/js/framework7.min.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
  </body>
</html>

 

  • Our centaurus.html file.
  • Is a partial page that will be rendered in our main-view.
<!-- Page, data-page contains page name-->
<div data-page="centaurus" class="page">
    <!-- TOP NAVBAR-->
    <div class="navbar">
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                </a>
            </div>
            <div class="title">Centaurus A</div>
        </div>
    </div>
    <!-- Scrollable page content-->
    <div class="page-content">
        <div class="content-block">
            <div class="content-block-inner">
                <h1>Here is Centaurus A page!</h1>
                <p>Go <a href="#" class="back">back</a> </p>
                <p>
                    Some of the most renowned InterGalactic spacecrafts include :
                </p>
            </div>
        </div>
    </div>
</div>

 

  • Our ic1011 page.
  • Is a partial page that will be rendered in our main-view.
<!-- Page, data-page contains page name-->
<div data-page="intergalactic" class="page">
    <!-- TOP NAVBAR-->
    <div class="navbar">
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                </a>
            </div>
            <div class="title">IC 1011</div>
        </div>
    </div>
    <!-- Scrollable page content-->
    <div class="page-content">
        <div class="content-block">
            <div class="content-block-inner">
                <h1>Here is IC1011 page!</h1>
                <p>Go <a href="#" class="back">back</a> </p>
                <p>
                    Some of the most renowned InterGalactic spacecrafts include :
                </p>
            </div>
        </div>
    </div>
</div>

 

  • Our sombrero page.
  • Is a partial page that will be rendered in our main-view.
<!-- Page, data-page contains page name-->
<div data-page="sombrero" class="page">
    <!-- TOP NAVBAR-->
    <div class="navbar">
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                </a>
            </div>
            <div class="title">Sombrero</div>
        </div>
    </div>
    <!-- Scrollable page content-->
    <div class="page-content">
        <div class="content-block">
            <div class="content-block-inner">
                <h1>Here is Sombrero page!</h1>
                <p>Go <a href="#" class="back">back</a> </p>
                <p>
                    Some of the most renowned InterGalactic spacecrafts include :
                </p>
            </div>
        </div>
    </div>
</div>

 

  • Our whirlpool page.
  • Is a partial page that will be rendered in our main-view.
<!-- Page, data-page contains page name-->
<div data-page="whirlpool" class="page">
    <!-- TOP NAVBAR-->
    <div class="navbar">
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                </a>
            </div>
            <div class="title">Whirlpool</div>
        </div>
    </div>
    <!-- Scrollable page content-->
    <div class="page-content">
        <div class="content-block">
            <div class="content-block-inner">
                <h1>Here is Whirlpool page!</h1>
                <p>Go <a href="#" class="back">back</a> </p>
                <p>
                    Some of the most renowned InterGalactic spacecrafts include :
                </p>
            </div>
        </div>
    </div>
</div>

 

  • Our javascript file.
  • We write custom javascript code here.
/*
 -Initialize your app
 -Export selectors engine
 */
var myApp = new Framework7();
var $$ = Dom7;
var mainClass=function()
{
    this.initializeApp=function()
    {
        var mainView=myApp.addView('.view-main',{dynamicNavbar:true});
    }
}
m=new mainClass();
m.initializeApp();

 

Below is the video version of this tutorial.

Framework7 S1E3 : Navigate Multiple Pages

  • Download the Project below.
Download

How to Download and Run.

  1. Download the project above.
  2. You'll get a zipped file,extract it.
  3. You'll have three files : html,css and javascript.
  4. Place them in a folder and run the index.html file.That's it.

More

  • Visit our channel for more examples like these.
  • Lets share tips and ideas in our Facebook Page.

Oclemy,Cheers.



Rating :

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    13 − 1 =

    COMMENTS