手册 - Materialize

对话框的内容不是在页面最初可见，而是在用户操作时显示额外的信息。

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

Toast!

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


  // Materialize.toast(message, displayLength, className, completeCallback);
  Materialize.toast('I am a toast!', 4000) // 4000 is the duration of the toast

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


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

自定义HTML

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

Toast with Action


  var $toastContent = $('<span>I am toast content</span>');
  Materialize.toast($toastContent, 5000);

回调

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

Toast!


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

Toasts样式

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

Round Toast!


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

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

增加Tooltipped类到你的元素中并且增加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">放在我上面</a>

初始化

提示组件式是自动初始化的，但是如果你要动态添加提示组件，你初始化他们。


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

jQuery插件选项

选项名称	描述
delay	提示组件延迟显示的时间(默认: 350)
tooltip	提示组件的文本，可以使用自定义的HTML如果设置了html选项。
位置	设置提示组件显示的位置，可选:'top', 'right', 'bottom', 'left'. (默认: 'bottom')
html	允许使用自定义html。 (默认: false)

去除

通过按钮去除提示组件，通过增加'remove'到提示组件方法中。


  // This will remove the tooltip functionality for the buttons on this page
  $('.tooltipped').tooltip('remove');

Toasts
提示组件