- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Start App With Login Screen
Description
You can create the login screen on applicaton's first screen by using the modal-in class.
Example
The following example demonstrates the use of start app with login screen 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>Start App With Login Screen</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">Start App With Login Screen</div> </div> </div> <div class = "pages"> <div data-page = "index" class = "page navbar-fixed"> <div class = "page-content"> <div class = "content-block"> <p><a href = "#" class = "open-login-screen">Click here to open Login Screen</a></p> </div> </div> </div> </div> </div> </div> <div class = "login-screen modal-in"> <div class = "view"> <div class = "page"> <div class = "page-content login-screen-content"> <div class = "login-screen-title">Login Here</div> <form> <div class = "list-block"> <ul> <li class = "item-content"> <div class = "item-inner"> <div class = "item-title label">Username</div> <div class = "item-input"> <input type = "text" name = "username" placeholder = "Enter the username"> </div> </div> </li> <li class = "item-content"> <div class = "item-inner"> <div class = "item-title label">Password</div> <div class = "item-input"> <input type = "password" name = "password" placeholder = "Enter the password"> </div> </div> </li> </ul> </div> <div class = "list-block"> <ul> <li><a href = "#" class = "item-link list-button">Log In</a></li> </ul> <div class = "list-block-label"> <p><a href = "#" class = "close-login-screen">Click here to close Login Screen</a></p> </div> </div> </form> </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 you can 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 }); $$('.login-screen .list-button').on('click', function () { var uname = $$('.login-screen input[name = "username"]').val(); var pwd = $$('.login-screen input[name = "password"]').val(); myApp.alert('Username: ' + uname + ', Password: ' + pwd, function () { myApp.closeModal('.login-screen'); }); }); </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 login_screen_start_app.html file in your server root folder.
Open this HTML file as http://localhost/login_screen_start_app.html and the output is displayed as shown below.
When you enter username, password and click on the “Log in” link, the login wizard is displayed with the entered username and password.
You can close the login screen by clicking on the Close login link.
framework7_overlays.htm
Advertisements