Last active
December 15, 2015 20:49
-
-
Save jabubuck/5321252 to your computer and use it in GitHub Desktop.
Small sample that demonstrates page scrolling controlled by a slider that snaps to values along the length. For Titanium works on Android and iOS. You can do whatever you want with this code.
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
var win = Ti.UI.createWindow({ | |
fullscreen: true, | |
backgroundColor: 'gray', | |
layout: 'vertical' | |
}); | |
//This function is used to create our pages | |
function newPage(pageColor, leftPos){ | |
v = Ti.UI.createView({backgroundColor: pageColor, left: leftPos, height: Ti.Platform.displayCaps.platformHeight * 0.9, width: Ti.Platform.displayCaps.platformWidth}); | |
return v; | |
}; | |
//create the pages | |
var page1; var page2; var page3; var page4; var page5; var page6; var page7; var page8; | |
//Add pages to an array so they can be added | |
var pageArr = [page1, page2, page3, page4, page5, page6, page7, page8]; | |
//Add the page colors to the array | |
var styleArr = ['red', 'blue', 'white', 'green', 'purple', 'yellow', 'blue', 'red']; | |
//Set the number of pages you wish to use | |
var numberOfPages = pageArr.length; | |
//Create a container view that can hold all of our pages | |
var view = Ti.UI.createView({ | |
backgroundColor: 'black', | |
left: 0, | |
height: Ti.Platform.displayCaps.platformHeight * 0.9, | |
width: Ti.Platform.displayCaps.platformWidth * numberOfPages | |
}); | |
win.add(view); | |
//Create pages and add them to the main view | |
for(var i = 0; i < pageArr.length; i++){ | |
var leftPos = Ti.Platform.displayCaps.platformWidth * i; | |
pageArr[i] = newPage(styleArr[i], leftPos); | |
view.add(pageArr[i]); | |
}; | |
//Create the slider and set the width | |
var snapSlider = Ti.UI.createSlider({ | |
min: 0, | |
max: numberOfPages - 1, | |
width: '80%', | |
center: 0, | |
value: 0, | |
bottom: Ti.Platform.displayCaps.platformHeight / 10 | |
}); | |
win.add(snapSlider); | |
snapSlider.addEventListener('touchend', function(e){ | |
this.value = Math.round(e.source.value);//This allows the slider to snap to set points | |
//We then animate the view to display the correct page | |
view.animate({left: -Ti.Platform.displayCaps.platformWidth * this.value, duration: 1000}); | |
}); | |
win.open(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment