Skip to content

Instantly share code, notes, and snippets.

@setou
Created August 15, 2012 01:51
Show Gist options
  • Save setou/3354735 to your computer and use it in GitHub Desktop.
Save setou/3354735 to your computer and use it in GitHub Desktop.
Titanium Mobile Facebook Menu UI
if (Ti.version < 1.8 ) {
alert('Sorry - this application template requires Titanium Mobile SDK 1.8 or later');
}
(function() {
var Window = require('ui/handheld/ApplicationWindow');
new Window().open();
})();
function ApplicationWindow() {
var MainView = require('ui/common/MainView')
MenuTableView = require('ui/common/MenuTableView');
var self = Ti.UI.createWindow();
var mainView = new MainView(),
menuTable = new MenuTableView();
self.add(mainView);
self.add(menuTable);
menuTable.addEventListener('click', function(e) {
switch(e.index) {
case Ti.App.MenuRowIndex.ONE:
mainView.fireEvent('ChangeText', {value:e.index});
break;
case Ti.App.MenuRowIndex.TWO:
mainView.fireEvent('ChangeText', {value:e.index});
break;
case Ti.App.MenuRowIndex.FOUR:
mainView.fireEvent('ChangeText', {value:e.index});
break;
case Ti.App.MenuRowIndex.FIVE:
mainView.fireEvent('ChangeText', {value:e.index});
break;
case Ti.App.MenuRowIndex.SEVEN:
mainView.fireEvent('ChangeText', {value:e.index});
break;
case Ti.App.MenuRowIndex.EIGHT:
mainView.fireEvent('ChangeText', {value:e.index});
break;
case Ti.App.MenuRowIndex.TEN:
mainView.fireEvent('ChangeText', {value:e.index});
break;
default :
break;
}
});
return self;
}
module.exports = ApplicationWindow;
function MainView() {
var self = Ti.UI.createView({
backgroundColor : 'white',
zIndex : 10,
});
var label = Ti.UI.createLabel({
left : 85,
height : Ti.UI.SIZE,
width : 150,
color : 'black',
text : 'value: none',
textAlign : 'center',
});
self.add(label);
var NavbarView = require('ui/common/NavbarView');
var navbar = new NavbarView();
self.add(navbar);
var menuOpened = false;
var menuOpen = function() {
self.animate({
left : 260,
curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
duration : 300,
}, function() {
menuOpened = true;
});
};
var menuClose = function() {
self.animate({
left : 0,
curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
duration : 300,
}, function() {
menuOpened = false;
});
};
navbar.addEventListener('BtnSubmenuToggle', function() {
if (menuOpened) {
menuClose();
}
else {
menuOpen();
}
});
self.addEventListener('ChangeText', function(e) {
label.text = 'value: ' + e.value;
menuClose();
});
return self;
}
module.exports = MainView;
function MenuTableView() {
var tableDataRow = [];
(function(){
for (var i=0; i<11; i++) {
var row = Ti.UI.createTableViewRow({
hasChild : false,
color : 'lightgray',
height : 44,
className : 'menu',
backgroundColor : 'black',
title : 'menu ' + i,
});
if (i%3 == 0) {
row.title = 'section ' + i,
row.height = 22;
row.backgroundColor = 'darkgray';
row.font = {fontSize:15};
row.selectionStyle = Ti.UI.iPhone.TableViewCellSelectionStyle.NONE;
}
tableDataRow.push(row);
}
Ti.App.MenuRowIndex = {
ONE : 1,
TWO : 2,
FOUR : 4,
FIVE : 5,
SEVEN : 7,
EIGHT : 8,
TEN : 10,
};
Ti.App.MenuSectionIndex = {
ZERO : 0,
THREE : 3,
SIX : 6,
NINE : 9,
};
})();
var self = Ti.UI.createTableView({
top : 0,
left : 0,
height : Ti.UI.FILL,
width : 260,
data : tableDataRow,
zIndex : 5,
backgroundColor : 'black',
separatorColor : 'darkgray',
});
return self;
}
module.exports = MenuTableView;
function NavbarView() {
var self = Ti.UI.createView({
top : 0,
left : 0,
height : 44,
width : Ti.UI.FILL,
backgroundColor : '#576996',
});
var btnMenu = Ti.UI.createButton({
top : 5,
left : 5,
height : 34,
width : 50,
title : 'Menu',
});
self.add(btnMenu);
var lblTitle = Ti.UI.createLabel({
top : 5,
left : 115,
height : 34,
width : 90,
text : 'UITest',
textAlign : 'center',
});
self.add(lblTitle);
btnMenu.addEventListener('click', function(e) {
self.fireEvent('BtnSubmenuToggle');
});
return self;
}
module.exports = NavbarView;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment