Framework7 - Quick Guide


Advertisements

Framework7 - Overview

Framework7 is a free and open source framework for mobile HTML. It is used for developing hybrid mobile apps or web apps for iOS and Android devices.

Framework7 was introduced in the year 2014. The latest version 1.4.2 was released in February 2016 licensed under MIT.

Why Use Framework7?

  • It is easier to develop apps for iOS and Android.
  • The learning curve for Framework7 is very easy.
  • It has many pre-styled widgets/components.
  • It has built-in helper libraries.

Features

  • Framework7 is an open source and free to use framework.

  • Framework7 has easy and familiar jQuery syntax to get started without any delay.

  • To control click delay for touch UI's, Framework7 has built-in FastClick library.

  • Framework7 has built-in grid system layout for arranging your elements responsively.

  • Framework7 dynamically loads pages from templates via flexible router api.

Advantages

  • Framework7 is not dependent on any third party library even for DOM manipulation. Instead, it has its own custom DOM7.

  • Framework7 can also be used with Angular and React frameworks.

  • You can start creating apps once you know HTML, CSS and some basic JavaScript.

  • It supports faster development via Bower.

  • It is easy to develop apps for iOS and Android without learning it.

Disadvantages

  • Framework7 only supports platforms like iOS and Android.

  • The online community support for Framework7 framework is less compared to iOS and Andriod.

Framework7 - Environment

In this chapter, we will discuss about how to install and setup Framework7.

You can download the Framework7 in two ways −

Download from Framework7 Github repository

You can install the Framework7, using Bower as shown below −

bower install framework7

After successful installation of Framework7, you need to follow the below given steps to make use of Framework7 in your application −

Step 1 − You need to install gulp-cli to build development and dist versions of Framework7 by using the following command.

npm install gulp-cli

The cli stands for Command Line Utility for Gulp.

Step 2 − The Gulp must be installed globally by using the following command.

npm install --global gulp

Step 3 − Next, install the NodeJS package manager, which installs the node programs that makes it easier to specify and link dependencies. The following command is used to install the npm.

npm install

Step 4 − The development version of Framework7 can be built by using the following command.

npm build

Step 5 − Once you build the development version of Framework7, start building the app from dist/ folder by using the following command.

npm dist

Step 6 − Keep your app folder in the server and run the following command for navigation between pages of your app.

gulp server

Download Framework7 Library from CDNs

A CDN or Content Delivery Network is a network of servers designed to serve files to users. If you use a CDN link in your web page, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if a visitor to your webpage has already downloaded a copy of Framework7 from the same CDN, it won't have to be re-downloaded. You can include the following CDN files into the HTML document.

The following CDNs are used in an iOS App layout

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />

It is used to include Framework7 iOS CSS Library to your application.

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />

It is used to include Framework7 iOS related color styles to your application.

The following CDNs are used in Android/Material App Layout

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>

It is used to include Framework7 JS library to your application.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>

It is used to include Framework7 Material styling to your application.

We are using the CDN versions of the library throughout this tutorial. We use AMPPS(AMPPS is a WAMP, MAMP and LAMP stack of Apache, MySQL, MongoDB, PHP, Perl & Python) server to execute all our examples.

Example

The following example demonstrates the use of simple application in the Framework7, which will display the alert box with the customized message when you click on the navigation bar.

<!DOCTYPE html>
<html>
   
   <head>
      <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>My App</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>
   
   <body>
      //you can control the background color of the Status bar
      <div class = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</div>
                  <div class = "right">
                     <a href = "#" class = "link icon-only open-panel">
                        <i class = "icon icon-bars"></i>
                     </a>
                  </div>
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "envirmnt_about.html" class = "">
                                 <div class = "item-content">
                                    <div class = "item-inner">
                                       <div class = "item-title">Blog</div>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</a>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         //use the 'pageInit' event handler for all pages
         $$(document).on('pageInit', function (e) {
         
            //get page data from event data
            var page = e.detail.page;

            if (page.name === 'blog') {
            
               // you will get below message in alert box when page with data-page attribute is equal to "about"
               myApp.alert('Here its your About page');
            }
         })
      </script>
   </body>

</html>

Next, create one more HTML page i.e. envirmnt_about.html as shown below −

envirmnt_about.html

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left">
         <a href = "#" class = "back link">
            <i class = "icon icon-back"></i>
            <span>Back</span>
         </a>
      </div>
      
      <div class = "center sliding">My Blog</div>
      <div class = "right">
         <a href = "#" class = "link icon-only open-panel">
            <i class = "icon icon-bars"></i>
         </a>
      </div>
   </div>
</div>

<div class = "pages">
   <div data-page = "blog" class = "page">
      <div class = "page-content">
         <div class = "content-block">
            <h2>My Blog</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         </div>
      </div>
   </div>
</div>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above HTML code as framework7_environment.html file in your server root folder.

  • Open this HTML file as http://localhost/framework7_environment.html and output is displayed as shown below.

  • When you click on the navigation bar, it will display the alert box with the customized message.

Framework7 - Layouts

Description

Framework7 provides different types of layouts for your application. It supports three types of Navbar/Toolbar layouts −

S.No Layout Types & Description
1 Static Layout

The static layout is most often used layout-type and includes navbar and toolbar, which can be a scrollable page content and each page contains its own navbar and toolbar.

2 Fixed Layout

Fixed layout includes its own navbar and toolbar, which can be visible on screen and cannot be scrollable on page.

3 Through Layout

In this layout, the navbar and the toolbar appears fixed for all pages within single view.

4 Mixed Layout

You can mix the different types of layouts in the single view.

No Navbar/Toolbar

If you do not want to use navbar and toolbar, then do not include appropriate classes (navbar-fixed, navbar-through, toolbar-fixed, toolbar-through) to page/pages/view.

Framework7 - Navbars

Description

In this chapter, let us study about navbar. It is a usually placed at top of a screen containing title of the page and navigation elements.

Navbar consists of three parts each of which may contain any HTML content, but it is suggested you use these in the way given below −

  • Left − It is designed to place back link icons or single text link.

  • Center − It is used to display title of the page or tab links.

  • Right − This part is similar to the left part.

The following table demonstrates the use of navbar in detail −

S.No Navbar Types & Description
1 Basic navbar

A basic navbar can be created by using the navbar, navbar-inner, left, center and right classes.

2 Navbar with links

To use links in left and right part of your navbar, just add <a> tag with class link.

3 Multiple links

To use multiple links, just add few more <a class = "link"> to the part of your choice.

4 Links with text and icons

The links can be provided with icons and texts by adding classes for icons and wrapping the link text with <span> element.

5 Links with only icons

Navbar links can be provided with only icons by adding icon-only class to links.

6 Related app and view methods

On initializing the View, framework7 allows you to use methods available for navbar.

7 Hide navbar automatically

The navbar can be hidden/shown automatically for some Ajax loaded pages where navbar is not required.

Framework7 - Toolbars

Description

Toolbar provides easy access to other pages by using navigation elements at the bottom of the screen.

You can use toolbar in two ways as specified in the table −

S.No Toolbar types & Description
1 Hide Toolbar

You can hide the toolbar automatically when you load the pages by using the no-toolbar class to loaded page.

2 Bottom Toolbar

Place the toolbar at the bottom of the page by using the toolbar-bottom class.

Methods of Toolbar

The following available methods can be used with Toolbars −

S.No Toolbar Methods & Description
1

myApp.hideToolbar(toolbar)

It hides the specified toolbar.

2

myApp.showToolbar(toolbar)

It shows the specified toolbar.

3

view.hideToolbar()

It hides the specified toolbar in the view.

4

view.showToolbar()

It shows the specified toolbar in the view.

Example

The following example demonstrates the use of toolbar layout in the Framework7.

First, we will create one HTML page called toolbar.html as shown below −

<!DOCTYPE html>
<html>

   <head>
      <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>Toolbar Layout</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Toolbar Layout</div>
               </div>
            </div>
            
            <div class = "pages navbar-through">
               <div data-page = "index" class = "page with-subnavbar">
                  <div class = "page-content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                     Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                     Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                     sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                     Sed posuere a orci id imperdiet.</p>
                     
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                     Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                     Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                     sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                     Sed posuere a orci id imperdiet.</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">Link 1</a>
                  <a href = "#" class = "link">Link 2</a>
                  <a href = "#" class = "link">Link 3</a>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
         
            // enable the dynamic navbar for this view
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

Now, initialize your app and views in the custom JS file toolbar.js.

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as toolbar.html file in your server root folder.

  • Open this HTML file as http://localhost/toolbar.html and the output is displayed as shown below.

Framework7 - Search Bar

Description

Framework 7 allows searching the elements by using the searchbar class.

Search Bar Parameters

S.No Parameters & Description Type Default
1

searchList

It searches the CSS selector or HTML element of the list.

string or HTML Element -
2

searchIn

You can search the list view elements of CSS selectors, also searches the elements by passing .item-title, .item-text classes.

string '.item-title'
3

found

It searches the CSS selector or HTML element using "found" element. Further, it uses .searchbar-found element if there is no element specified.

string or HTML Element -
4

notfound

It searches the CSS selector or HTML element using "not-found" element. Further, it uses .searchbar-not-found element if there is no element specified.

string or HTML Element -
5

overlay

It searches the CSS selector or HTML element using "searchbar overlay" element and uses .searchbar-overlay element, if there is no element specified.

string or HTML Element -
6

ignore

You can ignore the CSS selector for items by using the searchbar.

string '.searchbar-ignore'
7

customSearch

When it is enabled, the searchbar will not search through any of list blocks which is specified by searchList and you will be allowed to use custom search functionality.

boolean false
8

removeDiacritics

When searching for an element, remove the diacritics by enabling this parameter.

boolean false
9

hideDividers

This parameter will hide item dividers and group title, if there are no items.

boolean true
10

hideGroups

This parameter will hide the groups, if there are no items found in the list view groups.

boolean true

Search Bar Callbacks

S.No Callbacks & Description Type Default
1

onSearch

This method will fire callback function while doing search.

function (s) -
2

onEnable

This method will fire callback function when Search Bar becomes active.

function (s) -
3

onDisable

This method will fire callback function when Search Bar becomes inactive.

function (s) -
4

onClear

This method will fire callback function when you click on the "clear" element.

function (s) -

Search Bar Properties

S.No Properties & Description
1

mySearchbar.params

Represents the initialized parameters passed with object.

2

mySearchbar.query

Searches the current query.

3

mySearchbar.searchList

Defines the search list block.

4

mySearchbar.container

Defines the search bar container with HTML element.

5

mySearchbar.input

Defines the search bar input with HTML element.

6

mySearchbar.active

It defines whether search bar is enabled or disabled.

Search Bar Methods

S.No Methods & Description
1

mySearchbar.search(query);

This method searches the passed query.

2

mySearchbar.enable();

It enables the search bar.

3

mySearchbar.disable();

It disables the search bar.

4

mySearchbar.clear();

You can clear the query and search results.

5

mySearchbar.destroy();

It destroys the search bar instance.

Search Bar JavaScript Events

S.No Event & Description Target
1

search

You can fire this event while searching elements.

<div class="list-block">
2

clearSearch

This event will get fired when user clicks on the clearSearch element.

<div class="list-block">
3

enableSearch

When Search Bar becomes enable, this event will get fired.

<div class="list-block">
4

disableSearch

When Search Bar gets disabled, and user clicks on cancel button, or "search bar-overlay" element, this event will get fired.

<div class="list-block">

Example

