Jx.Button

Extends: Object

Implements: Options, Events, Jx.Addable

Jx.Button creates a clickable element that can be added to a web page.  When the button is clicked, it fires a ‘click’ event.

The CSS styling for a button is controlled by several classes related to the various objects in the button’s HTML structure:

<div class="jxButtonContainer">
 <a class="jxButton">
  <span class="jxButtonContent">
   <img class="jxButtonIcon" src="image_url">
   <span class="jxButtonLabel">button label</span>
  </span>
 </a>
</div>

The CSS classes will change depending on the type option passed to the constructor of the button.  The default type is Button.  Passing another value such as Tab will cause all the CSS classes to change from jxButton to jxTab.  For example:

<div class="jxTabContainer">
 <a class="jxTab">
  <span class="jxTabContent">
   <img class="jxTabIcon" src="image_url">
   <span class="jxTabLabel">tab label</span>
  </span>
 </a>
</div>

When you construct a new instance of Jx.Button, the button does not automatically get inserted into the web page.  Typically a button is used as part of building another capability such as a Jx.Toolbar.  However, if you want to manually insert the button into your application, you may use the addTo method to append or insert the button into the page.

There are two modes for a button, normal and toggle.  A toggle button has an active state analogous to a checkbox.  A toggle button generates different events (down and up) from a normal button (click).  To create a toggle button, pass toggle: true to the Jx.Button constructor.

To use a Jx.Button in an application, you should to register for the ‘click’ event.  You can pass a function in the ‘onClick’ option when constructing a button or you can call the addEvent(‘click’, myFunction) method.  The addEvent method can be called several times, allowing more than one function to be called when a button is clicked.  You can use the removeEvent(‘click’, myFunction) method to stop receiving click events.

Example

var button = new Jx.Button(options);
button.addTo('myListItem'); // the id of an LI in the page.

Example:
var options = {
    imgPath: 'images/mybutton.png',
    tooltip: 'click me!',
    label: 'click me',
    onClick: function() {
        alert('you clicked me');
    }
};
var button = new Jx.Button(options);
button.addEvent('click', anotherFunction);

function anotherFunction() {
  alert('a second alert for a single click');
}

Events

License

Copyright © 2008, DM Solutions Group Inc.

This file is licensed under an MIT style license