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

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

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