The following example demonstrates the use of search bar on scroll in the Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <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>Search Bar Layout</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages navbar-fixed">
               <div data-page = "home" class = "page">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center sliding">Search Bar Layout</div>
                     </div>
                  </div>
                  
                  <form data-search-list = ".list-block-search" data-search-in = ".item-title" 
                     class = "searchbar searchbar-init">
                     <div class = "searchbar-input">
                        <input type = "search" placeholder = "Search"><a href = "#" 
                           class = "searchbar-clear"></a>
                     </div>
                     <a href = "#" class = "searchbar-cancel">Cancel</a>
                  </form>
                  
                  <div class = "searchbar-overlay"></div>
                  
                  <div class = "page-content">
                     <div class = "content-block searchbar-not-found">
                        <div class = "content-block-inner">No element found...</div>
                     </div>
                     
                     <div class = "list-block list-block-search searchbar-found">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">India</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Argentina</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Belgium</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Brazil</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Canada</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Colombia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Denmark</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Ecuador</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">France</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Germany</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Greece</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Haiti</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Hong Kong</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Iceland</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Ireland</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Jamaica</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Japan</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Kenya</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Kuwait</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Libya</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Liberia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Malaysia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Mauritius</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Mexico</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Namibia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">New Zealand</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Oman</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Paraguay</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Philippines</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Russia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Singapore</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">South Africa</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Thailand</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">United Kingdom</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Vatican City</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Zimbabwe</div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView('.view-main');
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code search_bar.html file in your server root folder.

  • Open this HTML file as http://localhost/search_bar.html and the output is displayed as shown below.

  • If the element contained in the list is entered in the search bar, it displays that particular element from the list.

  • If the element other than the elements contained in the list is entered, it displays no element found.

Framework7 - Status Bar

Description

The iOS 7+ allows you to build full screen apps which could create an issue when your status bar overlaps your app. Framework7 solves this problem by detecting whether your app is in full screen mode or not. If your app is in full screen mode then, the Framework7 will automatically adds with-statusbar-overlay class to <html> (or removes if app is not in full screen mode) and you need to add statusbar-overlay class in <body> as shown in the following code −

<html class = "with-statusbar-overlay">
...
   <body>
      <div class = "statusbar-overlay"></div>
      ...

By default, <div> will always be hidden and fixed on top of your screen. It will only be visible when the app is in full screen mode and with-statusbar-overlay class is added to <html>.

Example

The following example demonstrates the use of status bar in the Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <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>My App</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</div>
                  
                  <div class = "right">
                     <a href = "#" class = "link icon-only open-panel"><i class = "icon icon-bars"></i></a>
                  </div>
                  
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <p>page contents goes here!!!</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</a>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         //use the 'pageInit' event handler for all pages
         $$(document).on('pageInit', function (e) {
            //get page data from event data
            var page = e.detail.page;
         })
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given html code as status_bar.html file in your server root folder.

  • Open this HTML file as http://localhost/status_bar.html and the output is displayed as shown below.

The example shows the use of the statusbar-overlay, which allows you to build full screen apps when your status bar overlaps the app.

Framework7 - Side Panels

Description

The side panel moves to the left or right side of the screen to display the content. Framework7 allows you to include up to 2 panels (right side panel and left side panel) to your app. You need to add panels in the beginning of the <body> and then choose the opening effect by applying the following listed classes −

  • panel-reveal − This will make the whole app's content move out.

  • panel-cover − This will make the panel to overlay on app's content.

For instance, the following code shows how to use the above classes −

<body>
   <!-- First add Panel's overlay which will overlays app while panel is opened -->
   <div class = "panel-overlay"></div>
 
   <!-- Left panel -->
   <div class = "panel panel-left panel-cover">
      panel's content
   </div>
 
   <!-- Right panel -->
   <div class = "panel panel-right panel-reveal">
      panel's content
   </div>
 
</body>     

The following table shows the panel types supported by Framework77 −

S.No Type & Description
1 Open and Close Panels

Once you add panel and effects, we need to add functionality to open and close the panels.

2 Panel Events

To detect how a user interacts with the panel, you can use panel events.

3 Open Panels With Swipe

Framework7 provides you the feature to open panel with swipe gesture.

4 Panel is Opened?

We can determine whether panel is opened or not by using the with-panel[position]-[effect] rule.

Framework7 - Content Block

Description

Content blocks can be used to add extra content with different format.

Example

The following example demonstrates the use of content block in Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <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>Content Block</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Content Block</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <p>This is out side of content block!!!</p>
                     
                     <div class = "content-block">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
                        et quasi architecto beatae vitae dicta sunt explicabo.</p>
                     </div>
                     
                     <div class = "content-block">
                        <div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Title</div>
                     
                     <div class = "content-block">
                        <p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur 
                        magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales. 
                        Integer blandit varius nisi quis consectetur.</p>
                     </div>
                     
                     <div class = "content-block-title">This is another long content block title</div>
                     
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
                           inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Inset</div>
                     
                     <div class = "content-block inset">
                        <div class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. 
                           Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, 
                           vulputate turpis vel, sagittis felis. </p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Content Block Tablet Inset</div>
                     
                     <div class = "content-block tablet-inset">
                        <div class = "content-block-inner">
                           <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
                           Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, 
                           vulputate turpis vel, sagittis felis. </p>
                        </div>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView('.view-main');
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as content_block.html file in your server root folder.

  • Open this HTML file as http://localhost/content_block.html and the output is displayed as shown below.

  • The code adds extra formatting and required spacing for the text content.

Framework7 - Layout Grid

Description

Framework7 provides different types of grid types to place the content as per user need.

The layout grid provides different types of columns size as described in the following table −

S.No Class Table Class Width
1 col-5 tablet-5 5%
2 col-10 tablet-10 10%
3 col-15 tablet-15 15%
4 col-20 tablet-20 20%
5 col-25 tablet-25 25%
6 col-30 tablet-30 30%
7 col-33 tablet-33 33.3%
8 col-35 tablet-35 35%
9 col-40 tablet-40 40%
10 col-45 tablet-45 45%
11 col-50 tablet-50 50%
12 col-55 tablet-55 55%
13 col-60 tablet-60 60%
14 col-65 tablet-65 65%
15 col-66 tablet-66 66.6%
16 col-70 tablet-70 70%
17 col-75 tablet-75 75%
18 col-80 tablet-80 80%
19 col-85 tablet-85 85%
20 col-90 tablet-90 90%
21 col-95 tablet-95 95%
21 col-100 tablet-100 100%
22 col-auto tablet-auto Equal width

Example

The following example provides the grid layout for placing your content as you need in Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <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>Layout Grid</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
         
      <style>
         div[class* = "col-"] {
            background: #fff;
            text-align: center;
            color: #000;
            border: 1px solid #D8D8D8;
         }
         .row {
            margin-bottom: 10px;
         }
      </style>
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Layout Grid</div>
               </div>
            </div>
            
            <div class = "pages">
               <div data-page = "index" class = "page navbar-fixed">
                  <div class = "page-content">
                     <div class = "content-block-title">Columns with gutter</div>
                     
                     <div class = "content-block">
                        <div class = "row">
                           <div class = "col-50">col 1</div>
                           <div class = "col-50">col 2</div>
                        </div>
                        
                        <div class = "row">
                           <div class = "col-25">col 1</div>
                           <div class = "col-25">col 2</div>
                           <div class = "col-25">col 3</div>
                           <div class = "col-25">col 4</div>
                        </div>
                        
                        <div class = "row">
                           <div class = "col-33">col 1</div>
                           <div class = "col-33">col 2</div>
                           <div class = "col-33">col 3</div>
                        </div>
                        
                        <div class = "content-block-title">Columns without gutter</div>
                        
                        <div class = "content-block">
                           <div class = "row no-gutter">
                              <div class = "col-50">col 1</div>
                              <div class = "col-50">col 2</div>
                           </div>
                           
                           <div class = "row no-gutter">
                              <div class = "col-25">col 1</div>
                              <div class = "col-25">col 2</div>
                              <div class = "col-25">col 3</div>
                              <div class = "col-25">col 4</div>
                           </div>
                           
                           <div class = "row no-gutter">
                              <div class = "col-33">col 1</div>
                              <div class = "col-33">col 2</div>
                              <div class = "col-33">col 3</div>
                           </div>
                        </div>
                     
                        <div class = "content-block-title">Nested Columns</div>
                        <div class = "content-block">
                           <div class = "row">
                              
                              <div class = "col-50">
                                 col 1
                                 <div class = "row">
                                    <div class = "col-40">col 2</div>
                                    <div class = "col-60">col 3</div>
                                 </div>
                              </div>
                                 
                              <div class = "col-50">
                                 col 1
                                 <div class = "row">
                                    <div class = "col-75">col 2</div>
                                    <div class = "col-25">col 3</div>
                                 </div>
                              </div>
                                 
                           </div>
                        </div>
                           
                        <div class = "content-block-title">Columns With Different Equal Width</div>
                           
                        <div class = "content-block">
                           <div class = "row">
                              <div class = "col-100 tablet-50">col 1</div>
                              <div class = "col-100 tablet-50">col 2</div>
                           </div>
                              
                           <div class = "row">
                              <div class = "col-50 tablet-25">col 1</div>
                              <div class = "col-50 tablet-25">col 2</div>
                              <div class = "col-50 tablet-25">col 3</div>
                              <div class = "col-50 tablet-25">col 4</div>
                           </div>
                              
                           <div class = "row">
                              <div class = "col-100 tablet-40">col 1</div>
                              <div class = "col-50 tablet-60">col 2</div>
                              <div class = "col-50 tablet-60">col 3</div>
                              <div class = "col-100 tablet-40">col 4</div>
                           </div>
                        </div>
                           
                        <div class = "content-block-title">Columns With Equal Width</div>
                           
                        <div class = "content-block">
                           <div class = "row">
                              <div class = "col-auto">col-1</div>
                              <div class = "col-auto">col-2</div>
                              <div class = "col-auto">col-3</div>
                              <div class = "col-auto">col-4</div>
                           </div>
                              
                           <div class = "row no-gutter">
                              <div class = "col-auto">col-1</div>
                              <div class = "col-auto">col-2</div>
                              <div class = "col-auto">col-3</div>
                              <div class = "col-auto">col-4</div>
                           </div>
                        </div>
                           
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView('.view-main');
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as layout_grid.html file in your server root folder.

  • Open this HTML file as http://localhost/layout_grid.html the output is displayed as shown below.

  • This code provides different types of grid types to place the content as per the user need.

Framework7 - Overlays

Description

Framework7 provides different types of overlays to work with the applications smoothly. The following table lists some of the Framework7 overlays −

S.No Overlay Type & Description
1 Modal

Modal is a small window that display the content from separate sources without leaving the parent window.

2 Popup

Popup is a popup box which displays the content when the user clicks on the element.

3 Popover

To manage the presentation of temporary content, the popover component can be used.

4 Action Sheet

The Action Sheet is used to present the user with a set of possibilities for how to handle a given task.

5 Login Screen

Overlay login screen is used for displaying the login screen format which can be used in page or popup or as a standalone overlay.

6 Picker Modal

Picker modal is used to pick some custom content which is similar to the calender picker.

Framework7 - Preloaders

Description

Preloader in Framework7 is made with Scalable Vector Graphic (SVG) and animated with CSS, which makes it easily resizable. Preloader is available in two colors −

  • the default is light background
  • another one is dark background

You can use the preloader class in your HTML as shown below −

Example

The following example demonstrates the use of preloader in the Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <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>Panel Events</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Framework7 Preloader</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block row">
                        <div class = "col-25"><span class = "preloader"></span><br>Default Preloader</div>
                        <div class = "col-25 col-dark"><span class = "preloader preloader-white"></span><br>White Preloader</div>
                        <div class = "col-25"><span style = "width:42px; height:42px" class = "preloader"></span><br>Big Preloader</div>
                        <div class = "col-25 col-dark"><span style = "width:42px; height:42px" class = "preloader preloader-white"></span><br>White Preloader</div>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as preloader.html file in your server root folder.

  • Open this HTML file as http://localhost/preloader.html and the output is displayed as shown below.

  • This code displays the preloader indicator, which is made with SVG and animated with CSS.

Framework7 - Progress Bar

Description

The progress bars can be used to show loading of assets or progress of a task to the users. You can specify the progress bar by using the progressbar class. When the user does not know how long the loading process will be there for the request, you can use progressbar-infinite class.

Progress Bar JavaScript API

The progress bar can be used along with the JavaScript API to specify show, hide and progress properties by using the following methods −

S.No Methods Description & Parameters
1 myApp.setProgressbar (container , progress, speed)

It sets the progress bar for the progress of a task.

  • container − It is a string or HTML element that defines the container of progress bar element.

  • progress − It represents in integer format and defines the progress of a task.

  • speed − It represents in integer format and specifies the duration of the progress of a task.

