Ubuntu HTML5 platform: checkboxes, switches and lists

In the last two articles (first article and second article), we presented the Ubuntu HTML5 widgets pagestacks, pages, the backbutton, buttons, dialogs, and sliders. We continue our journey and look at "checkboxes", "switches" and "lists".

Toogles

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

Checkboxes

Checkbox are HTML elements having the attribute type="checkbox". Additionally, they can have two attributes:

  • checked: displays the checkbox as "checked"
  • disabled: disables the checkbox so that its state cannot be changed

This element must be followed by an empty ""-element. CSS stylessheets from the Ubuntu HTML5 Theme need this element to set a background image. Here is a code snippet which displays a checkbox:

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

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

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

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

With Ubuntu HTML5 Theme, this HTML markup looks like this (from left to right: checked, unchecked, disabled and checked, disabled and unchecked):

[caption id="attachment_805" width="270"]<a href="http://daniel-beck.org/wp-content/uploads/Checkboxes.png"><img class="size-full wp-image-805" alt="Checkboxes" src="http://daniel-beck.org/wp-content/uploads/Checkboxes.png" width="270" height="35" /></a> Checkboxes[/caption]

Checkboxes have no predefined Javascript methods in Ubuntu HTML5. Accessing the state of the checkbox - checked or not checked - must be done with regular Javascript DOM-methods instead:


```html
<label>
  <input id="checkbox" type="checkbox" checked="disabled" />
</label>
<script>
var checkBoxState = true;
document.getElementById("checkbox").onclick = function(){
  checkBoxState = !checkBoxState;
}
</script>

Switches

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": [caption id="attachment_839" align="alignnone" width="300"]Switches Switches[/caption]

List

Lists are predefined widgets that mostly look like their native counterparts. A container is declared as a list by setting the attribute data-role="list". Lists consist of an

    element, containing
  • elements (i.e. list items).

    The following code declares a list consisting of two list items:

    <section data-role="list">
      <ul>
        <li>
          <p>Label</p>
        </li>
        <li>
          <p>Label</p>
          <p>Secondary Label</p>
        </li>
      </ul>
    </section>  
    

    This creates the following user interface: [caption id="attachment_862" align="alignnone" width="302"]A list containing two items A list containing two items[/caption]

    List items can also contain

    -elements. Ubuntu HTML5 styles them smaller then normal list elements:

    <section data-role="list">
      <header>Header</header>
      <ul>
        <li>
          <p>Label</p>
        </li>
      </ul>
    </section>  
    

    Here is a screenshot of a header element and a "normal" list element: [caption id="attachment_844" align="alignnone" width="302"]A list made of a header and a normal list item A list made of a header and a normal list item[/caption]

    To give the user the illusion of "progression", list items can be designed to have an arrow on the right side. This is realized by surrounding a list-item with an -element:

    <section data-role="list">
      <header>Header</header>
      <ul>
        <li>
          <a href="#">
            <p>Open this item</p>
          </a>
        </li>
      </ul>
    </section>  
    

    [caption id="attachment_846" align="alignnone" width="302"]List with a progression item List with a progression item[/caption]

    List items can have an icon on the left side:

    <section data-role="list">
      <header>Header</header>
      <ul>
        <li>
          <aside>
            <img src="../../ambiance/img/avatar_contacts_list@8.png" alt="placeholder">
          </aside>
          <p>Label</p>
        </li>
      </ul>
    </section>
    

    [caption id="attachment_847" align="alignnone" width="302"]List item with a label List item with a label[/caption]

    However, this

Written on September 11, 2013