Toggle

Overview

Toggles are user interface elements which can be turned on and off. They can either be "checkboxes" or "switches".

Toggle is defined in the file /usr/share/ubuntu-html5-theme/0.1/ambiance/js/toggle.js

Markup declaration

Checkboxes are <input> HTML elements having the attribute type="checkbox". They must be followed by an empty span element (This is needed by the CSS to set the checkbox image):

<label>
  <input type="checkbox" checked="checked" />
  <span></span>
</label>

Additionaly, checkboxes can have the following attributes:

<ul>
    <li><code>checked</code>: displays the checkbox as "checked"</li>
    <li><code>disabled</code>: disables the checkbox so that its state cannot be changed</li>
</ul>

The following code snippets declare checkboxes with the different states:

<div><label>
  <input type="checkbox" checked="checked" />
  <span></span>
</label>
<label>
  <input type="checkbox" />
  <span></span>
</label>
<label>
  <input type="checkbox" checked="checked" disabled="disabled" />
  <span></span>
</label>
<label>
  <input type="checkbox" disabled="disabled" />
  <span></span>
</label></div>

This HTML markup looks like this in the browser (from left to right: checked, unchecked, disabled and checked, disabled and unchecked):

Ubuntu HTML5 checkboxes

Switches behave like checkboxes, they only look different. The following HTML markup declares a switch:

<label>
  <input type="checkbox" checked="" data-type="switch">
  <span class="toggle">
    <span class="toggle-handle"></span>
    <span class="toggle-bg"></span>
  </span>
</label>

Like checkboxes, switches have the attributes "checked" and "disabled":

Ubuntu HTML5 switches

Javascript access method

Currently, toggles have no access methods in UbuntuUI.

Instead, toggle objects must be created with the Toggle-constructor:

var toggle = new Toggle("domId"); //the argument is a global id from the dom

Interface definition

interface Toggle{
  boolean isChecked();
  void check();
  void uncheck();
  void toggle();
};

Methods

  • void isChecked(). returns true if the toggle is checked, false otherwise.

  • void check() checks the toggle.

  • void uncheck(). unchecks the toggle.

  • void toggle(). checks the toggle if it is unchecked, unchecks it if it is checked.

Written on July 9, 2010