免費AI編程助手
Materialize 對話框
2018-01-05 14:59 更新
Materialise提供了各種特殊方法來向用戶顯示不顯眼的警報。 Materialise為他們提供了一個術(shù)語toast。以下是將對話框顯示為Toast的語法。
Materialize.toast(message, displayLength, className, completeCallback);
-
message-要顯示給用戶的消息。
-
displayLength -消息的持續(xù)時間，之后它將消失。
-
className -樣式類應用于toast。例如，'rounded'
-
completeCallback -回調(diào)方法一旦被刪除就被調(diào)用。
對于工具提示，Materialize提供以下CSS類。
| 序號 | 類名稱及說明 |
|---|---|
| 1 | tooltipped 標識組件以具有工具提示。 |
| 2 | data-position 工具提示的位置;底部，頂部，左側(cè)或右側(cè)。 |
| 3 | data-delay 設置工具提示的持續(xù)時間，之后它將消失。 |
| 4 | data-tooltip 設置工具提示內(nèi)容。 |
例子
對于工具提示，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>
結(jié)果
驗證結(jié)果，如下圖所示。
以上內(nèi)容是否對您有幫助：
更多建議：