Skip to content

Instantly share code, notes, and snippets.

@bob-sims
Created February 23, 2011 23:48
Show Gist options
  • Save bob-sims/841456 to your computer and use it in GitHub Desktop.
Save bob-sims/841456 to your computer and use it in GitHub Desktop.
a .js include file for use in Appcelerator Titanium cross-platform mobile apps to create option menus. Option menus display at the bottom of the screen in iPhone and when you press the menu button in an Android app. Credit to Justin Toth.
/*
// Credit to Justin Toth.
// My own edits have been only slight: added property for image (icon) attached to menu item button
To use:
Ti.include('menu.js');
function createMenu() {
menu.setTiVersion(1.4);
menu.init({
buttons: [
{
title: "Refresh",
icon: "refresh.png",
clickevent: function () { refresh(true); }
},
{
title: "Logout",
icon: "logout.png",
clickevent: logout
}
]
});
}
*/
var menu = {
isAndroid: Ti.Platform.name == 'android',
win: Ti.UI.currentWindow,
data: [],
tiVersion: 1.5,
init: function (params) {
if (!menu.isAndroid) {
//create iphone menu.
var index = 0;
var flexSpace = new Button({ systemButton: Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE });
menu.data[index++] = flexSpace;
for (var k = 0; k < params.buttons.length; k++) {
menu.data[index] = new Button({ title: params.buttons[k].title, style: Ti.UI.iPhone.SystemButtonStyle.BORDERED });
menu.data[index].addEventListener("click", params.buttons[k].clickevent);
index++;
menu.data[index++] = flexSpace;
}
menu.win.setToolbar(menu.data);
}
else {
//create android menu.
if (menu.tiVersion >= 1.5) {
//ti 1.5 has new way to create menu.
var activity = Ti.Android.currentActivity;
activity.onCreateOptionsMenu = function (e) {
var optionsmenu = e.menu;
for (var k = 0; k < params.buttons.length; k++) {
menu.data[k] = optionsmenu.add({ title: params.buttons[k].title });
menu.data[k].setIcon(params.buttons[k].icon);
menu.data[k].addEventListener("click", params.buttons[k].clickevent);
}
}
}
else {
//pre-ti 1.5 way to create menu.
var optionsmenu = Ti.UI.Android.OptionMenu.createMenu();
for (var k = 0; k < params.buttons.length; k++) {
menu.data[k] = Ti.UI.Android.OptionMenu.createMenuItem({ title: params.buttons[k].title, icon: params.buttons[k].icon })
menu.data[k].addEventListener("click", params.buttons[k].clickevent);
optionsmenu.add(menu.data[k]);
}
Ti.UI.Android.OptionMenu.setMenu(optionsmenu);
}
}
},
setTiVersion: function (value) {
//only need to set this if using android and an older version of ti than 1.5.
menu.tiVersion = value;
}
};
@sr3d
Copy link

sr3d commented Mar 9, 2011

cool! It helps me sorting out the menu for my app.

@sr3d
Copy link

sr3d commented Mar 9, 2011

btw, do you know how to do the layout for the buttons? E.g. I'd like to have the first row of 2 buttons, then the 2nd row of 3 buttons (similar to the Yahoo Mail! app, for example)

@bob-sims
Copy link
Author

Sorry, I've only tested this a bit, don't know about multiple rows.

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