1. Introduction
The Uize.Widget.Bar class implements a widget for displaying numerical values using a bar, with full and empty indicators and an optional value knob.
DEVELOPERS: Chris van Rensburg, Bryan Hsueh
The Uize.Widget.Bar module defines the Uize.Widget.Bar widget class, a subclass of Uize.Widget. This module supports both horizontally and vertically oriented bars.
2. Implied Nodes
2.1. empty
The optional empty implied node acts as an indicator for the "empty" side of a bar. For vertical bars, the empty side is on the top side of the knob. For horizontal bars, the empty side is on the right side of the knob.
To display correctly, this node should occupy the same space in the layout as the optional full implied node and must have the same dimension on the axis of the knob's motion (ie. height for vertical bars, and width for horizontal bars) as the track implied node. It's not necessary that this node occupy the same space in the layout as the track implied node - the full/empty indicators could be off to the side, outside of the bar's track. However, in many cases you'll see bars with the full/empty indicators right over the track.
NOTES
| this implied node is optional | |
compare to the full implied node |
2.2. full
The optional full implied node acts as an indicator for the "full" side of a bar. For vertical bars, the full side is on the bottom side of the knob. For horizontal bars, the full side is on the left side of the knob.
To display correctly, this node should occupy the same space in the layout as the optional empty implied node and must have the same dimension on the axis of the knob's motion (ie. height for vertical bars, and width for horizontal bars) as the track implied node. It's not necessary that this node occupy the same space in the layout as the track implied node - the full/empty indicators could be off to the side, outside of the bar's track. However, in many cases you'll see bars with the full/empty indicators right over the track.
NOTES
| this implied node is optional | |
compare to the empty implied node |
2.3. knob
The knob implied node acts as an indicator for a bar's current value and - for sliders - is wired up for drag-and-drop and provides the user a way to change the value. This node must be a child node of the track implied node.
NOTES
| this implied node is required |
2.4. track
The track implied node acts as a "guide" in which a bar's knob is to move. This node should be transparent when using the optional full and empty implied nodes, in order for those nodes to be visible to the user. When not using those nodes, the track image can be set in the CSS style for this node or can be a child node.
NOTES
| this implied node is required |
2.5. value
The optional value implied node provides a convenient way to display a bar's current value. When this node is present, its innerHTML will be set to the bar's value, every time it changes.
NOTES
| this implied node is optional |