petejkim / socks watch
public
Forks2Right
Watchers66Right
Description: A tiny web GUI toolkit for JavaScript, inspired by Shoes
Home | Edit | New

Controls

Button

button([object style,] [string text]) { … } → Button

Appearance

button

Methods

getText() → string Returns the text label for a button.
setText(string text) → this Sets the text label for a button.

EditLine

editLine([object style,] [string text]) { … } → EditLine

Appearance

editline

Methods

getText() → string Returns the text in a text field.
setText(string text) → this Sets the text in a text field.

EditBox

editBox([object style,] [string text]) { … } → EditBox

Appearance

editbox

Methods

getText() → string Returns the text in a text field.
setText(string text) → this Sets the text in a text field.

Check

check([object style]) { … } → Check

Appearance

check

Methods

isSelected() → boolean Returns whether a check box has been selected.
setSelected(boolean selected) → this Sets whether a check box has been selected.

Example

check example

var option1Check, option2Check, option3Check;

stack {
  flow {
    option1Check = check().setSelected(true);
    para('option one');
  };
  
  flow {
    option2Check = check();
    para('option two');
  };
  
  flow {
    option3Check = check();
    para('option three');
  };
};

Radio

radio([object style]) { … } → Radio

Appearance

radio

Methods

isSelected() → boolean Returns whether a radio button has been selected.
setSelected(boolean selected) → this Sets whether a radio button has been selected.

Example

radio example

var playRadio, pauseRadio, stopRadio,
    rewindRadio, fastForwardRadio;

flow {
  playRadio = radio();
  para('play');
  
  pauseRadio = radio();
  para('pause');
  
  stopRadio = radio().setSelected(true);
  para('stop');
  
  rewindRadio = radio();
  para('rewind');
  
  fastForwardRadio = radio();
  para('fast forward');
};

ListBox

listBox([object style,] [array items]) { … } → ListBox

Appearance

listbox

Methods

getSelected() → string Returns the selected item.
setSelected(boolean selected) → this Sets the selected item.

Example

listbox example

listBox([ ['group1', 'option1', 'option2' ],
          ['group2', 'option3', 'option4' ],
          'option5' ]);

Progress

progress([object style]) { … } → Progress

Appearance

progress

Methods

getFraction() → string Returns a decimal number that represents the progress.
setFraction(number fraction) → this Sets the progress (fraction = decimal number between 0.0 and 1.0)
getBarStyle() → object Returns the style of the progress bar.
setBarStyle(object style) → this Sets the style of the progress bar.

Image

image([object style,] [string uri]) { … } → Image

Methods

getImage() → string Returns the URI of the image loaded.
setImage(string uri) → this Sets the URI of the image to load.
getText() → string Returns the alternate text for the image.
setText(string text) → this Sets the alternate text for the image.

Common Methods

Controls have all Element methods (see Elements) and the following additional methods:

isDisabled() → boolean Returns whether a control is disabled.
setDisabled(boolean disabled) → this Sets whether a control is disabled.
enable() → this Enables a control. Same as setDisabled(false).
disable() → this Disables a control. Same as setDisabled(true).
focus() → this Give focus to a control
blur() → this Take focus away from a control
getFunction() → function Returns the function for the default event of a control.
setFunction() { … } → this Sets the function for the default event of a control.
onKeyDown([object options]) { |key, e| … } → Event Creates a ‘KeyDown’ event handler. A string representing the key is passed. See also: Events
onKeyUp([object options]) { |key, e| … } → Event Creates a ‘KeyUp’ event handler. A string representing the key is passed. See also: Events

Pages feed

Last edited by petejkim, Fri Apr 24 05:39:56 -0700 2009
Home | Edit | New
Versions: