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>

结果

验证结果,如下图所示。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号