Button Widget for HTML

button

HTML

A button can be constructed from virtually any HTML element. E.g.

<span>OK</span>
<!-- widget button action:myButtonAction; -->
	    

... or

<img src="images/yes.png"
  style="width: 21px; height: 14px;" alt="Yes"/>
<!-- widget button action:myButtonAction; -->
	    

Note: It is very important when using an image button to specify the image dimensions via the style attribute.

... or

<input type="submit" value="OK"/>
<!-- widget button action:myButtonAction; -->
	    

... or

This is
a more
verbose
button

<p>This is<br/>a more<br/>verbose<br/>button</p>
<!-- widget button action:myButtonAction; -->
	    

Javascript

The "action:myButtonAction" in the above examples causes a javascript function to be called when the button is clicked. The "action" property specifies the name of the function, in this case: "myButtonAction"

The function is called, and passed the HTML element that was clicked. E.g. the following Javascript function is called when the examples on this page are clicked:

function myButtonAction(target)
{
    alert("pressed "+elementToString(target));
}
	    

(The elementToString function is a convenience function supplied with the widget library for debugging purposes).

CSS

The widgets also get assigned a default CSS class (if you have not already done so.) The default class for buttons is "widget_button", and sometimes also followed by "_selected" or "_highlight".

E.g. the following standard CSS classes exist:

• widget_button
• widget_button_highlight
• widget_button_selected

These classes can be ommitted in your HTML... the system will automatically make them. Or you can create your own CSS classes. E.g. for a button, you could declare the button as so:

<span class="my_button">OK</span>
<!-- widget button action:myButtonAction -->
	    

Then you will need to define your own CSS entry for this button, e.g.

.my_button {
    cursor: hand;
    cursor: pointer;
    text-align: center;
    border: 1px solid #c0c0c0;
    margin-left: 1px;
    margin-right: 1px;
    vertical-align: middle;
    background-color: white;
}
.my_button_highlight {
    cursor: hand;
    cursor: pointer;
    text-align: center;
    border: 1px solid #909090;
    margin-left: 1px;
    margin-right: 1px;
    vertical-align: middle;
    background-color: #e0e0f0;
}
.my_button_selected {
    cursor: hand;
    cursor: pointer;
    text-align: center;
    border: 1px solid black;
    margin-left: 1px;
    margin-right: 1px;
    vertical-align: middle;
    background-color: #d0d0ff;
}
	    

Note that you must also specify the classes named with the same name and "_selected" and "_highlight" appended. This is because when the widget is highlighted or selected, the system uses the base class name and appends "_selected" or "_highlight" to it.

Note also that specifying a class and then the CSS is optional. If you don't specify it, the system will use the default CSS classes, which provide the default look and feel.

More...

Documentation     Other widgets

Zwartberg Reseach & Development is a registered trading name of Open Source Software Consulting CC.
Phone:+27235411462, fax:+27235411379, mobile:+27796977082,
brian@zwartberg.com, P.O. Box 2, Prince Albert, 6930, South Africa.