Material Design风格分层显示动画jQuery插件

当前位置:主页 > jQuery库 > 布局和界面 > Material Design风格分层显示动画jQuery插件
Material Design风格分层显示动画jQuery插件
分享:

    插件介绍

    material-design-hierarchical-display是一款Material Design风格分层显示动画jQuery插件。该插件关注的是某个元素从A点移动到B点的过渡动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2015-12-04
    阅读:
简要教程

material-design-hierarchical-display是一款Material Design风格分层显示动画jQuery插件。该插件关注的是某个元素从A点移动到B点的过渡动画效果。

安装

可以使用NPM或Bower来安装该插件。

bower install material-design-hierarchical-display
npm install material-design-hierarchical-display                
              

使用方法

使用该插件需要引入jQuery1.7+、zmd.hierarchical-display.min.js和zmd.hierarchical-display.min.css文件。

<link rel="stylesheet" href="zmd.hierarchical-display.min.css">
<script src="jquery.js"></script>
<script src="jquery.zmd.hierarchical-display.min.js"></script>                
              
HTML结构

该Material Design风格分层动画插件的HTML结构如下:

<!-- It is parent element -->
<div data-animation="hierarchical-display">
  <!-- All children (regardless of the tag name) in parent element would be animated, after plugin starts -->
  <div></div>
  <div></div>
  <div></div>
</div>                
              
初始化插件

通过data属性来初始化

可以在父容器元素上添加一个data-animation="hierarchical-display"属性来初始化该插件。

通过JavaScript来初始化

也可以通过JavaScript来初始化插件。

$('.zmd-hierarchical-display').hierarchicalDisplay();
              

切换动画显示

如果你需要切换动画的显示,可以在链接元素上添加data-toggle="hierarchical-display"data-target="#parent"data-target接收的是一个CSS选择器。

<!-- It is parent element -->
<div id="parent" data-animation="hierarchical-display">
  <!-- All children (regardless of the tag name) in parent element would be animated, after plugin starts -->
</div>
<!-- This element will toggle animation -->
<a href="#" data-toggle="hierarchical-display" data-target="#parent">Toggle animation</a>                
              

配置参数

以下的所有属性都可以通过data-*属性来设置。例如:speed属性可以使用data-speed属性来设置。

  • action:插件被调用是执行的方法,默认值为show
  • speed:速度。可以使用小数,默认值为5。
  • animationIn:当前元素显示时的CSS动画class类,默认值为zoomIn
  • animationOut::当前元素隐藏时的CSS动画class类,默认值为zoomOut
  • debug:是否在控制台上显示事件信息。

方法

  • hierarchicalDisplay(options):初始化插件并传入参数对象。
    $('.zmd-hierarchical-display').hierarchicalDisplay({
      speed: 10
    })  
    
  • hierarchicalDisplay('show'):显示当前动画元素。
  • hierarchicalDisplay('hide'):隐藏当前动画元素。
  • hierarchicalDisplay('toggle'):切换当前动画元素的可见状态。
  • 事件

    该Material Design风格分层显示动画插件有以下一些可用的事件。

  • show.zmd.hierarchicalDisplay:当show方法被使用的时候该方法被调用。
  • shown.zmd.hierarchicalDisplay:该方法在动画元素已经显示后被调用。
  • hide.zmd.hierarchicalDisplay:当hide方法被使用的时候该方法被调用。
  • hidden.zmd.hierarchicalDisplay:该方法在动画元素已经隐藏后被调用。
  • 事件使用示例:

    $('#myDisplayingElement').on('shown.zmd.hierarchicalDisplay', function () {
      // do something…
    })                  
                    

    该插件的github地址为:https://github.com/zavoloklom/material-design-hierarchical-display