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 <input> 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 <input> element must be followed by an empty “<span>”-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>

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

Checkboxes

Checkboxes

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:

<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”:

Switches

Switches

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 <ul> element, containing <li> 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:

A list containing two items

A list containing two items

List items can also contain <header>-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:

A list made of a header and a normal list item

A list made of a header and a normal list item

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 <a>-element:

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

List with a progression item

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>
List item with a label

List item with a label

However, this <aside> element has a very high z-index. It interfers with other Ubuntu HTML5 components like the toolbar: icons are visible behind the toolbar. There is a bug report for this.
Meanwhile, I recommand to overwrite the z-index like that:

[data-role="list"] aside {
    z-index: 2;
}

List items can also contain switches and checkboxes:

<section data-role="list">
  <header>This is a header</header>
  <ul>
    <li>
      <p>Switch</p>
        <label>
          <input type="checkbox" checked="" data-type="switch">
            <span class="toggle">
              <span class="toggle-handle"></span>
              <span class="toggle-bg"></span>
            </span>
        </label>
     </li>
    <li>
      <p>Checkbox</p>
      <label>
        <input type="checkbox">
        <span></span>
      </label>
    </li>
  </ul>
</section>
Checkbox and switch menu items

Checkbox and switch menu items

Ubuntu HTML5 theme delivers a convenient javascript API to access and manipulate lists.

append(text, label, id, onclick, data) creates a new list item and appends it to the end of a list. This method only needs to be called with the text argument, all other arguments are optional. text is displayed on the left side of the created list element, label is normally used to show an image or a toggle, it is displayed on the right side. With “id” the list element gets assigned an “id”-attribute. A click event-handler can be passed with onclick. data allows to pass supplementary data to the event-handler.

This code adds several list items to an existing list:

UI.list('somelist').append("The"); 
UI.list('somelist').append("answer"); 
UI.list('somelist').append("is"); 
UI.list('somelist').append("42");

The following example adds the list item “startwifi” to a list named “actions”. When a user clicks on it, a wifi connection is opened by using the provided username and password:

var wifiConfig = {username: "admin", password: "secret"};
UI.list('actions').append("Start Wifi", null, function(wifiData){
   // start wifi
}, wifiConfig);

The following methods allow accessing and removing elements from a list:

  • at(n): accesses the n-th element of the list. Returns a <li> element
  • remove(n): removes the n-th element of the list
  • removeAllItems(): removes all items of a list

Finally, there is also a forEach() method which iterates over all list items and applies a function to them. This could for example be used to assign a CSS class named “odd” to each second item:

UI.list('list').forEach(function(element, index) {
   if(index % 2 === 1)
      element.classList.add("odd");
});

This closes the description of checkboxes, switches and lists. The next article will look at the toolbar and popover menus.

Share Button

Leave a Reply

Your email address will not be published. Required fields are marked *


7 + eight =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>