Framework7 S1E5 : Toolbar Tabs – Navigate Pages with Images and Text

Framework7 S1E5 : Toolbar Tabs – Navigate Pages with Images and Text



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




Introduction

This is a continuation of our Framework7 series of tutorials. Some days ago we had done how to navigate many pages in Framework7. However, in that tutorial we were using simple buttons to navigate the pages. In this tutorial we are going to see how to navigate pages via toolbar tabs. Users can then navigate the different pages by clicking the tabs. We'll simply add links to the toolbar and framework7 automatically renders them as horizontal tabs.
Take note that we are simply creating partial pages and will render them in our main view when the user clicks the corresponding toolbar tabs.

Questions this Project answers.

  • Framework7 toolbar tabs.
  • Framework navigate 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 ToolBar Tabs
  • Project Structure
    Project Structure

Tools used

Language: Javascript,HTML,CSS
Framework: Framework7
IDE: PHPStorm.
Topic: Framework7 ToolBar,Framework7 Tabs.

Source Code

Lets have a look at the source code.

index.htmlcentaurus.htmlic1011.htmlsomberro.htmlwhirlpool.htmlmain.jsVideo TutorialDownload
  • Our index.html file.
  • We reference framework7 material css 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>Cosmos Redshift</h2></div>
              <div class="content-block">
                <!--Rows-->
                <div class="row">
                  <img src="assets/img/cosmos_redshift.jpg">
                  Galaxy Cosmos Redshift 7 is reported to be three times brighter than the brightest distant galaxy known up to the time of its discovery and to
                    contain some of the earliest first stars that produced the chemical elements needed for the later formation of planets and life
                    as it is known
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner">
            <a href="index.html" class="link">Home</a>
            <a href="pages/centaurus.html" class="link">Centaurus</a>
            <a href="pages/ic1011.html" class="link">IC 1011</a>
            <a href="pages/whirlpool.html" class="link">Whirlpool</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>

 

  • Centaurus partial page.
  • Will inherit navbar and toolbar.
<!-- Page, data-page contains page name-->
<div data-page="centaurus" class="page">
    <!-- TOP NAVBAR-->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                </a>
            </div>
        </div>
    </div>
    <!-- Scrollable page content-->
    <div class="page-content">
        <div class="content-block">
            <h1>Centaurus A</h1>
            <div class="content-block-inner">
                <p>Go <a href="#" class="back">back</a> </p>
                <img src="assets/img/centaurus.jpg">
                <p>
                    Centaurus A or NGC 5128 is a galaxy in the constellation of Centaurus. It was discovered in 1826 by Scottish
                    astronomer James Dunlop from his home in Parramatta, in New South Wales, Australia.
                </p>
            </div>
        </div>
    </div>
</div>

 

  • IC 1011 partial page.
  • Will inherit navbar and toolbar.
<!-- Page, data-page contains page name-->
<div data-page="ic1011" class="page">
    <!-- TOP NAVBAR-->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                </a>
            </div>
        </div>
    </div>
    <!-- Scrollable page content-->
    <div class="page-content">
        <div class="content-block">
            <h1>IC 1011</h1>
            <div class="content-block-inner">
                <p>Go <a href="#" class="back">back</a> </p>
                <img src="assets/img/whirlpool.jpg">
                <p>
                    IC 1011 is a compact elliptical galaxy[3] with apparent magnitude of 14.7,[4] and with a redshift of
                    z=0.02564 (SIMBAD)[1] or 0.025703 (NASA),[4] yielding a distance of 100 to 120 Megaparsecs.[4] Its light
                    has taken 349.5 million years to travel to Earth. IC 1011's calculated age is approximately 12.95 billion
                    years.[4] The IC designation comes from the Index Catalogue.
                </p>
            </div>
        </div>
    </div>
</div>

 

  • Sombrero partial page.
  • Will inherit navbar and toolbar.
<!-- 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>
    </div>
    <!-- Scrollable page content-->
    <div class="page-content">
        <div class="content-block">
            <h1 cl>Sombrero</h1>
            <div class="content-block-inner">
                <p>Go <a href="#" class="back">back</a> </p>
                <img src="assets/img/sombrero.jpg">
                <p>
                    Sombrero Galaxy (also known as Messier Object 104, M104 or NGC 4594) is an unbarred spiral galaxy
                    in the constellation Virgo located 31.13 Mpc (101,500,000 ly)[2] from Earth. The galaxy has a diameter
                    of approximately 15kpc (50,000 light-years)[3], 30% the size of the Milky Way. It has a bright nucleus,
                    an unusually large central bulge, and a prominent dust lane in its inclined disk. The dark dust lane and
                    the bulge give this galaxy the appearance of a sombrero.
                </p>
            </div>
        </div>
    </div>
</div>

 

  • Whirlpool partial page.
  • Will inherit navbar and toolbar.
<!-- 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>
    </div>
    <!-- Scrollable page content-->
    <div class="page-content">
        <div class="content-block">
            <h1>Whirlpool</h1>
            <div class="content-block-inner">
                <p>Go <a href="#" class="back">back</a> </p>
                <img src="assets/img/whirlpool.jpg">
                <p>
                    The Whirlpool Galaxy, also known as Messier 51a, M51a, and NGC 5194, is an interacting[7] grand-design[8]
                    spiral galaxy with a Seyfert 2 active galactic nucleus[9] in the constellation Canes Venatici. It was the
                    first galaxy to be classified as a spiral galaxy.[10] Recently it was estimated to be 23 ± 4 million
                    light-years from the Milky Way,[3] but different methods yield distances between 15 and 35 million
                    light-years. Messier 51 is one of the best known galaxies in the sky
                </p>
            </div>
        </div>
    </div>
</div>

 

  • Main class.
/*
 -Initialize your app
 -Export selectors engine
 */
var myApp = new Framework7();
var $$ = Dom7;
var mainClass=function()
{
    this.initializeApp=function()
    {
        var mainView=myApp.addView('.view-main');
    }
}
m=new mainClass();
m.initializeApp();

 

Below is the video version of this tutorial.

Framework7 S1E5 : ToolBar Tabs - Pages with Images and Text

  • 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 *

    two × 4 =

    COMMENTS