button

The button control allows the user to initiate a predefined action like submitting a form, resetting form etc. on tap of it.

Buttons can be grouped using default classes in juci such as juci_horizontal_bbar, juci_vertical_bbar, etc.

Extends basecontrol

Syntax

<div class="juci_group">
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_blue juci_T1">Click me</button>
	<button data-juci="button" disabled class="juci_positive juci_T23">Disabled</button>
</div>

<div class="juci_group">
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_orange juci_T12">Click me</button>
	<button data-juci="button" disabled class="juci_T3">Disabled</button>
</div>

<div class="juci_group">
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_orange juci_H1">Click me</button>
	<button data-juci="button" disabled class="juci_H2">Disabled</button>
</div>

<div class="juci_group">
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_positive juci_Q1">Click me</button>
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_Q2">Click me</button>
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_positive juci_Q3">Click me</button>
	<button data-juci="button" disabled class="juci_error juci_Q4">Disabled</button>
</div>

<div class="juci_group">
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_positive juci_Q12">Click me</button>
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_orange juci_Q3">Click me</button>
	<button data-juci="button" disabled class="juci_error juci_Q4">Disabled</button>
</div>

<div class="juci_group">
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_positive juci_Q1">Click me</button>
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_orange juci_Q23">Click me</button>
	<button data-juci="button" disabled class="juci_error juci_Q4">Disabled</button>
</div>

<div class="juci_group">
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_positive juci_Q1">Click me</button>
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_orange juci_Q2">Click me</button>
	<button data-juci="button" disabled class="juci_error juci_Q34">Disabled</button>
</div>

<div class="juci_group">
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_orange juci_Q123">Click me</button>
	<button data-juci="button" disabled class="juci_error juci_Q4">Disabled</button>
</div>

<div class="juci_group">
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_positive juci_Q1">Click me</button>
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_orange juci_Q234">Click me</button>
</div>

<div class="juci_group">
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_positive juci_T1">Click me</button>
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_orange juci_T2">Click me</button>
	<button data-juci="button" disabled class="juci_error juci_T3">Disabled</button>
</div>

<div class="juci_group">
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_positive juci_T1">Click me</button>
	<button data-juci="button" onclick="$m.toast('u clicked me!')" class="juci_orange juci_T2">Click me</button>
	<button data-juci="button" disabled class="juci_error juci_T3">Disabled</button>
</div>

<div class="juci_vertical_bbar">
	<button data-juci="button">Button</button>
	<div class="juci_horizontal_bbar">
		<div class="juci_horizontal_bbar">
			<button data-juci="button" class="juci_positive">Positive</button>
			<button data-juci="button" class="juci_error">Negative</button>
		</div>
		<button data-juci="button" class="juci_error">Negative</button>
	</div>
	<button data-juci="button" class="juci_orange">Warning</button>
	<button data-juci="button" class="juci_blue">Info</button>
</div>

Listeners to events can be attached by using Observable#bind, or listeners can be bound in the HTML declaration of the control using on+'name of event', for e.g: onclick=handleClick(event). Listeners can be removed through Observable#unbind

Attributes

type {String} ¶

A string containing the type that controls the behaior of the button. Possible types are listed here.

Events

click(eventObj) ¶

Fires when user taps on the button.

Parameters:
- eventObj{EventObject}