Adding custom button controls

YUI has a Button widget control, which offers many features for enhancing standard HTML button controls. It allows a great level of control over the look and function of the button, such as adding images, or allowing the button to have a label that differs from its value. In this example, we will enhance a basic HTML input button.

How to do it...

To begin, set up a PHP page, button.php, with an HTML input button control:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/button.php');
$PAGE->requires->js('/cook/button.js', true);
?>
<?php
echo $OUTPUT->header();
?>
<input id="btnButton" type="button" value="Custom Button" />
<?php
echo $OUTPUT->footer();
?>

Next, define the associate JavaScript file button.js:

YUI().use("yui2-button", function(Y) {
var YAHOO = Y.YUI2;
var customButton = new YAHOO.widget.Button("btnButton");
});

Instantiate...