|
JxButton
Working with Jx Buttons.
Working with Jx ButtonsButtons are basic building blocks for most web applications. They provide the user with something to click on in order to trigger some action. In regular HTML pages, this would be represented as a hyperlink (using an tag) or an HTML button (using a Jx.ButtonThe basic button object is Jx.Button. Visually, a button may contain an image, some text or both. When the button is clicked, it fires an event that the application developer can listen for and take some action on. A button has several visual states. How each state looks depends on the skin in use, these are taken from the Delicious skin:
Creating a new instance of Jx.Button is straightforward: var button = new Jx.Button(); At this point, the button doesn’t actually appear on your web page anywhere because we haven’t told it where we want it to go. Buttons can be added to a web page in two different ways, in a Toolbar (discussed there) or directly to an existing HTML element using the addTo method (discussed here). First, we need a simple web page to work with: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jx.Button Examples</title>
<script type="text/javascript" src="jx/jxlib.js"></script>
<link rel="stylesheet" href="jx/jxskin_delicious.css" type="text/css">
<script type="text/javascript">
window.addEvent('load', function() {
// add example code here
}
</script>
</head>
<body>
<div id="buttonContainer"></div>
</body>
<html>You can try out the examples below by pasting the code into the load event handling function. To make the button visible in your web page, use the addTo(element) method: var button = new Jx.Button();
button.addTo('buttonContainer');The addTo method takes one argument, a reference to an HTML element or the id of an HTML element to which the button is to be added. In most examples, we are only using the id method. But you can also do this: // $ is a MooTools helper function that is equivalent to // document.getElementById(‘buttonContainer’); See the // MooTools documentation for more details. var el = $(‘buttonContainer); var button = new Jx.Button(); button.addTo(el); // alternately you can do it in one step if you don’t need to keep a reference // to the created button object: // new Jx.Button().addTo(el); You should see something like this:
This creates an empty button that isn’t very useful for the user because it has no indication of what it is for! But it has all the behaviour of a button, including all the various states - try it out! To create a more useful button, you can pass in one or more options. var button = new Jx.Button({
image: 'images/star.png'
label: 'Label and Icon'
});
button.addTo('buttonContainer');
So now we have a good looking button that provides the user with an indication of what the button will do when they click on it, but it doesn’t actually do anything when they click on it! This is where Events come in. A normal button fires a click event when the user presses and releases a mouse button with the cursor over the button. You can add an event handler for the click event in one of two ways. The first method is to provide the event handler as an option to the button constructor. The option name is onClick and the value is any function. var button1 = new Jx.Button({
label: 'click me',
onClick: function(button) {
alert('I was clicked!');
}
});
button1.addTo('buttonContainer');The second method is to use the addEvent method on an existing button object, passing the event name (click in this case) and a function. var button2 = new Jx.Button({
label: 'click me too'
});
button2.addTo('buttonContainer');
button2.addEvent('click', function(button){
alert ('I was clicked too!')
});The function you provide is called with the button that was clicked as the first, and only, argument. The context of the function (what this refers to) is determined by you when you create the function. See Events for details on how to bind a function to a particular context or scope. Both methods produce identical results, namely a function gets called when the button is clicked. Which one you use is really a matter of choice and, sometimes, necessity. In most cases, you know what you want the button to do when you make it and it is easiest just to provide a handler in the constructor options. However, there will be instances where you don’t know what the button will do when it is made, or you want several different things to happen (you can call addEvent multiple times with the same event and different functions). You can also remove existing event handlers using the removeEvent method (see Events). Toggle Buttons
A toggle button is one that has a particular state, up or down, and persists in that state. The user changes the state by clicking the button to toggle it. This is equivalent to an HTML checkbox. You don't need to do much to make a normal button become a toggle button. Its the same Jx object with an extra option, toggle, passed to the constructor: var button = new Jx.Button({
toggle: true,
image: 'images/bug.png'
label: 'toggle button'
});
button.addTo('buttonContainer');When you try this, you’ll notice it looks the same as a normal button. But when you click it, it will stay ‘pressed in’ until you click it again. When a button is a toggle button, it no longer fires a click event (which wouldn’t really tell you anything useful about the state of the button) but adds two new events, down and up. The down event is fired when the button becomes active (it is presed in) and the up is fired when the button becomes inactive. var button = new Jx.Button({
toggle: true,
image: 'images/bug.png'
label: 'toggle button',
onDown: function(button) {
alert('the toggle button was toggled on');
},
onUp: function(button) {
alert('the toggle button was toggled off');
}
});
button.addTo('buttonContainer');Jx.Button Constructor OptionsThere are a few more options that you can pass to the Jx.Button constructor that we haven’t covered yet. We’ll cover the full list now.
Jx.Button APIThe Jx button has a few other methods that allow you to work with button objects that you have already created. We’ll cover the full API now.
Button Sub Classes |
Sign in to add a comment
