https://github.com/zavoloklom/material-design-hierarchical-display
The jQuery plugin for Material Design hierarchical display animation effect
https://github.com/zavoloklom/material-design-hierarchical-display
Last synced: 4 months ago
JSON representation
The jQuery plugin for Material Design hierarchical display animation effect
- Host: GitHub
- URL: https://github.com/zavoloklom/material-design-hierarchical-display
- Owner: zavoloklom
- License: mit
- Created: 2014-12-21T03:27:07.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-11-16T09:54:50.000Z (over 9 years ago)
- Last Synced: 2025-02-01T05:41:19.959Z (4 months ago)
- Language: JavaScript
- Homepage: http://zavoloklom.github.io/material-design-hierarchical-display/
- Size: 2.44 MB
- Stars: 118
- Watchers: 10
- Forks: 17
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [Material Design Hierarchical Display 1.0.1](http://zavoloklom.github.io/material-design-hierarchical-display)
[](https://github.com/zavoloklom/material-design-hierarchical-display/tags)
[](LICENSE)
[](https://github.com/zavoloklom/material-design-hierarchical-display/tags)
[](https://www.npmjs.com/package/material-design-hierarchical-display)
[](https://david-dm.org/zavoloklom/material-design-hierarchical-display)
[](https://david-dm.org/zavoloklom/material-design-hierarchical-display#info=devDependencies)
[](https://www.npmjs.com/package/material-design-hierarchical-display)
[](http://zavoloklom.github.io/material-design-hierarchical-display/)
#### The jQuery plugin for Material Design hierarchical display animation effect
[Hierarchical Timing](http://www.google.com/design/spec/animation/meaningful-transitions.html?safe=active#meaningful-transitions-hierarchical-timing) is a meaningful transition introduced in Google Material Design that focuses your users attention in an app or how an app element got from point A to point B.
## Install
**Download:** [1.0.1 (ZIP)](https://github.com/zavoloklom/material-design-hierarchical-display/releases/download/1.0.1/material-design-hierarchical-display.zip)
**Bower:** `bower install material-design-hierarchical-display`
**NPM:** `npm install material-design-hierarchical-display`
## Demo
[Demo site](http://zavoloklom.github.io/material-design-hierarchical-display/).
All demo site files you can find [here](https://github.com/zavoloklom/material-design-hierarchical-display/tree/gh-pages).
## Usage
#### Add CSS and JS files to your page:
```html
```
#### Add elements that you want to display
```html
```
#### 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:
```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.
```html
Toggle animation
```
## 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](https://github.com/daneden/animate.css).
[Demo with animate.css on CodePen](http://codepen.io/zavoloklom/details/eNaEBM/)
### 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.
```JavaScript
$('.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).
```JavaScript
$('#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:
```JavaScript
$.fn.hierarchicalDisplay.Constructor.VERSION // => "1.0.1"
```
## Licence
The MIT License (MIT). Please see [License File](LICENSE) 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](http://caniuse.com/) portal (you can check [CSS3 2D Transforms](http://caniuse.com/#feat=transforms2d) and [animation](http://caniuse.com/#feat=css-animation)).
## Changelog
v1.0.1:
- make some internal optimizations
## Versioning
Material Design Hierarchical Display will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:
`..`
## Author
- Email: [email protected]
- Twitter: https://twitter.com/zavoloklom
- GitHub: https://github.com/zavoloklom
- CodePen: http://codepen.io/zavoloklom
- Dribble: https://dribbble.com/zavoloklom
## Donate
- You can support me via [PayPal](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=s%2ekupletsky%40gmail%2ecom&lc=US&item_name=Material%20Design%20Hierarchical%20Display¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted), [WebMoney](https://funding.webmoney.ru/material-design-web-projects) or [Gratipay](http://gratipay.com/zavoloklom/)