对话框



对话款一开始并不在页面上显示出来,但是当你做某些操作后,会在页面上慢慢的显示出来以展示更多的信息。

Toasts

Materialize提供了非常简单的方法,来弹出一些信息,同时也不会让用户感到突兀。这些Toasts显示的位置和大小会随着你的设备的不同而改变。

Toast!

在JavaScript中调用Materialize.toast()方法来使用。


  // Materialize.toast(message, displayLength, className, completeCallback);
  Materialize.toast('I am a toast!', 4000) // 4000是Toast持续时间
        

一种方法是在onclick上添加这个方法。


  <a class="btn" onclick="Materialize.toast('I am a toast', 4000)">Toast!</a>
        

自定义HTML

传入一个自定义的HTML标签作为第一个参数。下面的例子中,我们传入了一段文字和按钮。如果你是在外部引用Javascript,可以不用单引号。

Toast with Action

  <a class="waves-effect waves-light btn" onclick="Materialize.toast('<span>Item Deleted</span><a class=&quot;btn-flat yellow-text&quot; href=&quot;#!&quot;>Undo<a>', 5000)">Toast!</a>
        

回调

你可以在Toast结束时提供一个回调函数来执行。

Toast!

          <a class="btn" onclick="Materialize.toast('I am a toast', 4000,'',function(){alert('Your toast was dismissed')})">Toast!</a>
        

多种样式

你可以非常简便的自定义toasts的样式,把样式名字作为一个函数参数传入到选项中即可。已经提供了一个圆角样式,当然你也可以自定义样式并应用上。

Round Toast!

          Materialize.toast('I am a toast!', 3000, 'rounded') // 'rounded' is the class I'm applying to the toast
        

工具提示

工具提示是精简,富交互的文本提示。特别是当你用一个小图标时,提供一个工具提示能很方便的阐述这个小图标所具有的功能。

添加Tooltipeed class到你的元素上,同时添加top, bottom, left, right在data-tooltip属性上来控制元素的位置。


  <!-- data-position can be : bottom, top, left, or right -->
  <!-- data-delay controls delay before tooltip shows (in milliseconds)-->
  <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>
        

初始化

工具提示会自动的初始化,但是当你动态添加的时候,你需要重新激活它。


   $(document).ready(function(){
     $('.tooltipped').tooltip({delay: 50});
   });