阅读(4.6k) 书签赞(0) 我要纠错

Materialize 对话框

2018-01-05 14:59 更新

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>

结果

验证结果，如下图所示。

以上内容是否对您有帮助：

← Materialize 可折叠

Materialize 下拉框 →

写笔记

我要补充