Materialize 对话框
Materialise提供了各种特殊方法来向用户显示不显眼的警报。 Materialise为他们提供了一个术语toast。以下是将对话框显示为Toast的语法。
Materialize.toast(message, displayLength, className, completeCallback);
-
message-要显示给用户的消息。
-
displayLength -消息的持续时间，之后它将消失。
-
className -样式类应用于toast。例如，'rounded'
-
completeCallback -回调方法一旦被删除就被调用。
对于工具提示，Materialize提供以下CSS类。
| 序号 | 类名称及说明 |
|---|---|
| 1 | tooltipped 标识组件以具有工具提示。 |
| 2 | data-position 工具提示的位置;底部，顶部，左侧或右侧。 |
| 3 | data-delay 设置工具提示的持续时间，之后它将消失。 |
| 4 | data-tooltip 设置工具提示内容。 |
例子
对于工具提示，Materialize提供以下CSS类。
materialize_dialogs.html
<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>
结果
验证结果，如下图所示。