2 myApp.hideProgressbar (contain er)

It hides the progress bar.

  • container − It is a string or HTML element that defines the container of progress bar element.

3 myApp.showProgressbar (contai ner, progress, color)

It displays the progress bar.

  • container − It is a string or HTML element that defines the container of progress bar element.

  • progress − It represents in integer format and defines the progress of a task.

  • speed − It represents in integer format and specifies the duration of the progress of a task.

Example

The following example displays an animated determinate and indeterminate progress bars to indicate activity in Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <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>Progress Bar</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center">Progress Bar</div>
                     </div>
                  </div&gt
                  
                  <div class = "page-content">
                     <div class = "content-block-title">Determinate Progress Bar</div>
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Inline determinate progress bar:</p>
                           
                           <div class = "progressbar-inline">
                              <p><span data-progress = "10" class = "progressbar"></span></p>
                              
                              <p class = "buttons-row">
                                 <a href = "#" data-progress = "25" class = "button button-raised">25%</a>
                                 <a href = "#" data-progress = "50" class = "button button-raised">50%</a>
                                 <a href = "#" data-progress = "75" class = "button button-raised">75%</a>
                                 <a href = "#" data-progress = "100" class = "button button-raised">100%</a>
                              </p>
                           </div>
                           
                           <p>Loads and hides the determinate progress bar:</p>
                           <div class = "progressbar-load-hide">
                              <p><a href = "#" class = "button button-raised">Start Loading</a></p>
                           </div>
                           
                           <p>Displays the determinate progress bar on top:</p>
                           <p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Infinite Progress Bar</div>
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p>Inline infinite progress bar:</p>
                           
                           <p><span class = "progressbar-infinite"></span></p>
                           
                           <p>Displays the infinite progress bar in multiple colors:</p>
                           
                           <p><span class = "progressbar-infinite color-multi"></span></p>
                           
                           <p>Displays the infinite progress bar on top:</p>
                           
                           <p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                           
                           <p>Displays the infinite progress bar in multiple colors on top:</p>
                           
                           <p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Different types of colored progress bars:</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "5" class = "progressbar color-red"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "10" class = "progressbar color-pink"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "20" class = "progressbar color-deeppurple"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "30" class = "progressbar color-blue"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "40" class = "progressbar color-cyan"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "50" class = "progressbar color-green"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "60" class = "progressbar color-lime"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "70" class = "progressbar color-amber"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "80" class = "progressbar color-deeporange"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "90" class = "progressbar color-gray"></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div data-progress = "100" class = "progressbar color-black"></div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7({
            material: true
         });
         
         var $$ = Dom7;

         $$('.progressbar-inline .button').on('click', function () {
            var progress = $$(this).attr('data-progress');
            var progressbar = $$('.progressbar-inline .progressbar');
            myApp.setProgressbar(progressbar, progress);
         });
         
         $$('.progressbar-load-hide .button').on('click', function () {
            var container = $$('.progressbar-load-hide p:first-child');
            
            //it doesn't load if another progresbar is loading
            if (container.children('.progressbar').length) return;

            myApp.showProgressbar(container, 0);

            var progress = 0;
            function simulateLoading() {
               setTimeout(function () {
                  var progressBefore = progress;
                  progress += Math.random() * 20;
                  myApp.setProgressbar(container, progress);
                  if (progressBefore < 100) {
                     simulateLoading();
                  }
                  else myApp.hideProgressbar(container);
               }, Math.random() * 200 + 200);
            }
            simulateLoading();
         });
         
         $$('.progressbar-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
            myApp.showProgressbar(container, 0, 'orange');
            var progress = 0;
            
            function simulateLoading() {
               setTimeout(function () {
                  var progressBefore = progress;
                  progress += Math.random() * 20;
                  myApp.setProgressbar(container, progress);
                  if (progressBefore < 100) {
                     simulateLoading();
                  }
                  //hides the progressbar
                  else myApp.hideProgressbar(container);
               }, Math.random() * 200 + 200);
            }
            simulateLoading();
         });
         
         $$('.progressbar-infinite-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
            myApp.showProgressbar(container, 'yellow');
            setTimeout(function () {
               myApp.hideProgressbar();
            }, 3000);
         });
         
         $$('.progressbar-infinite-multi-overlay .button').on('click', function () {
            var container = $$('body');
            if (container.children('.progressbar, .progressbar-infinite').length) return;
               myApp.showProgressbar(container, 'multi');
               setTimeout(function () {
               myApp.hideProgressbar();
            }, 3000);
         });
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as progress_bar.html file in your server root folder.

  • Open this HTML file as http://localhost/progress_bar.html and the output is displayed as shown below.

  • The example displays the progress bar, which indicates how long an operation will take to complete the process and displays the different types of progress bars to indicate activity.

Framework7 - List Views

Description

List views are powerful UI components that present data in a scrollable list of multiple rows. The Framework7 provides different types of List View to work with your application. The following table lists some of the Framework7 List View

S.No Types & Description
1 List View

List views are powerful user interface components, which present data in a scrollable list containing multiple rows.

2 Contacts List

The contacts list is a type of list view, which can be used to display the list of people contacts.

3 Media List View

The Media list view is used to display complicated data structures like products, services, users information.

4 Swipeout

The swipeout allows you to reveal hidden menu actions by swiping over the list elements.

5 Sortable List

The sortable list is a type of list view, which sorts the list view elements.

6 Virtual List

Virtual list a type of list view, which includes lists of large number of data elements without dropping their performance.

Framework7 - Accordion

Description

The accordion is a graphical control element displayed as a stacked list of items. Each accordion can be expanded or stretched to reveal the content associated with that accordion.

Collapsible Layout

When you are using single separate collapsible element, you need to omit the accordion-list wrapper element.

Following is a structure of collapsible layout −

<!-- Single collapsible element ------>
<div class = "accordion-item">
   <div class = "accordion-item-toggle"></div>
   <div class = "accordion-item-content"></div>
</div>

<!-- Separate collapsible element -->
<div class = "accordion-item">
   <div class = "accordion-item-toggle"></div>
   <div class = "accordion-item-content"></div>
</div>

The following classes are used for accordion in Framework7 −

S.No Classes & Description
1

accordion-list

It is an optional class, which contains a group of accordion items list.

2

accordion-item

It is a required class for single accordion item.

3

accordion-item-toggle

It is a required class used to expand accordion item content.

4

accordion-item-content

It is a required class used for hidden accordion item content.

5

accordion-item-expanded

It is a single expanded accordion item.

Accordion JavaScript API

JavaScript API methods are used to open and close the accordion programmatically.

It contains the following JavaScript API methods −

  • myApp.accordionOpen(item) − Used to open accordion.

  • myApp.accordionClose(item) − Used to close accordion.

  • myApp.accordionToggle(item) − Used to toggle accordion.

All methods contains parameter called item which is HTML or string element of accordion-item.

Accordion Events

Accordion contains four events as listed in the following table −

S.No Event Target & Description
1 open

Accordion item

When you open an animation, this event will get fired.

2 opened

Accordion item

When the opening of an animation is completed, this event will get fired.

3 close

Accordion item

When you close an animation, this event will get fired.

4 closed

Accordion item

When the closing of an animation is completed, this event will get fired.

Accordion List View

In accordion list view, you can use item-link element instead of accordion-toggle.

<div class = "list-block accordion-list">
   <ul>
      <li class = "accordion-item">
         <a href = "" class = "item-link item-content">
            <div class = "item-inner">
               <div class = "item-title">1st Item</div>
            </div>
         </a>
         <div class = "accordion-item-content">Content for 1st Item...</div>
      </li>
      
      <li class = "accordion-item">
         <a href = "" class = "item-link item-content">
            <div class = "item-inner">
               <div class = "item-title">2nd Item</div>
            </div>
         </a>
         <div class = "accordion-item-content">Content for 2nd Item...</div>
      </li>
   </ul>
</div>

Example

The following example demonstrates the use of accordion in the Framework7 −

<!DOCTYPE html>
<html>
   <head>
      <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>Accordion</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
   </head>
   <body>
      <div class="views">
         <div class="view view-main">
            <div class="pages">
               <div data-page="home" class="page navbar-fixed">
                  <div class="navbar">
                     <div class="navbar-inner">
                        <div class="left"> </div>
                        <div class="center">Accordion</div>
                        <div class="right"> </div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block-title">List of Programming Lagauges</div>
                     <div class="list-block accordion-list">
                        <ul>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C++</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
                                       This reference will take you through simple and practical approach while learning C++ Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">Java</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
                                       This reference will take you through simple and practical approach while learning Java Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     <div class="content-block-title">Separate Collapsibles</div>
                     <div class="list-block">
                        <ul>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p >C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">C++</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
                                       This reference will take you through simple and practical approach while learning C++ Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                           <li class="accordion-item">
                              <a href="#" class="item-content item-link">
                                 <div class="item-inner">
                                    <div class="item-title">Java</div>
                                 </div>
                              </a>
                              <div class="accordion-item-content">
                                 <div class="content-block">
                                    <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
                                       This reference will take you through simple and practical approach while learning Java Programming language.
                                    </p>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     <div class="content-block-title">Custom Accordion</div>
                     <div class="content-block accordion-list custom-accordion">
                        <div class="accordion-item">
                           <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C</span></div>
                           <div class="accordion-item-content">
                              <p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
                           </div>
                        </div>
                        <div class="accordion-item">
                           <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C++</span></div>
                           <div class="accordion-item-content">
                              <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
                                 This reference will take you through simple and practical approach while learning C++ Programming language.
                              </p>
                           </div>
                        </div>
                        <div class="accordion-item">
                           <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>Java</span></div>
                           <div class="accordion-item-content">
                              <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
                                 This reference will take you through simple and practical approach while learning Java Programming language.
                              </p>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      <style>.custom-accordion{padding-left:0;padding-right:0;}.custom-accordion .accordion-item-toggle{padding:0px 15px;height:44px;line-height:44px;font-size:17px;color:#000;border-bottom:1px solid rgba(0,0,0,0.15);cursor:pointer;}.custom-accordion .accordion-item-toggle:active{background:rgba(0,0,0,0.15);}.custom-accordion .accordion-item-toggle span{display:inline-block;margin-left:15px;}.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none;}.custom-accordion .icon-plus,.custom-accordion .icon-minus{display:inline-block;width:22px;height:22px;border:1px solid #000;border-radius:100%;line-height:20px;text-align:center;}.custom-accordion .icon-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-minus{display:inline-block;}.custom-accordion .accordion-item-expanded .icon-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}</style>
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
         // enable the dynamic navbar for this view:
         dynamicNavbar: true
         });
      </script>
   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as accordion.html file in your server root folder.

  • Open this HTML file as http://localhost/accordion.html and the output is displayed as shown below.

  • The example provides collapsible layout, which can be expanded to display the content associated with the accordion.

Framework7 - Cards

Description

Cards contain organized information related to a single subject like a photo, link, and text. The following table shows Framework7 card types −

S.No Types & Description
1 Card HTML Layout

The basic card HTML layout uses card classes to arrange its items.

2 List View With Cards

You can use cards as list view elements by adding cards-list class to <div class="list-block">.

Framework7 - Chips

Description

Chip is a small block of entity, which can contain a photo, small string of title, and short information.

Chips HTML Layout

The following code shows the basic chip HTML layout used in Framework7 −

<div class = "chip">
   <div class = "chip-media">
      <img src = "http://lorempixel.com/100/100/people/9/">
   </div>
   
   <div class = "chip-label">Jane Doe</div>
   <a href = "#" class = "chip-delete"></a>
</div>

The above HTML layout contains many classes as listed below −

  • chips − It is the chip container.

  • chip-media − This is the chip media element that can contain images, avatar or icon. It is optional.

  • card-label − It is the chip text label.

  • card-delete − It is the optional delete icon link of a chip.

Example

The following example represents the entities such as albums, card elements etc. along with a photo and brief information −

