Framework7 - 示例 iOS
描述
Framework7 允许您在 iOS 布局中使用不同类型的通知。
示例
以下示例演示了如何在 Framework7 中使用 iOS 通知 −
<!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>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 notifications_iOS.html 文件。
以 http://localhost/notifications_iOS.html 的形式打开此 HTML 文件,输出如下所示。
此示例在 iOS 布局中提供了不同类型的通知,例如默认通知、完整布局通知、带有自定义消息的通知等。