0.0.1 • Published 10 years ago
control-brick v0.0.1
control-brick
Lego plugin to toggle or radio any dom elements. Useful to create tab-based navigation bar, toolbar, etc.
Installation
with component:
$ component install bredele/control-brick
with nodejs:
$ component install control-brick
Usage
First, add the plugin to your view (see lego to know more about views):
var controller = require('control-brick')({
handler : function() {
//do something
}
});
view.add('data-control', controller);
Basic
radio:
<nav class="toolbar" data-control="radio:click .menu, handler">
<button class="menu">Menu 1</button>
<button class="menu">Menu 2</button>
<button></button>
<nav>
Add active
class to the clicked button (with the class menu
).
Only one button can be 'active' at a time.
toggle:
<ul class="list" data-control="toggle:click .link, handler">
<li class="link"></li>
<li></li>
<ul>
Toggle active
class to the clicked link (with the class link
).
Serveral links can be 'active' at the same time.
Control
uses events-brick and inherits its behaviour.
see live example
Advanced
You can change the class applied to your radio/toggle elements (active
is the default class):
<nav class="toolbar" data-control="radio:click .menu, clicked handler">
<button class="menu">Menu 1</button>
<button class="menu">Menu 2</button>
<button></button>
<nav>
Add clicked
class to the clicked button
License
MIT
0.0.1
10 years ago