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 −
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 −
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.
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 −
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 −
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 −
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 −
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>
<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 −
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 −
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.
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 −
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 −
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 −
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 −
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 −
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 −
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/enablepull 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.
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.
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.
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 −
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 −
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 −
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 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
});
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 −
