Skip to content

Instantly share code, notes, and snippets.

@wgx731
Forked from raulriera/PagingControl.js
Created May 19, 2012 06:05
Show Gist options
  • Save wgx731/2729533 to your computer and use it in GitHub Desktop.
Save wgx731/2729533 to your computer and use it in GitHub Desktop.
Nice Paging control for scrollableViews for Titanium Appcelerator
// Forked from https://gist.github.com/2417902 to fix a small bug
// -----
function PagingControl(scrollableView){
var pages = [];
var page;
var numberOfPages = 0;
// Configuration
var pageColor = "#c99ed5";
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);
// Reset page control to default page when scollableView refresh
scrollableView.addEventListener("postlayout", onPostLayout);
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);
};
onPostLayout = 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[scrollableView.currentPage].setOpacity(1);
};
module.exports = PagingControl;
@nehalok
Copy link

nehalok commented Nov 26, 2015

Hi,
How to scroll to particular view on click of button?
I tried using sView.scrolltoView(5); But it does not scroll to 5th view.
Could you pls help?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment