Framework7 S1E2 : Modals/Dialogs

Framework7 S1E2 : Modals/Dialogs



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




Introduction

So our second framework7 episode is out. Previously we looked at how to download and install framework7 and create a simple hello world app. Today we look at how to work with framework7 modals. Modals are basically alert dialogs. We see how to show modals with custom text, title and callback events.

Questions this Project answers.

  • Framework7 modals and dialogs.
  • Getting started with framework7.
  • Framework7 alert dialogs callbacks.

Libraries Used

These are the third parties used in this project.

Screenshot

  • Here's the screenshot of the project.
    Framework7 Hello World

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.htmlmain.jsVideo TutorialDownload
  • Our index.html file.
  • We reference framework7 css files in our html header.
  • We also reference our javascript script 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">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- We have home navbar without left link-->
            <div class="center sliding">Camposha.info</div>
            <div class="right">
              <!-- Right link contains only icon - additional "icon-only" class-->
              <a href="#" class="link icon-only" onclick="alert('icon clicked')"> <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">Material Alert Dialogs</div>
              <div class="content-block">
                <div class="row">
                  <div class="col-50"><a href="#" id="cyanBtn" class="button button-raised button-fill color-cyan">Text</a></div>
                  <div class="col-50"><a href="#" id="tealBtn" class="button button-raised button-fill color-teal">Text,Title</a></div>
                </div>
                <br>
                <div class="row">
                  <div class="col-50"><a href="#" id="greenBtn" class="button button-raised button-fill color-green">Text,CallBack</a></div>
                  <div class="col-50"><a href="#" id="blueBtn" class="button button-raised button-fill color-blue">Text,Title,CallBack</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner"><a href="#" class="link">Next</a><a href="#" class="link">Previous</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 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()
    {
        $$('#cyanBtn').on('click', function () {
            myApp.alert('Text');
        });
        $$('#tealBtn').on('click', function () {
            myApp.alert('Text and Title','Custom Title');
        });
        $$('#greenBtn').on('click', function () {
            myApp.alert('Text and CallBack',function(){
                alert('CallBack handled');
            });
        });
        $$('#blueBtn').on('click', function () {
            myApp.alert('Text, title and CallBack','Custom Title',function(){
                alert('CallBack handled');
            });
        });
    }
}
m=new mainClass();
m.initializeApp();

 

Below is the video version of this tutorial.

Framework7 S1E2 : Modals/Alert Dialogs

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

    4 × two =

    COMMENTS