JSWindows (a JavaScript Inheritance Demo) Button
Class
© 15 Feb., 2013, Martin Rinehart
Overview
The Button
class is the base class that all buttons extend. It extends the Rect
class, adding arguments for hover_styles
(display when the mouse pointer is over the button), label_func
(function that labels the button) and click_func
(function that responds to clicks).
The Button
Constructor
The arguments to the Button
constructor are the same as the arguments to the Rect
constructor, plus the hover_styles
, label_func
and click_func
.
Arguments:
container,
name,
pos_size,
borders,
styles,
other,
hover_styles,
label_func,
click_func
The pos_size
argument may be abbreviated to a two-value array (position: left,top). Omitting the size defaults to:
jsw.DEFAULTS.Button.width, jsw.DEFAULTS.Button.height
The hover styles are the styles applied when the mouse pointer is over the button. These are a styles object. Many of our buttons simply change the border color, which seems to provide an adequate visual cue. The title will also be displayed in a tooltip (and by other means for non-visual browsers). When the mouse pointer leaves the button, those styles which were in the hover styles set are looked up in the original styles to return them to the non-hover condition.
The label_func
is called when the button is displayed and when the button state is changed. It provides a text label and/or a graphic display. It's goal is to clearly inform the user of the button's effect when clicked.
The click_func
is called when the user clicks on the button.
The Button
Class Methods
The Button.init()
Method
The constructor passes its parameters to this method, led by a reference to the constructor's this
, the new button being created.
Arguments:
new_button,
container,
name,
pos_size,
borders,
styles,
other,
hover_styles,
label_func,
click_func
The Button.click()
Method
This provides a stub method that states, deliberately embarrassingly, that the click handler hasn't been coded. Override this method!
The Button.mouseover()
Method
The default should often be adequate. Changes the button's border colors and the cursor.
The Button.mouseout()
Method
Reverses the changes from mouseover()
.
Each property in hover_styles
is looked up in all_styles
as the button is created (and all_styles
has the normal, non-hover styles). If the property name exists in all_styles
the property (name/value) is added to non_hover_styles
. Be sure to have created a default, non-hover style (and don't just use the DOM default) to have the mouseout()
properly return the style to normal.
The Button
Instance Methods
The Button
prototype "inherits" from (is a shallow copy of) the Rect
prototype. It adds these methods:
The disable()
Method
This method calls the mouseout
event handler to return display to normal, stops listening for mouseover
events and sets button.enabled
to false.
The enable()
Method
This method resumes listening for mouseover
, mouseout
and click
events. It sets (to true) the button.enabled
flag.
The toString()
Method
This is a deliberately quick. It announces that you have a Button
and gives its name.
P. S. The
Button
originally extended the Wobj
class, wrapping a DOM <button>
element. This ended when I discovered that a <button>
does not obey the sizes in styles you provide, and it does not disobey in a single way, common to all browsers. See this site, "Engineers" track, JavaScript -> XBrowser -> Not MSIE -> Button Size. It's bad.
Feedback: MartinRinehart at gmail dot com
# # #