Buttons

Buttons can be used pretty much anywhere. Creating a button starts by creating a <div> with the data-bb-type="button" attribute. By default a button will size itself to the text used for the caption. You can however use the data-bb-style="stretch" setting for a button to make it stretch to the total width of the container where it is embedded. I wouldn't recommend using the "stretch" capability if you use a button in a Label/Control row.

To add a click handler to the button simply add an "onclick" event to the <div>.

<div data-bb-type="screen">
	<div data-bb-type="panel-header">Font</div>
	   <div data-bb-type="label-control-horizontal-row">
		   <div data-bb-type="label">Font Style:</div>
		   <div data-bb-type="button" onclick="alert('click');" id="plain">Plain</div>
	   </div>
	</div>
</div>

JavaScript Interface

You can disable in your Button by adding the data-bb-disabled="true" attribute. When you want to dynamically change the state of your button you can call it's enable() and disable() functions.

document.getElementById('plainBtn').enable();
document.getElementById('plainBtn').disable();

Changes Coming in v0.9.3

NOTE: These changes are currently in the "next" branch and will make their way into the official 0.9.3 release

BlackBerry 10 styled buttons now support the ability to add an image by setting the data-bb-img attribute to the path to your image.

<div data-bb-type="button" data-bb-img="images/foo.png">My Button</div>

A button can be styled in one of the following ways:

• Text Only: (Text is centered)
• Image + Text: (Image & Text are left justified)
• Image Only: (Image is centered and button is shrunk to fit image)

Button Image Sizes

• BlackBerry PlayBook - 29 x 29 pixels
• BlackBerry 10 - 71 x 71 pixels

JavaScript Interface

A new JavaScript setCaption(value) function has been added to buttons to allow you to set their caption for all OS versions

document.getElementById('plainBtn').setCaption('my caption');

A new JavaScript setImage(value) function has been added to buttons to allow you to set their image. This is only supported on BlackBerry 10 styling

document.getElementById('plainBtn').setImage('images/foo.png');