Created
October 15, 2012 18:15
-
-
Save meeech/3894108 to your computer and use it in GitHub Desktop.
sidemenu distilled
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
//Barebones example of how we do sidemenu in iOS app. | |
//You use this window as the container for your navGroup. | |
var rootWin = Titanium.UI.createWindow({ | |
zIndex: 2, | |
width: '100%', | |
backgroundColor: '#f00', | |
listPanelVisible: false //Custom prop | |
}); | |
//Container to make listDrawer available globally. | |
//Shove your Table view in this. | |
var listsDrawer = Ti.UI.createWindow({ | |
navBarHidden: true, | |
backgroundColor: '#0f0', | |
modal: false, | |
left: 0, | |
width: 200, | |
zIndex: 1 | |
}); | |
//Use this to cover the 'visible' part of rootWin. | |
//You would add a dropshadow to this for nice effect. | |
//In this example, i've just coloured it. | |
listsDrawer.clickTrap = function() { | |
var win = Ti.UI.createWindow({ | |
backgroundColor: "#00f", //For illustration, making it bgcolor, but you can leave it transparent | |
opacity: 0.5, //for example | |
left: 200 - 12, //To account for the dropshadow | |
right: 0, | |
top: 0, | |
bottom: 0 | |
}); | |
var ds = Ti.UI.createView({ | |
backgroundImage: '/images/dropshadow.png', | |
width: 12, | |
left: 0, | |
top: 0, | |
right: 0, | |
touchEnabled: false | |
}); | |
win.add(ds); | |
win.open(); | |
return win; | |
}; | |
rootWin.hideNav = function() { | |
rootWin.clickTrap.hide(); | |
rootWin.clickTrap.close(); | |
rootWin.animate({ | |
duration: 200, | |
left: 0 | |
}); | |
rootWin.listPanelVisible = false; | |
rootWin.clickTrap = false; | |
}; | |
var showNavAnimEnd = function(e) { | |
rootWin.clickTrap = listsDrawer.clickTrap(); | |
rootWin.clickTrap.addEventListener('click', function(e) { | |
rootWin.hideNav(); | |
}); | |
}; | |
rootWin.showNav = function() { | |
rootWin.listPanelVisible = true; | |
rootWin.animate({ | |
duration: 200, | |
left: 200 | |
}, showNavAnimEnd); | |
}; | |
rootWin.addEventListener('click', function() { | |
rootWin.showNav(); | |
}); | |
listsDrawer.opacity = 0; | |
listsDrawer.open(); | |
rootWin.open(); | |
listsDrawer.opacity = 1; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment