Sandbox: JavaScript

Bootstrap provides helpers for setting button states that are not entirely provided by this libary. However, it is possible to reproduce most of the functionality using existing Behaviors from this library and the (MooTools) More Behaviors library. Demonstrated here is how to reproduce most of the effects supported in Bootstrap, but not all.

Example uses

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

In Bootstrap, you can change a button's state to "loading..." by adding data-loading-text to it. While this would be trivial to reproduce using Behavior and MooTools, the author hasn't found need for it and so hasn't done so (pull requests accepted!).

Single toggle

Add data-trigger="toggleClass" data-toggleclass-class="active" to activate toggling on a single button.

Less Component Required

Be sure to require More-Behaviors/Delegator.ToggleClass when you build your library.

<button type="button" class="btn btn-primary" data-trigger="toggleClass" data-toggleclass-class="active">Single toggle</button>

Checkbox

This one's a little wierd. When used with a label and checkbox, you have to put the trigger on the input. This is because browsers see the click on the label and fire that event there, but then they also fire the click event on the input (even if your mouse didn't actually click it). This triggers the delegator twice toggling your class twice, so nothing happens. Instead, you must specify both data-toggleclass-class and data-toggleclass-target (or, better yet, use the data-toggleclass-options method to declare your configuration; see example).

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input id="foo" type="checkbox" data-trigger="toggleClass" data-toggleclass-options="
      'class': 'active',
      'target': '!label'
    "> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" data-trigger="toggleClass" data-toggleclass-options="
      'class': 'active',
      'target': '!label'
    "> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" data-trigger="toggleClass" data-toggleclass-options="
      'class': 'active',
      'target': '!label'
    "> Option 3
  </label>
</div>

Radio

Same thing as checkboxen, but with a hitch. Because we need to remove the class for the radio that is unchecked whenever we click another one, we must remove the class from all the labels before we select the one we clicked. Simple enough, just also add the removeClass trigger to the container. See example.

<div class="btn-group" data-toggle="buttons"  data-trigger="removeClass" data-removeclass-options="
  'class': 'active',
  'targets': 'label'
">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1" data-trigger="toggleClass" data-toggleclass-options="
      'class': 'active',
      'target': '!label'
    "> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" data-trigger="toggleClass" data-toggleclass-options="
      'class': 'active',
      'target': '!label'
    "> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" data-trigger="toggleClass" data-toggleclass-options="
      'class': 'active',
      'target': '!label'
    "> Option 3
  </label>
</div>