Skip to content

Instantly share code, notes, and snippets.

@hullen
Forked from raulriera/PagingControl.js
Created April 30, 2012 12:50
Show Gist options
  • Save hullen/2558058 to your computer and use it in GitHub Desktop.
Save hullen/2558058 to your computer and use it in GitHub Desktop.
Custom paging control for scrollableViews for Titanium Appcelerator
// I was unhappy about there was close to no control over the "pageControl"
// in scrollableViews, so I hacked my own
// -----
var pages = [];
var page;
var numberOfPages = 0;
// Configuration
var pageColor = "#c99ed5";
PagingControl = function(scrollableView){
var container = Titanium.UI.createView({
height: 60
});
// Keep a global reference of the available pages
numberOfPages = scrollableView.getViews().length;
pages = []; // without this, the current page won't work on future references of the module
// Go through each of the current pages available in the scrollableView
for (var i = 0; i < numberOfPages; i++) {
page = Titanium.UI.createView({
borderRadius: 4,
width: 8,
height: 8,
left: 15 * i,
backgroundColor: pageColor,
opacity: 0.5
});
// Store a reference to this view
pages.push(page);
// Add it to the container
container.add(page);
}
// Mark the initial selected page
pages[scrollableView.getCurrentPage()].setOpacity(1);
// Attach the scroll event to this scrollableView, so we know when to update things
scrollableView.addEventListener("scroll", onScroll);
return container;
};
onScroll = function(event){
// Go through each and reset it's opacity
for (var i = 0; i < numberOfPages; i++) {
pages[i].setOpacity(0.5);
}
// Bump the opacity of the new current page
pages[event.currentPage].setOpacity(1);
};
module.exports = PagingControl;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment