Material 盒子

Material 盒子是来源于Lightbox插件的material design。当用户单击图片它会变大。Material 盒子平滑的使图片居中并且变大。再次单击还原。或者通过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);
  });

  // 或用jQuery

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

选项

名字	类型	默认	描述
inDuration	Number	275	过渡前持续毫秒数
outDuration	Number	200	过渡后持续毫秒数
onOpenStart	Function	null	打开materialbox之前调用回调函数。
onOpenEnd	Function	null	打开materialbox后调用的回调函数。
onCloseStart	Function	null	在materialbox关闭之前调用的回调函数。
onCloseEnd	Function	null	materialbox关闭后调用的回调函数。

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下:

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

    /* jQuery方法调用
      您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

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

.open();

打开 materialbox

  instance.open();
        

.close();

关闭 materialbox

  instance.close();
        

.destroy();

销毁插件实例并回收

  instance.destroy();
        

属性

名称	类型	描述
el	Element	插件初始化时使用的DOM元素。
options	Object	初始化实例时使用的选项。
overlayActive	Boolean	是否显示materialbox的覆盖层
doneAnimating	Boolean	轮播动画是否结束
caption	String	指定标题
originalWidth	Number	图片的原始宽度
originalHeight	Number	图片的原始高度

标题

给你的照片添加一个简短的说明是非常容易的。只需要把标题添加到 data-caption属性上。

  <img class="materialboxed" data-caption="公园里一群树的合影" width="250" src="/images/nature/lorempixel4.jpg">
          

轮播

这是一个简单优雅的图片轮播。你可以让轮播的图片带标题，设置标题的对齐方式。你也可以设置显示轮播底部的指示。

  <div class="slider">
    <ul class="slides">
      <li>
        <img src="/images/nature/lorempixel1.jpg"> <!-- 随机图片 -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
        </div>
      </li>
      <li>
        <img src="/images/nature/lorempixel2.jpg"> <!-- 随机图片 -->
        <div class="caption left-align">
          <h3>Left Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
        </div>
      </li>
      <li>
        <img src="/images/nature/lorempixel3.jpg"> <!-- 随机图片 -->
        <div class="caption right-align">
          <h3>Right Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
        </div>
      </li>
      <li>
        <img src="/images/nature/lorempixel4.jpg"> <!-- 随机图片 -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
        </div>
      </li>
    </ul>
  </div>
      

初始化

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

  //使用jQuery

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

选项

名称	类型	默认	描述
indicators	Boolean	true	设置轮播指示器的显示隐藏
height	Number	400	设置轮播的高度
duration	Number	500	设置轮播动画的过渡时间间隔
interval	Number	6000	设置轮播切换之间的持续时间

方法

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

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下:

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

    /* jQuery方法调用
      您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

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

.pause();

暂停轮播的自动切换

  instance.pause();
        

.start();

启动轮播的自动切换

  instance.start();
        

.next();

切换到下一个轮播项

  instance.next();
        

.prev();

切换到上一个轮播项

  instance.prev();
        

.destroy();

销毁插件实例并回收

  instance.destroy();
        

属性

名称	类型	描述
el	Element	插件初始化时使用的DOM元素。
options	Object	初始化实例时使用的选项。
activeIndex	Number	当前轮播项的索引

全屏轮播

你也可以通过添加类 fullscreen到轮播的div上使之全屏轮播，下面是一个快速的示例。

打开示例