媒体 - Materialize 中文

媒体组件包括与图像、视频、音频等大型媒体对象相关的内容。

Material Box 是 Lightbox 插件的 Material Design 实现。当用户点击可放大的图像时，Material Box 将图像居中并以平滑、不刺眼的方式放大。要取消图像，用户可以再次点击图像、滚动或按 ESC 键。

使用 materialboxed 类添加到图像标签即可创建具有上述效果的图像。


    <img class="materialboxed" width="650" src="images/sample-1.jpg">

初始化


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.materialboxed');
    var instances = M.Materialbox.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.materialboxed').materialbox();
  });

选项

名称	类型	默认值	说明
inDuration	数字	275	过渡持续时间（毫秒）。
outDuration	数字	200	过渡持续时间（毫秒）。
onOpenStart	函数	null	在打开 materialbox 之前调用的回调函数。
onOpenEnd	函数	null	在打开 materialbox 之后调用的回调函数。
onCloseStart	函数	null	在关闭 materialbox 之前调用的回调函数。
onCloseEnd	函数	null	在关闭 materialbox 之后调用的回调函数。

方法

由于 jQuery 不再是依赖项，所有方法都在插件实例上调用。您可以像这样获取插件实例


    var instance = M.Materialbox.getInstance(elem);

    /* jQuery Method Calls
      You can still use the old jQuery plugin method calls.
      But you won't be able to access instance properties.

      $('.materialboxed').materialbox('methodName');
      $('.materialboxed').materialbox('methodName', paramName);
    */

.open();

打开材料框


  instance.open();

.close();

关闭材料框


  instance.close();

.destroy();

销毁插件实例并拆除


  instance.destroy();

属性

名称	类型	说明
el	元素	插件初始化时使用的 DOM 元素。
options	对象	实例初始化时使用的选项。
overlayActive	布尔值	如果材料框覆盖层正在显示。
doneAnimating	布尔值	如果轮播不再被动画化。
caption	字符串	如果指定了标题。
originalWidth	数字	图像的原始宽度。
originalHeight	数字	图像的原始高度。

标题

为您的照片添加简短标题非常容易。只需将标题添加为 data-caption 属性。


  <img class="materialboxed" data-caption="A picture of a way with a group of trees in a park" width="250" src="https://lorempixel.com/800/400/nature/4">

我们的滑块是一个简单而优雅的图片轮播。您还可以根据对齐方式自动转换标题。您还可以显示在滑块底部的指示符。

这是我们的标语！

这是我们的口号。
左对齐标题

这是我们的口号。
右对齐标题

这是我们的口号。
这是我们的标语！

这是我们的口号。


  <div class="slider">
    <ul class="slides">
      <li>
        <img src="https://lorempixel.com/580/250/nature/1"> <!-- random image -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="https://lorempixel.com/580/250/nature/2"> <!-- random image -->
        <div class="caption left-align">
          <h3>Left Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="https://lorempixel.com/580/250/nature/3"> <!-- random image -->
        <div class="caption right-align">
          <h3>Right Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="https://lorempixel.com/580/250/nature/4"> <!-- random image -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
    </ul>
  </div>

初始化


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.slider');
    var instances = M.Slider.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.slider').slider();
  });

选项

名称	类型	默认值	说明
indicators	布尔值	true	设置为 false 以隐藏幻灯片指示符。
height	数字	400	设置滑块的高度。
duration	数字	500	设置过渡动画的持续时间（毫秒）。
interval	数字	6000	设置过渡之间的持续时间（毫秒）。

方法

我们有暂停、开始、移动到下一个和移动到上一个幻灯片的方法。

由于 jQuery 不再是依赖项，所有方法都在插件实例上调用。您可以像这样获取插件实例


    var instance = M.Slider.getInstance(elem);

    /* jQuery Method Calls
      You can still use the old jQuery plugin method calls.
      But you won't be able to access instance properties.

      $('.slider').slider('methodName');
      $('.slider').slider('methodName', paramName);
    */