Giva Labs - iButton Example Page

The examples below show off various features of the iButton widget and provide you with the source code to duplicate the functionality on your own web page. We also recommend you sample the keyboard compatibility by tabbing through the elements and use the spacebar to toggle checbox elements and the arrow keys to select the radio elements.

Simple Checkboxes

This shows off the most simple form of the iButton. The buttons below are based purely on the attributes of the checkbox elements.

Default Off

Default On

Sample Code

<script type="text/javascript">
$(document).ready(function (){
  $(":checkbox").iButton();
});
</script>

Using Metadata

You can also utilize the jQuery Metadata Plug-in to change the options on each element individually:

Yes/no label

True/false label (with easeOutBounce easing animation)

Sample Code

<script type="text/javascript">
$(document).ready(function (){
  $(":checkbox").iButton();
});
</script>

<div class="row">
  <label class="label" for="ex03">Yes/no label</label>
  <input type="checkbox" id="ex03" class="{labelOn: 'Yes', labelOff: 'No'}" />
</div>

<div class="row">
  <label class="label" for="ex04">True/false label</label>
  <input type="checkbox" id="ex04" class="{labelOn: 'True', labelOff: 'False', easing: 'easeOutBounce', duration: 500}" />
  (with easeOutBounce easing animation)
</div>

API Examples

The iButton plug-in API methods are also easy to use. The API allows you to do things such as changing the value of the element, disabling the element and remove the iButton widget to restore the checkbox to it's original HTML.

Enable/Disable

Destroy/Create

Sample Code

<script type="text/javascript">
// toggle button's enable/disabled status
$("#ex05").iButton("disable");

// destroy an iButton widget
$("#ex06").iButton("destroy");
</script>

Radio Button Example

Below is an example of attaching the iButton behavior to a group of radio buttons. Only one of the options can be checked at a time. While this UI construct works best for checkbox elements (since the state is either true or false) radio buttons can be handle if you want the user to be able to select only one option from a list.

Option 1

Option 2

Option 3

Sample Code

<script type="text/javascript">
$(document).ready(function (){
  $(":radio").iButton();
});
</script>

Radio Button Example (w/ Radio Uncheck Allowed)

Option 1

Option 2

Option 3

Sample Code

<script type="text/javascript">
$(document).ready(function (){
  $("#radio_allowRadioUncheck :radio").iButton({allowRadioUncheck: true});
});
</script>

Size Button via CSS

You can also use CSS to control the look and feel of the iButton. Below we've used CSS to make a wide button with a narrow handle.

Wide button

Sample Code

<style type="text/css">
#css .ibutton-container {
  width: 175px;
}

#css .ibutton-container .ibutton-handle {
  width: 5px;
}
</style>

Custom Labels of Various Sizes

You can also use long and short labels paired together.

Long labels

Sample Code

<script type="text/javascript">
$("#ex10").iButton({
    labelOn: "A really, really long label"
  , labelOff: "Tiny"
});
</script>

Using Events

Events allow you to expand the functionality of the plug-in by performing additional tasks when certain events are fired. Below the change event is used to update text based on the value of the checkbox.

Send e-mail

Sample Code

<script type="text/javascript">
$("#ex11")
  // attach the iButton behavior
  .iButton({
     labelOn: "Yes"
   , labelOff: "No"
   , change: function ($input){
      // update the text based on the status of the checkbox
      $("#send-email").html($input.is(":checked") ? "Yes, send me more e-mail!" : "Ugh... no more e-mail already!");
    }
  })
  // trigger the change event (to update the text)
  .trigger("change");
</script>