-
-
Save wgx731/2729533 to your computer and use it in GitHub Desktop.
Nice Paging control for scrollableViews for Titanium Appcelerator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?