<!DOCTYPE html>
<html>

   <head>
      <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>Chips HTML Layout</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               
               <div class = "page navbar-fixed">
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center">Chips HTML Layout</div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block-title">Chips With Text</div>
                     <div class = "content-block">
                        <div class = "chip">
                           <div class = "chip-label">Chip one</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-label">Chip two</div>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Chips with icons</div>
                     
                     <div class = "content-block">
                        <div class = "chip">
                           <div class = "chip-media bg-blue"><i class = "icon icon-form-calendar"></i></div>
                           <div class = "chip-label">Set Date</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
                           <div class = "chip-label">Sent Mail</div>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Contact Chips</div>
                     
                     <div class = "content-block">
                        <div class = "chip">
                           <div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
                           <div class = "chip-label">James Willsmith</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media"><img src = "/framework7/images/pic2.jpg"></div>
                           <div class = "chip-label">Sunil Narayan</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-pink">R</div>
                           <div class = "chip-label">Raghav</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-teal">S</div>
                           <div class = "chip-label">Sharma</div>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-red">Z</div>
                           <div class = "chip-label">Zien</div>
                        </div>
                     </div>
                     
                     <div class = "content-block-title">Deletable Chips</div>
                     
                     <div class = "content-block">
                        <div class = "chip">
                           <div class = "chip-label">Chip one</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-teal">S</div>
                           <div class = "chip-label">Sharma</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
                           <div class = "chip-label">Sent</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
                           <div class = "chip-label">James Willsmith</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-label">Chip two</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                        
                        <div class = "chip">
                           <div class = "chip-media bg-green">R</div>
                           <div class = "chip-label">Raghav</div>
                           <a href = "#" class = "chip-delete"></a>
                        </div>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <style>
      </style>
      
      <script>
         var myApp = new Framework7 ({
            material: true
         });
         
         var $$ = Dom7;
         $$('.chip-delete').on('click', function (e) {
            e.preventDefault();
            var chip = $$(this).parents('.chip');
             
            myApp.confirm('Do you want to delete this Chip?', function () {
               chip.remove();
            });
         });
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as cards_html_layout.html file in your server root folder.

  • Open this HTML file as http://localhost/cards_html_layout.html and the output is displayed as shown below.

  • The example represents the complex entities in small blocks such as albums, card elements, posted image, which contains photo, title string and brief information.

Framework7 - Buttons

Description

Framework7 provides a group of ready to use buttons by just adding appropriate classes to links or input buttons.

S.No Types & Description
1 iOS Theme Buttons

Framework7 provides many iOS theme buttons, which can be used by applying appropriate classes.

2 Material Theme Buttons

The material theme provides many buttons to use in your application by using appropriate classes.

Framework7 - Action Button

Description

Framework7 provides floating action button for a promoted action. They appear as a floating circled icon over the UI. It has the motion behaviors that contain morphing, launching, and transferring an anchor point.

Floating action button is only supported in Material theme.

The following table lists the action buttons types used in Framework7 −

S.No Types & Description
1 Floating Action Button Layout

It is very simple; you just need to place it as a child of page or view.

2 Morph To Popover

If you want to open popover on clicking the floating action button then you can use floating-button-to-popover class.

3 Speed Dial

You can invoke related actions upon clicking the floating action button by using speed dial.

Framework7 - Forms

Description

Forms are used for interacting with the users and collects data from the web users using text fields, checkboxes, radio buttons etc.

Framework7 provides different types of form elements to work with the applications smoothly as specified in the table below −

S.No Overlay Type & Description
1 Form Elements

Form elements are used to make good looking form layouts.

2 Checkboxes and Radios

The list view extention allows you to create checkbox and radio inputs in Framework7.

3 Smart Select

Smart select is an easy way of changing form selects to dynamic pages by using groups of checkboxes and radio inputs.

4 Disabled Elements

The elements can be disabled by applying the disabled class to the element or adding disabled attributes for form element.

5 Form Data

Framework7 has very few useful methods, which makes working with forms easy.

6 Form Storage

It is easy with the form storage to store and parse forms data automatically on Ajax loaded pages.

7 Ajax Form Submit

Framework7 allows you to send data automatically using Ajax.

Framework7 - Tabs

Description

Tabs are sets of logically grouped content that allow us to quickly flip between them to and saves the space like accordions.

Tabs Layout

The following code defines the layout for the tabs −

<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

Where −

  • <div class = "tabs"> − It is a required wrapper for all tabs. If we miss this, tabs will not work at all.

  • <div class = "tab"> − It is a single tab, which should have unique id attribute.

  • <div class = "tab active"> − It is a single active tab, which uses additional active class to make tab visible (active).

Switching Between Tabs

You can use some controller in tabs layout, so that the user can switch between them.

For this, you need to create links (<a> tags) with tab-link class and href attribute equal to the id attribute of target tab −

<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1)  -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>

<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2)  -->
<a href = "#tab2" class = "tab-link">Tab 2</a>

<a href = "#tab3" class = "tab-link">Tab 3</a>

Switch Multiple Tabs

If you are using single tab link to switch between multiple tabs, then you can use classes instead of using ID's and data-tab attribute.

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

The data-tab attribute of tab-link contains CSS selector of target tab/tabs.

We can use different ways of tabs, these are specified in the following table −

S.No Tabs Types & Description
1 Inline Tabs

Inline tabs are sets of grouped in inline that allow you to quickly flip between them.

2 Switch Tabs From Navbar

We can place tabs in navigation bar that allow you to flip between them.

3 Switch Views From Tab Bar

Single tab can be used to switch between views with its own navigation and layout.

4 Animated Tabs

You can use simple transition (animation) to switch tabs.

5 Swipeable Tabs

You can create swipeable tabs with simple transition by using the tabs-swipeable-wrap class for the tabs.

6 Tabs JavaScript Events

JavaScript events can be used when you are working with JavaScript code for the tabs.

7 Show Tab Using JavaScript

You can switch or show the tab using JavaScript methods.

Framework7 - Swiper Slider

Description

The swiper slider is the most powerful and modern touch slider and comes into Framework7 with lots of features.

The following HTML layout shows the swiper slider −

<!-- Container class for slider -->
<div class = "swiper-container">
   <!-- Wrapper class for slider -->
   <div class = "swiper-wrapper">
      <!-- Slides -->
      <div class = "swiper-slide">Slide 1</div>
      <div class = "swiper-slide">Slide 2</div>
      <div class = "swiper-slide">Slide 3</div>
      ... other slides ...
   </div>
   
   <!-- Define pagination, if it is required -->
   <div class = "swiper-pagination"></div>
</div>

The following classes are used for swiper slider −

  • swiper-container − It is a required element for main slider container and it is used for slides and paginations.

  • Swiper-wrapper − It is a required element for additional wrapper slides.

  • swiper-slide − It is a single slide element and it could contain any HTML inside.

  • swiper-pagination − It is optional for pagination bullets and those are created automatically.

You can initialize the swiper with JavaScript using its related methods −

myApp.swiper(swiperContainer,parameters)

OR

new Swiper(swiperContainer, parameters)

Both the methods are used to initialize the slider with options.

The above given methods contain the following parameters −

  • swiperContainer − It is HTMLElement or string of a swiper container and it is required.

  • parameters − These are optional elements containing object with swiper parameters.

For example −

var mySwiper = app.swiper('.swiper-container', {
   speed: 400,
   spaceBetween: 100
});

It is possible to access a swiper's instance and the swiper property of the slider's container has the following HTML element −

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

You can see the different ways and types of swiper in the following table −

S.No Swiper Types & Description
1 Default Swiper With Pagination

It is a modern touch slider and the swiper swipes horizontally, by default.

2 Vertical Swiper

This one also works as a default swiper but it swipes vertically.

3 With Space Between Slides

This swiper is used to give space between two slides.

4 Multiple Swipers

This swiper uses more than one swipers on a single page.

5 Nested Swipers

It is the combination of vertical and horizontal slides.

6 Custom Controls

It is used for custom controls to choose or swipe any slide.

7 Lazy Loading

It can be used for multimedia file, which takes time to load.

Framework7 - Photo Browser

Description

The Photo browser is similar to iOS photo browser component to display group of images, which can be zoomed and panned. To slide between images, photo browser uses Swiper Slider.

The following table shows the photo browser types used in framework7 −

S.No Photo browser types & Description
1 Create Photo Browser Instance

Photo browser can be created and initialized using JavaScript only.

2 Photo Browser Parameters

Framework7 provides a list of parameters, which are used with photo browser.

3 Photo Browser Methods & Properties

You will get an initialized instance variable to use photo browser methods and properties once you initialize photo browser.

4 Photos Array

During initializing photo browser, you need to pass array with photos/videos in photos parameter.

5 Photo Browser Templates

Framework7 provides you many photo browser templates, which you can pass on photo browser initialization.

Framework7 - Autocomplete

Description

Autocomplete is a Framework7's mobile friendly and touch optimized component, which can be as dropdown or in standalone way. You can create and initialize Autocomplete instance by using the JavaScript method −

myApp.autocomplete(parameters)

Where parameters are required objects used to initialize the Autocomplete instance.

Autocomplete Parameters

The following table lists the available Autocomplete parameters in Framework7 −

S.No Parameters & Description Type Default
1

openIn

It defines how to open an Autocomplete which could be used as dropdown, popup or page.

string page
2

source

It uses autocomplete instance, search query and renders function to pass matched items with array.

function (autocomplete, query, render) -
3

valueProperty

It specifies the item value of matched item object's key.

string id
4

limit

It displays the limited number of items in autocomplete per query.

number -
5

preloader

Preloader can be used to specify autocomplete layout by setting it to true.

boolean false
6

preloaderColor

It specifies the preloader color. By default, the color is "black".

string -
7

value

Defines the array with default selected values.

array -
8

textProperty

It specifies the item value of matched item object's key, which can be used as a title of displayed options.

string text

Standalone Autocomplete Parameters

The following table lists the available Standalone Autocomplete parameters in Framework7 −

S.No Parameters & Description Type Default
1

opener

It is string or HTML element parameter, which will open the standalone autocomplete page.

string or HTMLElement -
2

popupCloseText

It is used to close the autocomplete popup.

string 'Close'
3

backText

It provides the back link when autocomplete is opened as page.

string 'Back'
4

pageTitle

It specifies the autocomplete page title.

string -
5

searchbarPlaceholderText

It specifies the search bar placeholder text.

string 'Search'
6

searchbarCancelText

It defines the search bar cancel button text.

string 'cancel'
7

notFoundText

It displays the text when there is no matched element found.

string 'Nothing found'
8

multiple

It allows to select multiple selection by setting it to true.

boolean false
9

navbarTheme

It specifies the color theme for navbar.

string -
10

backOnSelect

When the user picks value, the autocomplete will be closed by setting it to true.

boolean false
11

formTheme

It specifies the color theme for form.

string -

Dropdown Autocomplete Parameters

The following table lists the available Dropdown Autocomplete parameters in Framework7 −

S.No Parameters & Description Type Default
1

input

It is string or HTML element used for text input.

string or HTMLElement -
2

dropdownPlaceholderText

It specifies the dropdown placeholder text.

string -
3

updateInputValueOnSelect

You can update the input value on select by setting it to true.

boolean true
4

expandInput

You can expand the text input in List View to make full screen wide during dropdown visible by setting item-input it to true.

boolean false

Autocomplete Callbacks Functions

The below table lists available Dropdown Autocomplete parameters in Framework7 −

S.No Parameters & Description Type Default
1

onChange

Whenever the autocomplete value is changed, this callback function will be executed.

function (autocomplete, value) -
2

onOpen

Whenever autocomplete is opened, this callback function will be executed.

function (autocomplete) -
3

onClose

Whenever autocomplete is closed, this callback function will be executed.

function (autocomplete) -

Autocomplete Templates

The following table lists the available Dropdown Autocomplete parameters in Framework7 −

S.No Parameters & Description Type Default
1

navbarTemplate

It is standalone autocomplete navbar template.

string -
2

itemTemplate

It is standalone template7 form item.

string -
3

dropdownTemplate

It is template7 dropdown template.

string -
4

dropdownItemTemplate

It is template7 dropdown list item.

string -
5

dropdownPlaceholderTemplate

It is template7 dropdown placeholder item.

string -

Default templates

Following are the default template code snippets for the above defined templates parameters −

navbarTemplate

