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.

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:

(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.

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.

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

Radio Button Example (w/ Radio Uncheck Allowed)

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.

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.

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.

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.

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>