This breathes life into your DOM and unlocks a set of data attributes to quickly build interfaces. Combined with some smart CSS, you can use these data attributes to create tabs, toggles, popups, caroussels, fancy radio buttons and almost anything you could want. I generally only use this for prototyping things, but you could use it for small projects.
How to use
You activate a certain scope in your DOM:
import Energize from './energize.js';
new Energize('#my-app');
And then you can use data attributes to add and remove a class from different elements in different ways:
<section id="example">
<a data-open="#left" class="active">Left</a>
<a data-open="#center">Center</a>
<a data-open="#right">Right</a>
<div class="tab active" id="left" data-group="tabs" data-follower="a[data-open='#left']">
<p>I'm behind the leftmost link!</p>
<a data-close="#left">Close me</a>
</div>
<div class="tab" id="center" data-group="tabs" data-follower="a[data-open='#center']">
<p id="colour">I'm the panel behind the center link</p>
<a data-toggle="#colour">Toggle me!</a>
</div>
<div class="tab" id="right" data-group="tabs" data-follower="a[data-open='#right']" data-timer="2000">
<p>I'm the last panel, behind the rightmost link</p>
<p>I disappear automatically after two seconds</p>
</div>
</section>
The default class that gets put on your elements is active
, the default data
attributes are:
data-open
— A selector to put theactive
class on when clickeddata-close
— A selector to remove theactive
class from when clickeddata-toggle
— A selector to toggle theactive
class on when clickeddata-group
— If I get theactive
class, remove it from others in my groupdata-timer
— If I get theactive
class, remove it again after this many millisecondsdata-follower
— A selector for another element that follows my behaviour
If you wish, you can override the class name and the names of all the
attributes as options to the Energize
constructor.
- Source: