<button>
The button class provides a simple pushbutton.

JavaScript: lz.button

The button tag provides a simple button. The button is rectangular and typically displays a text label describing its action. The button adjusts to fit the label.

Example 51. Simple button

<canvas height="30">      
  <button onclick="animate('x', 100, 1000, true)">
    Move me
  </button>
</canvas>

If you need to format the text using additional tags such as <b>, add the text inside the button tags instead of using the text attribute.

Example 52. XHTML button

<canvas height="30">      
  <button onclick="animate('x', 100, 1000, true)">
    Move <b>me</b>
  </button>
</canvas>

A <button> may contain both XHTML markup, and object tags such as <attribute> and <method>.

Example 53. XHTML button

<canvas height="30">      
  <button onclick="moveHoriz(5);">
    Move <b>me</b>
    <method name="moveHoriz" args="moveAmount">
      this.setAttribute("x", this.x+moveAmount);
    </method>
  </button>
</canvas>

Attributes

Name (CSS property) Type (tag) Type (js) Default Category
focusable expression any true read/write
  if true, the enter key will activate this button (call its onclick handler) if it is enclosed in a form. It will also have a visually distinct look to indicate to the user
text_padding_x number Number 11 read/write
  the amount of space to add horizontally when sizing button to its text.
text_padding_y number Number 4 read/write
  the amount of space to add vertically when sizing button to its text.
text_x number Number this.width/2 - this._title.width/2 read/write
  the x position of the button text. default: centered
text_y number Number this.height/2 - this._title.height/2 read/write
  the y position of the button text. default: centered

Methods

Methods inherited from lz.Eventable

destroy, setAttribute

Events

Events inherited from <basebutton>

onclick, onresourceviewcount

Events inherited from <node>

onconstruct, ondata, oninit

Events inherited from lz.Eventable

ondestroy