srcmini如果需要, 对话框用于显示其他信息。它们最初在页面上不可见。它们仅在用户想要查看内容时显示。
Materialize CSS提供了各种特殊方法来向用户显示警报。
Materialize.toast(message, displayLength, className, completeCallback);参数说明
消息：它指定要显示给用户的消息。
displayLength：指定消息消失的持续时间。
className：它指定要应用于烤面包的样式类。例如, “四舍五入”。
completeCallback：它指定了在关闭烤面包后要调用的回调方法。
Materialize CSS为对话框提供了不同的CSS类：
| Index | 班级名称 | Description |
|---|---|---|
| 1) | tooltipped | 它用于标识具有工具提示的组件。 |
| 2) | data-position | 它指定工具提示的位置；底部, 顶部, 左侧或右侧。 |
| 3) | data-delay | 它用于设置工具提示的持续时间, 此后它将消失 |
| 4) | data-tooltip | 用于设置工具提示内容。 |
例子
<html>
<head>
<title>The Materialize Dialogs Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<script>
function showToast(message, duration) {
Materialize.toast(message, duration);
}
function showToast1(message, duration) {
Materialize.toast('<i>'+ message + '</i>', duration);
}
function showToast2(message, duration) {
Materialize.toast(message, duration, 'rounded');
}
function showToast3(message, duration) {
Materialize.toast('Hello World!', duration, '', function toastCompleted() {
alert('Toast dismissed!');
});
}
</script>
</head>
<body class = "container">
<h4>Toasts</h4>
<a class = "btn" onclick = "showToast('Hello World!', 3000)">Normal Alert!</a>
<a class = "btn" onclick = "showToast1('Hello World!', 3000)">Italic Alert!</a>
<a class = "btn" onclick = "showToast2('Hello World!', 3000)">Rounded Alert!</a>
<br/><br/>
<a class = "btn" onclick = "showToast3('Hello World!', 3000)">Callback Alert!</a>
<h4>Tooltips</h4>
<a class = "btn tooltipped" data-position = "bottom" data-delay = "50"
data-tooltip = "I am in bottom!">Bottom</a>
<a class = "btn tooltipped" data-position = "left" data-delay = "50"
data-tooltip = "I am in left!">Left</a>
<a class = "btn tooltipped" data-position = "right" data-delay = "50"
data-tooltip = "I am in right!">Right</a>
<a class = "btn tooltipped" data-position = "top" data-delay = "50"
data-tooltip = "I am in top!">Top</a>
</body>
</html>立即测试
输出
评论前必须登录！
注册