Button

Overview

Button objects represent Ubuntu HTML5 buttons. They offer a click event handler and CSS classes to style them.

Markup declaration

<button data-role="button" id="myButton">Standard</button>

Javascript access method

Accessing the button is made as follows:

var UI = new UbuntuUI();
UI.init();
var button = UI.button("id");

Interface definition

interface Button{
  void click(AsyncOperationCallback callback);
};

Methods

  • void click(AsyncOperationCallback callback). registers a listener for click events. The implementation uses the FastButton class. On devices with touch displays, the click event is emulated and triggered whenever a touchend event occurs within a small timeframe after a touchstart event. This behavior is implemented by the FastButton class and described there. See class: FastButton.

The following example registers an event handler for (emulated) click events:

UI.button('myButton').click(function(){
  alert("Button clicked");
});

Predefined CSS classes

Ubuntu HTML5 Theme comes with predefined classes to style buttons. They are named:

  • success
  • danger
  • warning

Here are the CSS classes in action:

<button data-role="button" >Standard</button>
<button class="success" data-role="button">Call</button>
<button class="danger" data-role="button">Delete</button>
<button class="warning" data-role="button">Warning</button>

Here is the result of styling the buttons:

Ubuntu HTML5 header

Written on July 9, 2010