jQuery分层显示动画效果插件:Hierarchical-Display

jopen 6年前

Hierarchical-Display 是 Material Design 的分层显示动画效果插件。

Install

Download: 1.0.1 (ZIP)
Bower: bower install material-design-hierarchical-display
NPM: npm install material-design-hierarchical-display

Demo

Demo site.
All demo site files you can find here.

Usage

Add CSS and JS files to your page:

<!-- Compiled and minified CSS --> <link rel="stylesheet" href="zmd.hierarchical-display.min.css"><!-- You need to include jquery.zmd.hierarchical-display.js after jQuery. Requires jQuery 1.7+. --> <script src="jquery.js"></script><!-- Compiled and minified JavaScript --> <script src="jquery.zmd.hierarchical-display.min.js"></script>

Add elements that you want to display

<!-- 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>

Via data attribute

Add data-animation="hierarchical-display" to parent element that contains children elements which you want to display - for display elements on page loads (on event document.ready).

Via JavaScript

Also you can activate plugin manually from JavaScript:

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

Toggle animation

If you want to toggle your animation you should add data-toggle="hierarchical-display" and a data-target to the control element to automatically assign control of a hierarchical displaying element. The data-target attribute accepts a CSS selector to apply the display to.

<!-- 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>

Documentation

Stylesheet

The MD Hierarchical Display plugin utilizes a few classes to handle the heavy lifting:

.zmd-hierarchical-display hides the content
.zmd-hierarchical-display.in shows the content
.zmd-hierarchical-displaying is added when the animation starts, and removed when it finishes

These classes can be found in component.less.

You don't need to add the class zmd-hierarchical-display to the displaying element - it will be added automaticly. If you'd like it to default close, add class zmd-hierarchical-display, for default open, add the additional class in.

Also it require CSS animation from animation.less. But you can easily change it to your favorite animation library - for example animate.css.
Demo with animate.css on CodePen

Options

All options of the plugin can be set via the corresponding data attributes, for example: data-speed for speed option or data-animation-in for animationIn option.

action: string

Method that should be executed when you call the plugin.
default: show

speed: number

Plugin speed. You can use decimal values, for example: 0.1.
default: 5

animationIn: string

Animation CSS class that should be added to displaying element when element is showing.
default: zoomIn

animationOut: string

Animation CSS class that should be added to displaying element when element is hiding.
default: zoomOut

debug: boolean

Spams your console with information about the events.
default: false

Methods

.hierarchicalDisplay(options):

Initializes the plugin with an optional options object and starts working.

$('.zmd-hierarchical-display').hierarchicalDisplay({    speed: 10 })

.hierarchicalDisplay('show'):

Shows a displaying element.

.hierarchicalDisplay('hide'):

Hides a displaying element.

.hierarchicalDisplay('toggle'):

Toggles a displaying element to shown or hidden.

Events

Material Design Hierarchical Display plugin exposes a few events for hooking into displaying functionality.

show.zmd.hierarchicalDisplay:

This event fires immediately when the show instance method is called.

shown.zmd.hierarchicalDisplay:

This event is fired when a displaying element has been made visible to the user (will wait for CSS animations to complete).

hide.zmd.hierarchicalDisplay:

This event fires immediately when the hide instance method is called.

hidden.zmd.hierarchicalDisplay:

This event is fired when a displaying element has been hidden from the user (will wait for CSS animations to complete).

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

Version number

The version of plugin can be accessed via the VERSION property of the plugin's constructor:

$.fn.hierarchicalDisplay.Constructor.VERSION // => "1.0.1"

Licence

The MIT License (MIT). Please see License File for more information.

Browser Support

  • Chrome 4+
  • Firefox 16+
  • Opera 12.1+
  • Safari 4+
  • IE 10+
  • Android Browser 4+
  • Not supported in Opera Mini

Browser support specified in accordance to caniuse.com portal (you can check CSS3 2D Transforms and animation).

Material Design 分层显示:Hierarchical-Display

项目主页:http://www.open-open.com/lib/view/home/1448887523811