#ViewScrollr by Mode54
A Custom Titanium Scrollable View Module
##About
This module is a custom wrapper around the Ti.UI.ScrollableView object to provide extra features. The two main features are auto scrolling and custom paging controls.
Visit our Titanium blog for more code, tips & tricks. You can also checkout Mode54.com for our products and services. Code Strong!
##Usage
Here is a quick example of how to use ViewScrollr
var ViewScrollr = require("ViewScrollr");
var Banner = ViewScrollr.create({
top : 0,
height : 180,
auto : true,
navigation : {
selectedColor : "#fff",
color : "#000",
backgroundColor : "#000"
},
panels : [
{ image : "/images/sunset_houses.jpg" },
{ image : "/images/beach.jpg" },
{ image : "/images/lizard.jpg" },
{ image : "/images/cove.jpg" },
{ image : "/images/bermuda.jpg" }
]
});
win.add(Banner);
The create()
method can take a number of parameters to customize the appearance and behavior of the ViewScrollr.
- top, bottom, left, right [OPTIONAL] Position of ViewScrollr relative to the parent. Same as Ti.UI.View properties.
- width, height [OPTIONAL] Size of ViewScrollr in platform-specific units. Same as Ti.UI.View properties. (default: Ti.UI.FILL)
- backgroundColor [OPTIONAL] The background color of the container. If your view or image is smaller then the width or height then you will see this color in the background. (default: #000)
- auto [OPTIONAL] Enable/Disable auto scroll feature. (default: false)
- delay [OPTIONAL] Delay between panel auto scroll in milliseconds. (default: 4000)
- alpha [OPTIONAL] Alpha (opacity) value of navigation background. (default: 0.5)
- navigation [OPTIONAL] Navigation (page control) settings. Settings object is required to display navigation.
- onTop [OPTIONAL] Move navigation (and captions) to top of ViewScrollr
- style [OPTIONAL] Set navigation style. Either
ViewScrollr.NAV_STYLE.CIRCLE
orViewScrollr.NAV_STYLE.BLOCK
(default: ViewScrollr.NAV_STYLE.CIRCLE) - selectedColor [REQUIRED] Color of the selected page indicator.
- color [REQUIRED] Color of page indicators.
- showBorder [OPTIONAL] Enable/Disable page indicator borders.
- borderColor [OPTIONAL] Color of page indicator borders.
- backgroundColor [OPTIONAL] Background color of navigation & caption. (default: #000)
- panels [REQUIRED] Panel object settings. These are required for this module to function. I'd recommend more then one.
- view [REQUIRED] A Ti.UI.View object. This is only required if
image
is not set. - image [REQUIRED] A string with the path/url to an image. This is only required if
view
is not set. If both exist thenimage
takes priority. - caption [OPTIONAL] The text to display as a caption for this panel.
- maxZoomScale [OPTIONAL] If this is set then the
image
is wrapped in a Ti.UI.ScrollView with this maxZoomScale. This allows zooming. (see Ti.UI.ScrollView)
- view [REQUIRED] A Ti.UI.View object. This is only required if
I've used the following images from kansasphoto's photostream on Flickr via Creative Commons Search tool.
We released a pro version to this module with some cool extra features like animated content blocks and video slides. Download it here!
Log them in the Issues section. Please provide details and reproducible test cases if possible.