Mozilla Skin
BLOG | FORUMS | WIKI | DEVELOPERS | MY EYEOS | PROFESSIONAL SERVICES | PROJECT PAGE

Widget Slider

From eyeOS Wiki

Contents

Introduction

Slider widgets consists of a draggable button in a line, being this line a range of values between a minimum a maximum value. Thus, the user can select a value simply by dragging the line button to a desired value.

slider_ui_sample1.png slider_ui_sample2.png

Widget Use

Available Generic Keys

  • horiz: specifies whether its horizontal coordinate must be taken from the left (0) or the right (1) border of its container element. Default is 0 (left).
  • vert: specifies whether its vertical coordinate must be taken from the top (0) or from the bottom (1) border of its container element. Default is 0 (top).
  • x: specifies the horizontal displacement inside its "father" element, in pixels. Default is 10 pixels.
  • y: specifies the vertical displacement inside its "father" element, in pixels. Default is 10 pixels.
  • cent: specifies how the widget should be centered. Possible values are:
    • 0: no centering. This is the default value.
    • 1: center both horizontal and vertically.
    • 2: center horizontally.
    • 3: center vertically.
    • 4: place the widget at the horizontal and vertical center of its container element.
    • 5: place the widget at the horizontal center of its container element.
    • 6: place the widget at the vertical center of its container element.

Please note the difference between options 1-3 and options 4-6. Options 1-3 calculate the size of the widget to ensure that the center of the widget is placed at the central point of its container, while options 4-6 set the central point coordinates as the widget's position.

Specific Keys

  • minValue: specifies the lowest range value. Default value is 0.
  • maxValue: specifies the highest range value. Default value is 100.
  • currentValue: specifies the value in which Slider will be set to when showed. Default value is 50.

Methods

 addEvent($eventName,$eventFunc,$args = )
  • Description: makes the widget execute code every time certain event is triggered.
  • Arguments:
    • eventName: the name of the JS event. Example: onchange.
    • eventFunc: the JS code to be executed.
    • args: if any, the args passed to the system.
 focus()
  • Description: makes this widget as the selected one.
  • Arguments: none.
 remove()
  • Description: removes this widget, along with its child widgets.
  • Arguments: none.
 setCss($params)
  • Description: sets CSS atributes to a widget.
  • Arguments:
    • params: specifies, in the form of an associative array, the CSS attributes to be applied. Remember that both the key and value of each element must be valid CSS properties and values respectively.
 setX($x)
  • Description: changes the horizontal position of the widget.
  • Arguments:
    • x: natural number specifying the new X coordinate.
 setY($y)
  • Description: changes the vertical position of the widget.
  • Arguments:
    • y: natural number specifying the new Y coordinate.

Can be serialized

Yes, but keep in mind that by default this widget is never serialized. If you want to serialize it, simply pass number 0 as the argument of its show() method.