- 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 - Example iOS
Description
Framework7 allows you to use different types of notifications in your iOS layout.
Example
The following example demonstrates the use of iOS notifications 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>Notifications</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="custom.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">Notifications</div> </div> </div> <div class="page-content"> <div class="content-block"> <p><a href="#" class="button notification-default">Default</a></p> <p><a href="#" class="button notification-full">Full-layout notification</a></p> <p><a href="#" class="button notification-custom">Custom image</a></p> <p><a href="#" class="button notification-callback">Callback on close</a></p> </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'); var $$ = Dom7; $$('.notification-default').on('click', function () { myApp.addNotification({ title: 'Default notification', message: 'This is default notification with title and message' }); }); $$('.notification-full').on('click', function () { myApp.addNotification({ title: 'Full-layout', subtitle: 'Notification subtitle', message: 'You have a new mail', media: '<i class="icon icon-form-email"></i>' }); }); $$('.notification-custom').on('click', function () { myApp.addNotification({ title: 'Event', subtitle: 'You missed an event at your place..', message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut posuere erat. Aliquam sed molestie risus, quis tincidunt dui.', media: '<img width="44" height="44" style="border-radius:100%" src="/framework7/images/pic2.jpg">' }); }); $$('.notification-callback').on('click', function () { myApp.addNotification({ title: 'Album', subtitle: 'A Wonderful Myth', message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed molestie risus, quis tincidunt dui.', media: '<img width="44" height="44" style="border-radius:100%" src="/framework7/images/pic.jpg">', onClose: function () { myApp.alert('Callback activated. Notification closed'); } }); }); </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 notifications_iOS.html file in your server root folder.
Open this HTML file as http://localhost/notifications_iOS.html and the output is displayed as shown below.
This example provides different types of notifications such as default notification, full layout notification, notification with custom message etc in the iOS layout.
framework7_notifications.htm
Advertisements
To Continue Learning Please Login
Login with Google