Scrollers provide the "finger-flicking" scroll method provided by most touch-screen devices today. One scroller is implemented automatically in every scene and additional scrollers can be added to almost any elements that can be contained within a div tag.
Scrolling modes (in Mojo v1.0):
- free: allows scrolling along the horizontal and vertical axes.
- horizontal: allows scrolling only along the horizontal axis.
- vertical: allows scrolling only along the vertical axis.
- dominant: allows scrolling along the horizontal or vertical axis, but not both at once.
The initial direction of the drag determines the scrolling axis for the duration of the drag. - horizontal-snap: allows scrolling only along the horizontal axis. Snaps
to points determined by the position of the block elements found in the model's
snapElements property array. As the scroller snaps into each point it sends a propertyChange event. - vertical-snap: same as horizontal-snap but along the vertical axis.
The widget targets its child element for scrolling. If it has more than one child element, a single div is automatically created to wrap the child elements.
Important: The size of the scroller's target div, the child element, must be set in CSS, otherwise the div will expand to the size of its contents and scrolling will not work.
Scrollers can be nested if the actions required to start scrolling do not conflict. For example, a horizontal scroller can be nested inside the default vertical scroller; any vertical motions will then be captured by the vertical scroller, even if they begin on the horizontal scroller.
Click here for an example of how to set up a scroller.
That does it for the scroller widget. Up next...pickers!
This is one of many daily development-related webOS articles. Grab the RSS feed to stay in the know!
Much of the information in this article was presented in Chapter 5 of Palm webOS by Mitch Allen.
0 Comments