Difference between revisions of "Selector"

From HSYCO
Jump to navigation Jump to search
Line 12: Line 12:
 
*'''label''': optional text label next to the button. Can contain HTML tags
 
*'''label''': optional text label next to the button. Can contain HTML tags
 
*'''css>''': optional CSS style.
 
*'''css>''': optional CSS style.
 
 
  
 
== Syntax ==
 
== Syntax ==
  (3button <address>; <position>; <label>)
+
  (selector <image>; <position>; <width>; <height>; <container ID>; <group>; <label>; <css>)
 
E.g.
 
E.g.
  (3button autom.1; x10y20; Garage Door)
+
  (selector apple.png; r3c5; 100; 100; mycontainer;; One)

Revision as of 16:58, 30 January 2014

Note  For a description and a complete list of UI Objects, see UI Objects.

The selector allows you to create a graphical behavior that is similar to having multiple panels with tab navigation, only more flexible than that. The graphical appearance of a selector is the same as an (image) or (imagelink) object, an image and a text label. You should create two or more overlapped containers in a page, each with a unique id. Then create a (selector) object for each container, with all selectors having the same group name. When a (selector) object is touched, the corresponding container’s visibility will be set to visible, while all other containers associated to selectors with the same group name will become invisible.

Parameters

  • image: image filename
  • position: the object's position. Use the pixels or rows and columns coordinates format
  • size: the image's width and height
  • container ID: the container's id associated to this selector
  • group: optional group name, identifying a set of selectors. All selectors with no group name defined are part of the same group
  • label: optional text label next to the button. Can contain HTML tags
  • css>: optional CSS style.

Syntax

(selector <image>; <position>; <width>; <height>; <container ID>; <group>; <label>; <css>)

E.g.

(selector apple.png; r3c5; 100; 100; mycontainer;; One)