示例材料(Example Material)
描述 (Description)
Framework7通知也可用于材质布局。
例子 (Example)
以下示例演示了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.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 navbar-fixed">
<div data-page="home" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Notifications</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p><a href="#" class="button button-raised notification-single">Single-line notification</a></p>
<p><a href="#" class="button button-raised notification-multi">Multi-line notification</a></p>
<p><a href="#" class="button button-raised notification-custom">With custom button</a></p>
<p><a href="#" class="button button-raised notification-callback">With 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({
material: true
});
var mainView = myApp.addView('.view-main');
var $$ = Dom7;
$$('.notification-single').on('click', function () {
myApp.addNotification({
message: 'Battery remaining only 20%'
});
});
$$('.notification-multi').on('click', function () {
myApp.addNotification({
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
});
});
$$('.notification-custom').on('click', function () {
myApp.addNotification({
message: 'Nice teal color button',
button: {
text: 'Click me',
color: 'teal'
}
});
});
$$('.notification-callback').on('click', function () {
myApp.addNotification({
message: 'Close this notification to see an alert',
button: {
text: 'Close Me',
color: 'red'
},
onClose: function () {
myApp.alert('Callback made.. Notification closed');
}
});
});
</script>
</body>
</html>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的notifications_material.html文件。
以http://localhost/notifications_material.html打开此HTML文件，输出显示如下。
此示例在材料布局中提供不同类型的通知，例如单行通知，多行通知，带有自定义按钮的通知等。
