<multistatebutton>
a button with multiple states, such as a toggle button

JavaScript: lz.multistatebutton

A multistatebutton is an extension of the basebutton class to address the more general class of buttons that can have multiple states, and where each state has it own mouseup, mouseover, and mousedown images. Like the basebutton class, the construction of a multistatebutton starts with a multiframe resource.

The example below create a play/pause button, using the following resources:

With a multistatebutton, the following must be specified explicitly:

statenum
the initial state of a button
statelength
the number of frames (of a multiframe resource) used for a single button state - NOTE: all states must be the same length
maxstate
the total number of states of the button - 1 (since states are counted starting from 0).

Example 46. Assigning resources to a button

<canvas height="60">
              <include href="multistatebutton-resources.lzx"/>
            
              <!-- Second, assign the resource to a basebutton tag -->
              <multistatebutton name="myButton" resource="mybutton_rsrc" statenum="0" statelength="3" maxstate="1"/>
            </canvas>

Now, the multistatebutton will stay in state "0" until you switch states. This can be accomplished by calling myButton.setStateNum(number).

Example 47. Switching button states

<canvas height="60">
              <include href="multistatebutton-resources.lzx"/>
              
              <multistatebutton name="myButton" resource="mybutton_rsrc" statenum="0" statelength="3" maxstate="1" onclick="this.toggle()">
                 <method name="toggle">
                    if (this.statenum == 0) this.setStateNum(1)
                    else this.setStateNum(0)
                 </method>
              </multistatebutton>
            </canvas>

Attributes

Name (CSS property) Type (tag) Type (js) Default Category
maxstate number Number 0 read/write
  the largest number allowed for the value of statenum
statelength number Number 3 read/write
  the number of frames in a state
statenum number Number 0 read/write
  the current state

Methods

setStateLength()
multistatebutton.setStateLength(s);
setter for the statelength attribute
Parameter Name Type Description
s    

setStateNum()
multistatebutton.setStateNum(s);
setter for the statenum attribute
Parameter Name Type Description
s    

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