<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
   <div class = "navbar-inner">
      <div class = "left sliding">
         {{#if material}}
            <a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
               <i class = "icon icon-back"></i>
            </a>
         {{else}}
            <a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}}">
               <i class = "icon icon-back"></i>
               {{#if inPopup}}
                  <span>{{popupCloseText}}</span>
               {{else}}
                  <span>{{backText}}</span>
               {{/if}}
            </a>
         {{/if}}
      </div>

      <div class = "center sliding">{{pageTitle}}</div>
      {{#if preloader}}
         <div class = "right">
            <div class = "autocomplete-preloader preloader 
               {{#if preloaderColor}}
                  preloader-{{preloaderColor}}
               {{/if}}">
            </div>
         </div>
      {{/if}}
   </div>
</div>

itemTemplate

<li>
    <label class = "label-{{inputType}} item-content">
        <input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
        {{#if material}}
            <div class = "item-media">
                <i class = "icon icon-form-{{inputType}}"></i>
            </div>
            
            <div class = "item-inner">
                <div class = "item-title">{{text}}</div>
            </div>
        {{else}}
            {{#if checkbox}}
               <div class = "item-media">
                  <i class = "icon icon-form-checkbox"></i>
               </div>
            {{/if}}
            
            <div class = "item-inner">
                <div class = "item-title">{{text}}</div>
            </div>
        {{/if}}
    </label>
</li>

dropdownTemplate

<div class = "autocomplete-dropdown">
   <div class = "autocomplete-dropdown-inner">
      <div class = "list-block">
         <ul></ul>
      </div>
   </div>
   
   {{#if preloader}}
      <div class = "autocomplete-preloader preloader 
         {{#if preloaderColor}}
            preloader-{{preloaderColor}}
         {{/if}}">
         {{#if material}}
            {{materialPreloaderHtml}}
         {{/if}}
      </div>
   {{/if}}
</div>

dropdownItemTemplate

<li>
   <label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
      <div class = "item-inner">
         <div class = "item-title">{{text}}</div>
      </div>
   </label>
</li>

dropdownPlaceholderTemplate

<li class = "autocomplete-dropdown-placeholder">
   <div class = "item-content">
      <div class = "item-inner">
         <div class = "item-title">{{text}}</div>
      </div>
   </label>
</li>

Autocomplete Methods

The following table specifies Autocomplete methods available in Framework7 −

S.No Methods & Description
1

myAutocomplete.params

Defines the initialization parameters that are passes with object.

2

myAutocomplete.value

It defines the array with selected values.

3

myAutocomplete.opened

It opens the Autocomplete if it is set to true.

4

myAutocomplete.dropdown

It specifies an instance of Autocomplete dropdown.

5

myAutocomplete.popup

It specifies an instance of Autocomplete popup.

6

myAutocomplete.page

It specifies an instance of Autocomplete page.

7

myAutocomplete.pageData

It defines Autocomplete page data.

8

myAutocomplete.searchbar

It defines Autocomplete searchbar instance.

Autocomplete Properties

The following table specifies Autocomplete methods available in Framework7 −

S.No Properties & Description
1

myAutocomplete.open()

It opens the Autocomplete, which could be used as dropdown, popup or page.

2

myAutocomplete.close()

It closes the Autocomplete.

3

myAutocomplete.showPreloader()

It shows the Autocomplete preloader.

4

myAutocomplete.hidePreloader()

It hides the Autocomplete preloader.

5

myAutocomplete.destroy()

It ruins the Autocomplete preloader instance and removes all events.

Example

The following example demonstrates the use of autocomplete parameters hiding in the Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <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>Autocomplete</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Autcomplete</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
               
                  <div class = "page-content">
                     <div class = "content-block-title">Simple Dropdown Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With Input Expand</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With All Values</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With Placeholder</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Simple Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Country</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Popup Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Country</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Countries</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div> 
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type  =  "text/javascript" 
         src  =  "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp  =  new Framework7();
         var $$  =  Dom7;
         var mainView  =  myApp.addView('.view-main');
         
         // Countries data array
         var countries  =  ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' ');

         // Simple Dropdown
         var autocompleteDropdownSimple  =  myApp.autocomplete ({
            input: '#autocomplete-dropdown',
            openIn: 'dropdown',
            
            source: function (autocomplete, query, render) {
               var results  =  [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with input expand
         var autocompleteDropdownExpand = myApp.autocomplete ({
            input: '#autocomplete-dropdown-expand',
            openIn: 'dropdown',
            expandInput: true,   // expandInput used as item-input in List View will be expanded to full screen wide
                                 //during dropdown
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               // Find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with all values
         var autocompleteDropdownAll = myApp.autocomplete ({
            input: '#autocomplete-dropdown-all',
            openIn: 'dropdown',
            
            source: function (autocomplete, query, render) {
               var results = [];
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with placeholder
         var autocompleteDropdownPlaceholder = myApp.autocomplete ({
            input: '#autocomplete-dropdown-placeholder',
            openIn: 'dropdown',
            dropdownPlaceholderText: 'Type as "India"',
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
                  
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Simple Standalone
         var autocompleteStandaloneSimple = myApp.autocomplete ({
            openIn: 'page', //open in page
            opener: $$('#autocomplete-standalone'), //link that opens autocomplete
            backOnSelect: true, //go back after we select something
            
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            },
               
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$('#autocomplete-standalone').find('.item-after').text(value[0]);
               
               // You can add item value to input value
               $$('#autocomplete-standalone').find('input').val(value[0]);
            }
         });

         // Standalone Popup
         var autocompleteStandalonePopup = myApp.autocomplete ({
            openIn: 'popup', // Opens the Autocomplete in page
            opener: $$('#autocomplete-standalone-popup'), // It will open standalone autocomplete popup
            backOnSelect: true, //After selecting item, then go back to page
            source: function (autocomplete, query, render) {
            var results = [];
            if (query.length === 0) {
               render(results);
               return;
            }
            
            // You can find matched items
            for (var i = 0; i < countries.length; i++) {
               if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
            }
            
            // Display the items by passing array with result items
               render(results);
            },
            
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
               
               // You can add item value to input value
               $$('#autocomplete-standalone-popup').find('input').val(value[0]);
            }
         });

         // Multiple Standalone
         var autocompleteStandaloneMultiple = myApp.autocomplete ({
            openIn: 'page', //Opens the Autocomplete in page
            opener: $$('#autocomplete-standalone-multiple'), //link that opens autocomplete
            multiple: true, //Allow multiple values
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
               }
               
               // Display the items by passing array with result items
               render(results);
            },
            
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
               
               // You can add item value to input value
               $$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
            }
         });
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as autocomplete.html file in your server root folder.

  • Open this HTML file as http://localhost/autocomplete.html and the output is displayed as shown below.

  • The example provides autocomplete of values in simple dropdown, dropdown with all values, dropdown with placeholder, standalone autocomplete etc.

Framework7 - Picker

Description

Picker looks like iOS native picker and it is a powerful component that allows you to pick any values from list and also used to create custom overlay pickers. You can use Picker as inline component or as overlay. The overlay picker will be automatically converted to Popover on tablets (iPad).

Using the following App’s method, you can create and initialize the JavaScript method −

myApp.picker(parameters)

Where parameters are required objects, used to initialized the picker instance and it is a required method.

Picker Parameters

The following table specifies the available parameters in the pickers −

S.No Parameters & Description Type Default
1

container

String with CSS selector or HTMLElement used to generate Picker HTML for an inline pickers.

string or HTMLElement -
2

input

The related input element placed with the string with CSS selector or HTMLElement.

string or HTMLElement -
3

scrollToInput

It is used to scroll viewport (page-content) of input, whenever picker is opened.

boolean true
4

inputReadOnly

Used to set the "readonly" attribute on specified input.

boolean true
5

convertToPopover

It is used to convert the picker modal to Popover on large screens like iPad.

boolean true
6

onlyOnPopover

You can open the picker in Popover by enabling it.

boolean true
7

cssClass

To picker modal, you can use additional CSS class name.

string -
8

closeByOutsideClick

You can close the picker by clicking outside of picker or input element by enabling the method.

boolean false
9

toolbar

It is used to enable the picker modal toolbar.

boolean true
10

toolbarCloseText

Used for Done/Close toolbar button.

string 'Done'
11

toolbarTemplate

It is toolbar HTML Template, by default it is HTML string with the following template −

<div class = "toolbar">
  <div class = "toolbar-inner">
    <div class = "left"></div>
    <div class = "right">
      <a href = "#" class = "link close-picker">
         {{closeText}}
      </a>
    </div>
  </div>
</div> 
string -

Specific Picker Parameters

The following table lists the available specific picker parameters −

S.No Parameters & Description Type Default
1

rotateEffect

It enables 3D rotate effect in picker.

boolean false
2

momentumRatio

When you release picker after fast touch and move, it produces more momentum.

number 7
3

updateValuesOnMomentum

Used to update pickers and input values during momentum.

boolean false
4

updateValuesOnTouchmove

Used to update pickers and input values during touch move.

boolean true
5

value

The array has its initial values and also each array item represents the value of related column.

array -
6

formatValue

The function is used to format the input value, and it should return new/formatted string value. The values and displayValues are array of related column.

function (p, values, displayValues) -
7

cols

Every array item represents an object with column parameters.

array -

Picker Parameter Callbacks

The following table shows the lists of callback functions available in pickers −

S.No Callbacks & Description Type Default
1

onChange

The callback function will be executed whenever the picker value changed and the values and displayValues are arrays of related column.

function (p, values, displayValues) -
2

onOpen

The callback function will be executed whenever picker is opened.

function (p) -
3

onClose

The callback function will be executed whenever picker is closed.

function (p) -

Column Parameters

At the moment of configuration of Picker, we need to pass cols parameter. It is a represented as array, where each item is object with column parameters −

S.No Parameters & Description Type Default
1

values

You can specify the string columns values with an array.

array -
2

displayValues

It has array with string columns values and it will display value from values parameter, When it not specified.

array -
3

cssClass

The CSS class name used to set on column HTML container.

string -
4

textAlign

It is used to set text alignment of column values and it could be "left", "center" or "right".

string -
5

width

Width is calculated automatically, by default. If you need to fix column widths in picker with dependent columns that should be in px.

number -
6

divider

It is used for column that should be visual divider, it doesn't have any values.

boolean false
7

content

It is used to specified divider-column (divider:true) with content of the column.

string -

Column Callbacks Parameter

S.No Callbacks & Description Type Default
1

onChange

Whenever the column value will change at that time callback function will execute. The value and displayValue represent current column value and displayValue.

function (p, value, displayValue) -

Picker Properties

The Picker variable has many properties those are given in the following table −

S.No Properties & Description
1

myPicker.params

You can initialize passed parameters with object.

2

myPicker.value

The selected value for each column is represented by an array of item.

3

myPicker.displayValue

The selected display value for each column is represented by an array of item.

4

myPicker.opened

When picker is opened, it sets to true value.

5

myPicker.inline

When picker is inline, it sets to true value.

6

myPicker.cols

The Picker columns has its own methods and properties.

7

myPicker.container

The Dom7 instance is used for HTML container.

Picker Methods

The picker variable has helpful methods, which are given in the following table −

S.No Methods & Description
1

myPicker.setValue(values, duration)

Use to set new picker value. The values are in array where each item represents value for each column. duration - It is transition duration in ms.

2

myPicker.open()

Use to open Picker.

3

myPicker.close()

Use to close Picker.

4

myPicker.destroy()

Use to destroy Picker instance and remove all events.

Column Properties

Each column in myPicker.cols array also has its own useful properties, which are given in the following table −

//Get first column
var col = myPicker.cols[0];
S.No Properties & Description
1

col.container

You can create an instance with column HTML container.

2

col.items

You can create an instance with column items HTML elements.

3

col.value

Used to select the current column value.

4

col.displayValue

Used to select the current column value of display.

5

col.activeIndex

Give the current index number, which is selected/active item.

Column Methods

The useful column methods are given in the following table −

S.No Methods & Description
1

col.setValue(value, duration)

Used to set a new value for the current column. The value must be a new value, and duration is transition duration given in ms.

2

col.replaceValues(values, displayValues)

Used to replace the column values and displayValues with new ones.

It is used to access Picker's instance from its HTML container, whenever you initialize Picker as inline Picker.

var myPicker = $$('.picker-inline')[0].f7Picker;

There are different types of Pickers as specified in the following table −

S.No Tabs Types & Description
1 Picker With Single Value

It is a powerful component that allows you to pick any values from list.

2 Two Values and 3D-Rotate Effect

In the picker you can use for 3D rotate effect.

3 Dependent Values

Values are dependent on each other for specified element.

4 Custom Toolbar

You can use one or more picker on single page for customize.

5 Inline Picker / Date-time

You can select number of values in the inline picker.Like date has date, month, year and time has hours, minutes, seconds.

Framework7 - Calendar

Description

The Calendar component allows you to handle dates easily and can be used as an inline or as an overlay component. The overlay calendar will be converted to popover on tablets automatically.

Calendar can be created and initialized only by using JavaScript. You need to use the related App's method as shown below −

  • myApp.calendar(parameters) − This method returns initialized calendar instance. It accepts an object as paramaters.

The following table shows the calendar usage in Framework7 −

S.No Calendar Usage & Description
1 Calendar Parameters

Framework7 provides a list of parameters, which are used with calendar.

2 Calendar Methods & Properties

You will get an initialized instance variable to use the calendar methods and properties, once you initialize the calendar.

3 Access to Calendar's Instance

It is possible to access the calendar instance from its HTML container when you initialize the calendar as inline.

Framework7 - Refresh

Description

It is a special component used to refresh (reload) the page contents by pulling it.

The following code shows how to refresh the page content −

<div class = "page">
   <!-- Page content should have additional "pull-to-refresh-content" class -->
   <div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
      <!-- Default pull to refresh layer-->
      <div class = "pull-to-refresh-layer">
         <div class = "preloader"></div>
      <div class = "pull-to-refresh-arrow"></div>
   </div>

   <!-- usual content below -->
   <div class = "list-block">
      ...
   </div>
</div>

The following classes are used in refresh −

  • page-content − It has an additional pull-to-refresh-content class and its required to enable pull to refresh.

  • pull-to-refresh-layer − It is a hidden layer, which is used to pull to refresh visual element and it is just a preloader and an arrow.

  • data-ptr-distance = "55" − This is additional attribute that allows you to set custom 'pull to refresh' trigger distance and its default value is 44px.

Pull To Refresh Events

In ‘Pull to Refresh’ there are some JavaScript events, which are given in the following table −

S.No Event & Description Target
1

pullstart

It will be triggered whenever you start pulling to refresh content.

Pull To Refresh content.

<div class = "pull-to-refresh-content">
2

pullmove

It is triggered when you are pulling to refresh content.

Pull To Refresh content.

<div class="pull-to-refresh-content">
3

pullend

It will be triggered whenever you release pull to refresh content.

Pull To Refresh content.

<div class="pull-to-refresh-content">
4

refresh

This event will be triggered when the pull to refresh enters in the "refreshing" state.

Pull To Refresh content.

<div class="pull-to-refresh-content">
5

refreshdone

It will be triggered after it is refreshed and it goes back to the initial state. This will be done after calling pullToRefreshDone method.

Pull To Refresh content.

<div class="pull-to-refresh-content">

There are App's methods that can be used with Pull to Refresh.

S.No App's Methods & Description
1

myApp.pullToRefreshDone(ptrContent)

It is used to reset pull-to-refresh content.

2

myApp.pullToRefreshTrigger(ptrContent)

It is used to trigger to refresh on specified pull to refresh content.

3

myApp.destroyPullToRefresh(ptrContent)

It is used to destroy/disable pull to refresh on specified pull to refresh content.

4

myApp.initPullToRefresh(ptrContent)

It is used to initialize/enable pull to refresh content.

Where ptrContent is used to HTMLElement or string to pull-to-refresh-content to reset/trigger or disable/enable.

Example

The following example demonstrates the use of refresh component that initiates the refreshing of a page contents −

<!DOCTYPE html>
<html>
   <head>
      <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>Pull To Refresh</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
   </head>
   <div class="views">
      <div class="view view-main">
         <div class="pages">
            <div data-page="home" class="page navbar-fixed">
               <div class="navbar">
                  <div class="navbar-inner">
                     <div class="left"> </div>
                     <div class="center">Pull To Refresh</div>
                     <div class="right"> </div>
                  </div>
               </div>
               <div class="page-content pull-to-refresh-content">
                  <div class="pull-to-refresh-layer">
                     <div class="preloader"></div>
                     <div class="pull-to-refresh-arrow"></div>
                  </div>
                  <div class="list-block media-list">
                     <ul>
                        <li class="item-content">
                           <div class="item-media"><img src="/framework7/images/apple.png" width="44"></div>
                           <div class="item-inner">
                              <div class="item-title-row">
                                 <div class="item-title">apple</div>
                              </div>
                           </div>
                        </li>
                        <li class="item-content">
                           <div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
                           <div class="item-inner">
                              <div class="item-title-row">
                                 <div class="item-title">strawberry</div>
                              </div>
                           </div>
                        </li>
                        <li class="item-content">
                           <div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
                           <div class="item-inner">
                              <div class="item-title-row">
                                 <div class="item-title">Mango</div>
                              </div>
                           </div>
                        </li>
                     </ul>
                     <div class="list-block-label">
                        <p>Just pull page down to let the magic happen.</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
   <script>
      var myApp = new Framework7();

      var $$ = Dom7;

      // Dummy Content
      var fruits = ['mango', 'orange', 'watermelon', 'banana'];
      // Pull to refresh content
      var ptrContent = $$('.pull-to-refresh-content');
      // Add 'refresh' listener on it
      ptrContent.on('refresh', function (e) {
         // Emulate 2s loading
         setTimeout(function () {
            var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100);
            var fruit = fruits[Math.floor(Math.random() * fruits.length)];
            var itemHTML = '<li class="item-content">' +
               '<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
               '<div class="item-inner">' +
               '<div class="item-title-row">' +
               '<div class="item-title">' + fruit + '</div>' +
                  '</div>' + '</div>' + '</li>';
            // Prepend new list element
            ptrContent.find('ul').prepend(itemHTML);
				
            // When loading done, we need to reset it
            myApp.pullToRefreshDone();
         }, 2000);
      });
   </script>
</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as pull_to_refresh.html file in your server root folder.

  • Open this HTML file as http://localhost/pull_to_refresh.html and the output is displayed as shown below.

  • When the user pulls down, the page will be refreshed with the contents.

Framework7 - Infinite Scroll

Description

The Infinite Scroll allows you to load additional content and performs the required actions when the page is near to the bottom.

The following HTML layout shows the infinite scroll −

<div class = "page">
   <div class = "page-content infinite-scroll" data-distance = "100">
      ...
   </div>
</div>

The above layout contains the following classes −

  • page-content infinite-scroll − It is used for infinite scroll container.

  • data-distance − This attribute allows you to configure distance from the bottom of page (in px) to trigger infinite scroll event and its default value is 50px.

If you want to use infinite scroll on top the page, you need to add additional "infinite-scroll-top" class to "page-content"

<div class = "page">
   <div class = "page-content infinite-scroll infinite-scroll-top">
      ...
   </div>
</div>

Infinite Scroll Events

infinite − It is used to trigger when page scroll reaches specified distance to the bottom. It will be target by div class = "page-content infinite-scroll".

There are two App's methods that can be used with infinite scroll container −

To add infinite scroll event listener to the specified HTML container, use the following method −

myApp.attachInfiniteScroll(container)

You can remove the infinite scroll event listener from the specified HTML container by using the following method −

myApp.detachInfiniteScroll(container)

Where parameters are required options used as HTMLElement or string for infinite scroll container.

Example

The following example demonstrates the infinite scroll that loads the additional content when the page scroll is near to the bottom −

<!DOCTYPE html>
<html>

   <head>
      <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>infinite_scroll</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>
   
   <body>
      <div class = "views">
         <div class = "view view-main">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "left"> </div>
                  <div class = "center sliding">Infinite Scroll</div>
                  <div class = "right"> </div>
               </div>
            </div>
         
            <div class = "pages navbar-through">
               <div data-page = "home" class = "page">
                  <div class = "page-content infinite-scroll">
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 1</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 2</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 3</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 4</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 5</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 6</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 7</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 8</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 9</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 10</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 11</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 12</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 13</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 14</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 15</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 16</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 17</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 18</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 19</div>
                              </div>
                           </li>
                        
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item 20</div>
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "infinite-scroll-preloader">
                        <div class = "preloader"></div>
                     </div>
                  </div>
               </div>
            </div>
         
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <style>
         .infinite-scroll-preloader {
            margin-top:-20px;
            margin-bottom:10px;
            text-align:center;
         }
         
         .infinite-scroll-preloader .preloader {
            width:34px;
            height:34px;
         }
      </style>
      
      <script>
         var myApp = new Framework7();
         var $$ = Dom7;

         // Loading flag
         var loading = false;

         // Last loaded index
         var lastIndex = $$('.list-block li').length;

         // Max items to load
         var maxItems = 60;

         // Append items per load
         var itemsPerLoad = 20;

         // Attach 'infinite' event handler
         $$('.infinite-scroll').on('infinite', function () {

            // Exit, if loading in progress
            if (loading) return;

            // Set loading flag
            loading = true;

            // Emulate 1s loading
            setTimeout(function () {
               // Reset loading flag
               loading = false;

               if (lastIndex >= maxItems) {
                  // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
                  myApp.detachInfiniteScroll($$('.infinite-scroll'));
                  
                  // Remove preloader
                  $$('.infinite-scroll-preloader').remove();
                  return;
               }

               // Generate new items HTML
               var html = '';
               for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
                  html += '<li class = "item-content">
                     <div class = "item-inner">
                        <div class = "item-title">
                           Item ' + i + '
                        </div>
                     </div>
                  </li>';
               }

               // Append new items
               $$('.list-block ul').append(html);

               // Update last loaded index
               lastIndex = $$('.list-block li').length;
            }, 1000);
         });
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as infinite_scroll.html file in your server root folder.

  • Open this HTML file as http://localhost/infinite_scroll.html and the output is displayed as shown below.

  • The example allows loading of additional content when your page scroll reaches specified distance to the bottom.

Framework7 - Messages

Description

Messages are component of Framework7, which gives visualization of comments and messaging system in the application.

Messages Layout

The framework7 has the following messages layout structure −

<div class = "page">
<div class = "page-content messages-content">
   <div class = "messages">
      <!-- Defines the date stamp -->
      <div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
      
      <!-- Displays the sent message and by default, it will be in green color on right side -->
      <div class = "message message-sent">
         <!-- Define the text with bubble type -->
         <div class = "message-text">Hello</div>
      </div>
      
      <!-- Displays the another sent message -->
      <div class = "message message-sent">
         <!-- Define the text with bubble type -->
         <div class = "message-text">How are you?</div>
      </div>
      
      <!-- Displays the received message and by default, it will be in grey color on left side -->
      <div class = "message message-with-avatar message-received">
         <!-- Provides sender name -->
         <div class = "message-name">Smith</div>
         <!--  Define the text with bubble type -->
         <div class = "message-text">I am fine, thanks</div>
         <!-- Defines the another date stamp -->
         <div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
      </div>
      
   </div>
</div>

The layout contains the following classes in different areas −

Messages Page Layout

The following table shows the classes of messages page layout with description.

S.No Classes & Description
1

messages-content

It is a required additional class added to "page-content" and used for messages wrapper.

2

messages

It is a required element for messages bubbles.

3

messages-date

It uses date stamp container to display date and time of message sent or received.

4

message

It is a single message to be displayed.

Single Message Inner Parts

The following table shows the classes of simple message inner parts with description.

S.No Classes & Description
1

message-name

It provides the sender name.

2

message-text

Define the text with bubble type.

3

message-avatar

It specifies the sender avatar.

4

message-label

It specifies the text label below the bubble.

Additional classes for Single Message Container

The following table shows additional classes for single message container description.

S.No Classes & Description
1

message-sent

It specifies that message was sent by the user and is displayed with green background color on the right side.

2

message-received

It is used for displaying the single message indicating that, the message was received by user and stays on the left side with grey background color.

3

message-pic

It is an additional class for displaying image with a single message.

4

message-with-avatar

It is an additional class for displaying a single message (received or sent) with avatar.

5

message-with-tail

You can add a bubble tail for single message (received or sent).

Additional Available Classes for Single Message

The following table shows the available classes for a single message with description.

S.No Classes & Description
1

message-hide-name

It is an additional class for hiding message name for a single message (received or sent).

2

message-hide-avatar

It is an additional class for hiding message avatar for a single message (received or sent).

3

message-hide-label

It is an additional class for hiding message label for a single message (received or sent).

4

message-last

You can use this class to indicate the last received or sent message in current conversation by one sender for a single message (received or sent).

5

message-first

You can use this class to indicate first received or first sent message in current conversation by one sender for a single message (received or sent).

Initializing Messages with JavaScript

You can initialize the messages with JavaScript by using the following method −

myApp.messages(messagesContainer, parameters)

The method takes two options −

  • messagesContainer − It is a required HTML element or string that includes messages container HTML element.

  • parameters − It specifies an object with messages parameters.

Messages Parameters

The following table shows the parameters of messages with description.

S.No Parameter & Description Type Default
1

autoLayout

It adds additional required classes to each message by enabling it.

boolean true
2

newMessagesFirst

You can display message on top instead of displaying on bottom by enabling it.

boolean false
3

messages

It displays an array of messages in which each message should be represented as object with message parameters.

array -
4

messageTemplate

It displays the single message template.

string -

Messages Properties

The following table shows the properties of messages with description.

S.No Property & Description
1

myMessages.params

You can initialize the passed parameters with object.

2

myMessages.container

Defines the DOM7 element with a message bar HTML container.

Messages Methods

The following table shows the methods of messages with description.

S.No Method & Description
1

myMessages.addMessage(messageParameters, method, animate);

The message can be added to the beginning or to the end by using the method parameter.

It has the following parameters −

  • messageParameters − It provides message parameters to add.

  • method − It is a string type that adds message to the beginning or to the end of messages container.

  • animate − It is a boolean type, which adds a message without any transition or scrolling animation by setting it to false. By default, it will be true.

2

myMessages.appendMessage(messageParameters, animate);

It adds a message to the end of message container.

3

myMessages.prependMessage(messageParameters, animate);

It adds a message to the beginning of message container.

4

myMessages.addMessages(messages, method, animate);

You can add multiple messages at one time.

It has the following parameter −

  • messages − It provides an array of messages to add, which should be represented as object with message parameters.

5

myMessages.removeMessage(message);

It is used to remove the message.

It has the following parameter −

  • message − It is a required HTML element or string that removes the message element.

6

myMessages.removeMessages(messages);

You can remove the multiple messages.

It has the following parameter −

  • messages − It is a required array with HTML elements or string that removes the messages.

7

myMessages.scrollMessages();

You can scroll messages from top to bottom and vice versa depending on the first parameter of new message.

8

myMessages.layout();

Auto layout can be applied to the messages.

9

myMessages.clean();

It is used to clean the messages.

10

myMessages.destroy();

It is used to destroy the messages.

Single Message Parameters

The following table shows the parameters for a single message with description.

S.No Parameter & Description Type Default
1

text

It defines the message text, which could be a HTML string.

string -
2

name

It specifies the sender name.
string -
3

avatar

It specifies the sender avatar URL string.

string -
4

time

It specifies the time string of the message like '9:45 AM', '18:35'.

string -
5

type

It provides type of message whether it could be sent or recieved message.

string sent
6

label

It defines the label of the message.

string -
7

day

It gives the day string of the message like 'sunday', 'monday', 'yesterday' etc.

string -

Initializing Messages with HTML

You can initialize the messages with HTML without JavaScript by using the additional messages-init class to messages and use the data- attributes to pass the required parameters as shown in the code snippet given below −

...
   <div class = "page-content messages-content">
      <!-- Initialize the messages using additional "messages-init" class-->
      <div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
         ...

      </div>
   </div>
...

Example

The following example demonstrates the use of messages in the Framework7 −

<!DOCTYPE html>
<html>

   <head>
      <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>Messages</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed toolbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Messages</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "toolbar messagebar">
                     <div class = "toolbar-inner">
                        <textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
                     </div>
                  </div>
                  
                  <div class = "page-content messages-content">
                     <div class = "messages">
                        <div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
                        <div class = "message message-sent">
                           <div class = "message-text">Hello</div>
                        </div>
                        
                        <div class = "message message-sent">
                           <div class = "message-text">Happy Birthday</div>
                        </div>
                        
                        <div class = "message message-received">
                           <div class = "message-name">Smith</div>
                           <div class = "message-text">Thank you</div>
                           <div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
                        </div>
                        
                        <div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
                        <div class = "message message-sent">
                           <div class = "message-text">Good Morning...</div>
                        </div>
                        
                        <div class = "message message-sent">
                           <div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
                           <div class = "message-label">Delivered</div>
                        </div>
                        
                        <div class = "message message-received">
                           <div class = "message-name">Smith</div>
                           <div class = "message-text">Very Good Morning...</div>
                           <div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
                        </div>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         var $$ = Dom7;

         // It indicates conversation flag
         var conversationStarted = false;

         // Here initiliaze the messages
         var myMessages = myApp.messages('.messages', {
            autoLayout:true
         });

         // Initiliaze the messagebar
         var myMessagebar = myApp.messagebar('.messagebar');

         // Displays the text after clicking the button
         $$('.messagebar .link').on('click', function () {
         
            // specifies the message text
            var messageText = myMessagebar.value().trim();
            
            // If there is no message, then exit from there
            if (messageText.length === 0) return;

            // Specifies the empty messagebar
            myMessagebar.clear()

            // Defines the random message type
            var messageType = (['sent', 'received'])[Math.round(Math.random())];

            // Provides the avatar and name for the received message
            var avatar, name;
            
            if(messageType === 'received') {
               name = 'Smith';
            }
            
            // It adds the message
            myMessages.addMessage ({
            
               // It provides the message text
               text: messageText,
            
               // It displays the random message type
               type: messageType,
            
               // Specifies the avatar and name of the sender
               avatar: avatar,
               name: name,
            
               // Displays the day, date and time of the message
               day: !conversationStarted ? 'Today' : false,
               time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
            })

            // Here you can update the conversation flag
            conversationStarted = true;
         });

      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as messages.html file in your server root folder.

  • Open this HTML file as http://localhost/messages.html and the output is displayed as shown below.

  • When you type a message into the message box and click the Send button, it specifies that your message has been sent and is displayed with green background color on the right side.

  • The message which you recieve, appears on the left side with the grey background along with the sender name.

Framework7 - Message Bar

Description

Framework7 provides special resizable toolbar to work with the messaging system in the application.

The following code shows the message bar layout −

<div clas = "toolbar messagebar">
   <div clas = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" clas = "link">Send</a>
   </div>
</div>   

In the message bar, the inside of the "page" is very important and is at the right of "messages-content" −

<div class = "page toolbar-fixed">
   <!-- messagebar -->
   <div class = "toolbar messagebar">
      <div class = "toolbar-inner">
         <textarea placeholder = "Message"></textarea>
         <a href = "#" class = "link">Send</a>
      </div>
   </div>
   
   <!-- messages-content -->
   <div class = "page-content messages-content">
      <div class = "messages">
         ... messages
      </div>
   </div>
</div>

You can use the following method for initializing the message bar with JavaScript −

myApp.messagesbar(messagesbarContainer, parameters)

The method has two options −

  • messagesbarContainer − It is a required HTML element or string that includes messagebar container HTML element.

  • parameters − It specifies an object with messagebar parameters.

For example −

var myMessagebar = app.messagebar('.messagebar', {
   maxHeight: 200
}); 

Messagebar Parameter

maxHeight − It is used to set maximum height of textarea and will be resized depending on the amount of its text. The type of parameter is number and the default value is null.

Messagebar Properties

The following table shows the messagebar properties −

S.No Properties & Description
1

myMessagebar.params

You can specify object with passed initialization parameters.

2

myMessagebar.container

You can specify dom7 element with messagebar container HTML element.

3

myMessagebar.textarea

You can specify dom7 element with messagebar textarea HTML element.

Messagebar Methods

The following table shows the messagebar methods −

S.No Methods & Description
1

myMessagebar.value(newValue);

It sets messagebar textarea value/text and returns messagebar textarea value, if newValue is not specified.

2

myMessagebar.clear();

It clears the textarea and updates/resets the size.

3

myMessagebar.destroy();

It destroy messagebar instance.

Initialize Messagebar with HTML

You can initialize the messagebar using HTML without JavaScript methods and properties by adding the messagebar-init class to the .messagebar and you can pass the required parameters using data- attributes.

The following code specifies the initialization of messagebar with HTML −

<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
   <div class = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" class = "link">Send</a>
   </div>
</div>  

Access to Messagebar's Instance

It is possible to access the message bar instance, if you initialize it by using HTML; it is achieved by using the f7 Message bar property of its container element.

var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world'); 

You can see the example of Messagebar, which is explained in this link

Framework7 - Notifications

Description

Notifications are used to show the required messages, which appear like Push (or Local) iOS notifications.

The following table demonstrates the use of notifications in details −

S.No Notifications usage & Description
1 Notifications JavaScript API

The notifications can also be added or closed with JavaScript by using the related app methods.

2 Notifications Layout

Framework7 notifications will be added by using JavaScript.

3 Example iOS

Framework7 allows you to use different types of notifications in your iOS layout.

4 Example Material

Framework7 notifications can also be used in material layout.

Framework7 - Lazy Load

Description

Lazy loading delays your image loading process on a given page. Lazy loading improves scrolling performance, speeds page load and saves traffic.

Lazy load elements and images must be inside of scrollable <div class = "page-content"> to work properly.

The following table demonstrates the use of lazy load −

S.No Lazy load usage & Description
1 Usage

The lazy load can be applied to images, background images and with fade-in effect.

2 Init Lazy Load Manually

After initializing a page, if you add lazy load images manually then, lazy load will not work and you need to use methods to initialize it.

It is possible to trigger image loading manually by using lazy event on lazy image/element as shown below −

$$('img.lazy').trigger('lazy');

$$('div.lazy').trigger('lazy');

Example

The following example demonstrates the use of lazy loading in Framework7 −

<!DOCTYPE html>
<html class = "with-statusbar-overlay">

   <head>
      <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>Lazy Load</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Lazy Load</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <div class = "content-block-inner">
                           <p> <img data-src = "/framework7/images/pic4.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                           
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                           nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
                           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                           pariatur.</p>
                           
                           <p> <img data-src = "/framework7/images/pic5.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Sed ut perspiciatis unde omnis iste natus error sit 
                           voluptatem accusantium doloremque laudantium, totam rem aperiam, 
                           eaque ipsa quae ab illo inventore veritatis et quasi architecto 
                           beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
                           voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur 
                           magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                           
                           <p> <img data-src = "/framework7/images/background.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                           nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
                           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                           pariatur.</p>
                           
                           <p> <img data-src = "/framework7/images/pic6.jpg"
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab 
                           illo inventore veritatis et quasi architecto beatae vitae dicta sunt 
                           explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut 
                           odit aut fugit, sed quia consequuntur magni dolores eos qui ratione 
                           voluptatem sequi nesciunt.</p>
                           
                           <p> <img data-src = "/framework7/images/pic7.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                           nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
                           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                           pariatur.</p>
                           
                           <p> <img data-src = "/framework7/images/pic8.jpg" 
                              width = "100%" class = "lazy lazy-fadeIn"></p>
                              
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                           Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus 
                           id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus. 
                           Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor 
                           tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est 
                           sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
                           
                           <p><b>Using as background image:</b></p>
                           
                           <div data-background = "/framework7/images/pic7.jpg" 
                              style = "background: #aaa; height:60vw; background-size-cover" 
                              class = "lazy lazy-fadeIn">
                           </div>
                           
                           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab 
                           illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
                           Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
                           sed quia consequuntur magni dolores eos qui ratione voluptatem sequi 
                           nesciunt.</p>
                        </div>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>var myApp = new Framework7();</script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as framework7_lazy_load.html file in your server root folder.

  • Open this HTML file as http://localhost/framework7_lazy_load.html and the output is displayed as shown below.

  • The example specifies the lazy load of images where images will get loaded on the page when you scroll them down.

Framework7 - Color Themes

Description

Framework7 provides different color themes for your applications.

A color theme provides different types of theme colors used to work with the applications smoothly as specified in the table below −

S.No Theme Type & Description
1 iOS Theme Colors

You can use 10 different default iOS color themes for the application.

2 Material Theme Colors

Framework7 provides 22 different default material color themes for the application.

Applying Color Themes

Framework7 allows you to apply color themes on different elements such as page, list-block, navbar, buttons-row etc by using the theme-[color] class to the parent element.

Example

...
</body>

<div class = "page theme-gray">
   ...
</div>

<div class = "list-block theme-blue">
   ...
</div>

<div class = "navbar theme-green">
   ...
</div>

<div class = "buttons-row theme-red">
   ...
</div>

Layout Themes

You can use default layout theme for your application by using two themes white and dark. The themes can be applied by using the layout-[theme] class to the parent element.

Example

   ...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

Helper Classes

Framework7 provides additional helper classes, which can be used outside or without themes as listed below −

  • color-[color] − It can be used to change text color of block or color of button, link, icon etc.

  • bg-[color] − It sets the predefined background color on the block or element.

  • border-[color] − It sets the predefined border color on the block or element.

Framework7 - Hairlines

Description

Hairline is a class that adds 1px border around the images by using the border class. With the release of 1.x, hairlines revised the working with :after and :before pseudo elements instead of using CSS borders.

Hairlines contains the following rules −

  • :after − This pseudo element is used for bottom and right hairlines.

  • :before − This pseudo element is used for top and left hairlines.

The following code snippet shows the use of :after element.

.navbar:after {
   background-color: red;
}

The following code snippet removes the bottom hairline toolbar −

.navbar:after {
   display:none;
}

.toolbar:before {
   display:none;
}

"no-border" class

The hairline will be removed by using no-border class and it is supported on Navbar, toolbar, card and its elements.

The following code is used to remove hairline from navbar −

<div class = "navbar no-border">
   ...
</div>

Framework7 - Templates Overview

Description

Template7 is a lightweight, mobile-first JavaScript engine, which represents Ajax and dynamic pages as Template7 templates with specified context and does not require any additional scripts. Template7 is associated with Framework7 as a default, lightweight template engine, which works faster for applications.

Performance

The process of compiling string to JS function is the slowest segment of template7. Hence, you do not need to compile the template multiple times, only once is sufficient.

//Here initialize the app
var myApp = new Framework7();

// After initializing compile templates on app
var searchTemplate = $('script#search-template').html();
var compiledSearchTemplate = Template7.compile(searchTemplate);

var listTemplate = $('script#list-template').html();
var compiledListTemplate = Template7.compile(listTemplate);

// Execute the compiled templates with required context using onPageInit() method
myApp.onPageInit('search', function (page) {

   // Execute the compiled templates with required content
   var html = compiledSearchTemplate({/*...some data...*/});

   // Do stuff with html
});

Template7 is a lightweight template engine used as a standalone library without Framework7. The Template7 files can be installed using two ways −

  • You can download from Template7 github repository.

  • Or

  • You can install it using the following command via Bower −

bower install template7

Framework7 - Auto Compilation

Description

In Template7 you can compile your templates automatically by specifying special attributes in a <script> tag.

The following code shows the auto compilation layout −

<script type = "text/template7" id = "myTemplate">
   <p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script> 

You can use the following attributes for initializing the auto compilation −

  • type = "text/template7" − It is used to tell Template7 to auto compile and it is a required script type.

  • id = "myTemplate" − Template is accessible through the id and it is a required template id.

For automatic compilation, you need to enable app initialization by passing the following parameter −

var myApp = new Framework7 ({
   //It is used to compile templates on app init in Framework7
   precompileTemplates: true,
});

Template7.templates / myApp.templates

The automatically compiled templates can be accessed as properties of Template7.templates after initializing the app. It is also known as myApp.templates where myApp is an initialized instance of the app.

You can use the following templates in our index.html file −

<script type = "text/template7" id = "personTemplate">
   <p>Hello, my name is {{name}} and i am {{age}} years old</p>
   <p>I work as {{position}} at {{company}}</p>
</script>
 
<script type = "text/template7" id = "carTemplate">
   <p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p>
   <p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p>
</script> 

You can also access templates in JavaScript after app initialization −

var myApp = new Framework7 ({
   //Tell Framework7 to compile templates on app init
    precompileTemplates: true
});
 
// Render person template to HTML, its template is already compiled and accessible as 
//Template7.templates.personTemplate
var personHTML = Template7.templates.personTemplate ({
   name: 'King Amit',
   age: 27,
   position: 'Developer',
   company: 'AngularJs'
});
 
// Compile car template to HTML, its template is already compiled and accessible as 
//Template7.templates.carTemplate
var carHTML = Template7.templates.carTemplate({
   vendor: 'Honda',
   model: 'city',
   power: 1200hp,
   speed: 300
});

Framework7 - Template7 Pages

Description

Template7 is a mobile-first JavaScript template engine with handlebars.js like syntax. It is ultra lightweight and blazing-fast default template engine in Framework7.

First, we need to pass the following parameter on app initialization that renders all Ajax and dynamic pages as Template7 template −

var myApp = new Framework7 ({
   template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});
S.No Template7 Pages Usage & Description
1 Templates/Pages Data

You can pass the required data/context for specific pages by specifying all pages data in template7Data parameter, sent on initializing an App.

2 Pass Custom Context

Framework7 allows you to pass custom context to any dynamic page or any loaded Ajax.

3 Load Templates Directly

You can render and load templates on fly as dynamic pages.

4 URL Query

If you are using Template7 for rendering Ajax pages, its context always will be extended with special property url_query.

Example

The following example provides the links, which displays the user information such as user details, user likes, etc. when you click on those links.

index.html

<!DOCTYPE html>
<html>

   <head>
      <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>Framework7</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Template7 Pages</div>
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <div class = "list-block">
                        <ul>
                           <li>
                              //plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
                              <a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
                                 <div class = "item-inner">
                                    //provides link as 'About'
                                    <div class = "item-title">About</div>
                                 </div>
                              </a>
                           </li>
                           
                           <li>
                              //a context name for this link we pass context path from template7Data root
                              <a href = "/framework7/src/likes.html" class = "item-link item-content">
                                 <div class = "item-inner">
                                    //provides link as 'Likes'
                                    <div class = "item-title">Likes</div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/template7" id = "about">
         <div class = "navbar">
            <div class = "navbar-inner">
               <div class = "left sliding">
                  <a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
               </div>
            
               <div class = "center sliding">About Me</div>
               <div class = "right">
                  <a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
               </div>
            </div>
         </div>
         
         <div class = "pages">
            <div data-page = "about" class = "page">
               <div class = "page-content">
                  <div class = "content-block">
                     <div class = "content-block-inner">
                        //displays the details of the user by using the 'my-app.js' file
                        <p>Hello, i am <b>{{firstname}} {{lastname}}</b>, 
                           <b>{{age}}</b> years old and working as 
                           <b>{{position}}</b> at <b>{{company}}</b>.</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </script>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script type = "text/javascript" 
         src = "/framework7/src/js/my-app.js">
      </script>
   </body>

</html>

my-app.js

// Initialize your app
var myApp = new Framework7 ({
   animateNavBackIcon: true,
   
   // Enable templates auto precompilation
   precompileTemplates: true,
   
   // Enabled rendering pages using Template7
   template7Pages: true,
   
   // Specify Template7 data for pages
   template7Data: {
      //provides the url for different page with data-page = "likes"
      'url:likes.html': {
         likes: [
            {
               title: 'Nelson Mandela',
               description: 'Champion of Freedom'
            },
            
            {
               title: 'Srinivasa Ramanujan',
               description: 'The Man Who Knew Infinity'
            },
            
            {
               title: 'James Cameron',
               description: 'Famous Filmmaker'
            }
         ]
      },
      about: {
         firstname: 'William ',
         lastname: 'Root',
         age: 27,
         position: 'Developer',
         company: 'TechShell',
      }
   }
});

// Add main View
var mainView = myApp.addView('.view-main', {
   // Enable dynamic Navbar
   dynamicNavbar: true
});

likes.html

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left sliding">
         <a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
      </div>
      
      <div class = "center sliding">Likes</div>
      <div class = "right">
         <a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
      </div>
   </div>
</div>

<div class = "pages">
   <div data-page = "likes" class = "page">
      <div class = "page-content">
         <div class = "content-block-title">My Likes</div>
         <div class = "list-block media-list">
         
            //iterate through likes
            <ul>
               {{#each likes}}
                  <li class = "item-content">
                     <div class = "item-inner">
                        <div class = "item-title-row">
                           //displays the title and description by using the 'my-app.js' file
                           <div class = "item-title">{{title}}</div>
                        </div>
                        <div class = "item-subtitle">{{description}}</div>
                     </div>
                  </li>
               {{/each}}
            </ul>
         </div>
      </div>
   </div>
</div>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as index.html file in your server root folder.

  • Open this HTML file as http://localhost/index.html and the output is displayed as shown below.

  • The example provides the links, which displays the user information such as user details, user likes when you click on those links.

Framework7 - Active State

Description

When you tap the links and buttons, they are highlighted. This is done by active state in Framework7.

  • It behaves like a native app, not like a web app..
  • It has a built-in Fast clicks library and it should be enabled.
  • The active-state class is the same as the CSS :active selector.
  • Active state is enabled by adding watch-active-state class to <html> element.

The following code is used for active state in CSS style −

/* Usual state */
.my-button {
   color: red;
}

/* Active/tapped state */
.my-button.active-state {
   color: blue;
}

The following code shows the fallback compatibility, when Active state or Fast clicks is disabled −

/* Usual state */
.my-button {
   color: red;
}

/* Active/tapped state */
.my-button.active-state {
   color: blue;
}

/* Fallback, when active state is disabled */
html:not(.watch-active-state) .my-button:active {
   color: blue;
}

Framework7 - Tap Hold Event

Description

The Tap hold event is used to trigger (enable) after a sustained and complete the touch event so only, it is called tap hold event. The Tab Hold is a built-in Fast Clicks library.

The following parameters are used to disable or enable and configured by default −

S.No Parameter & Description Type Default
1

tapHold

To enable tap hold events when it is set to true.

boolean false
2

tapHoldDelay

It specifies the duration of holding the tap before triggering taphold event on the target element.

number 750
3

tapHoldPreventClicks

The tap hold event will not be fired after clicking the event.

boolean true

The following code is used for enable tap hold events −

var myApp = new Framework7 ({
   tapHold: true //enable tap hold events
});
 
var $$ = Dom7;
 
$$('.some-link').on('taphold', function () {
   myApp.alert('Tap hold fired!');
});

Framework7 - Touch Ripple

Description

Touch Ripple is an effect that is supported only in Framework7 material theme. By default, it is enabled in material theme and you can disable it by using the materialRipple:false parameter.

Ripple Elements

You can enable the ripple elements to match some CSS selectors such as −

  • ripple
  • a.link
  • a.item-link
  • .button
  • .tab-link
  • .label-radio
  • .label-checkbox etc.

These are specified in the materialRippleElements parameter. You need to enable the touch ripple, add the element's selector to materialRippleElements parameter to make use of ripple effect, or just use the ripple class.

Ripple Wave Color

The color of the ripple can be changed on the element by adding the ripple-[color] class to the element.

For instance −

<a href = "#" class = "button ripple-orange">Ripple Button</a>

or you can define the ripple wave color by using the CSS as shown below −

.button .ripple-wave {
   background-color: #FFFF00;
}

Disable Ripple Elements

You can disable the ripple for some specified elements by adding the no-ripple class to those elements. For instance −

<a href = "#" class = "button no-ripple">Ripple Button</a>
Advertisements