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