Okay, so if you want to use this component you will need to download OptionsMenu.js from the above link, place it in your assets/www folder then add the script tag after cordova.js in your HTML file.
Next you will want to create you menu. For my purposes I've used the settings/help example like the previous two posts on menus. To do it you add some code into your to the method that is listening for the "deviceready" event. Something like this:
and that will produce a menu that looks like this:
But let's dig in a bit of that call to create a new OptionsMenu. The magic is in the JSON object passed to the construction. Obviously the "id" is used to set the ID of the div that will hold the menu items. Then the items array will contain all of the menu items you want to display. Each menu item has three properties, image is a url the icon you want to display in the item, label which is the text which is shown under the image and finally action which is a JavaScript function that is called when the item is tapped.
So that's it, you have a fully functioning HTML/CSS/JS only options menu just by including an additional JavaScript file. Like I said the code is up on github and it is not perfect. Feel free to submit issues as I'm going to pick away at making it more robust after I take a mini vacation.
Update: So I realized the menu really should support multiple rows just like a real Android options menu so I just pushed an update to my code on Github to support it. Instead of an array being sent to the constructor of the OptionsMenu you send a multi-dimensional array like so:
and then it looks like this:
You will also notice the icons are a bit smaller. I'm checking for the size of the screen and adjusting the icon width and height accordingly.
Hi :)
ReplyDeletethe menu works fine and it is a really great alternative for the native menu but one thing that isn't working for me are the functions for each button. Pressing a menu button doesn't do anything, I tried to show an alert, but pressing the button just closes the menu.
Am I missing something?
@webworker
ReplyDeleteReally, I can't reproduce that? What does your code look like?
I've updated your example with 2 fixes.
ReplyDeleteOne is removing the trailing comma in the items array.
Second, define variables before using them, or define them as functions. This mite solve any issues @webworker mite have.
https://gist.github.com/4176054
@jerone
ReplyDeleteCool, thanks for catching the trailing comma. I fixed that in the gist as well. Then I moved the function definitions above the menu creation but I'm not sure if that will have any effect.
Im trying to implement it on my android webapp but i cant. When i press the menu, it shows: UNDEFINED on a (3x2) table.
ReplyDeleteon index.html reference optionsMenu.js
on my js put the code at: function onDeviceReady() {
Can anyone help me??? Thanks
@Rubén
ReplyDeleteShow the full error you are getting in "adb logcat".
ReplyDeleteVery nice tutorial you can also check this one at
http://www.pavanh.com/2012/10/android-menu.html
I am trying this example in my application but i can't get it.
ReplyDeletewhen press menu option getting error like
-Can't open keycharmap file
-Error loading keycharmap file'system/usr/keychars/himax-touchscreen.kcm.bin'hw.keyboard.65537.devname='himax-touchscreen'
where am doing mistake can you please tell me
thanks in advance
@a srikanth
ReplyDeleteWhen you are creating your emulator use the one listed as "Google API" for your Android level and this should go away.
I am running on device, not on emulater :(
ReplyDelete@a srikanth
ReplyDeleteSorry, I've never seen that before, what device and version of Android does it run?
this is what my html page i used,please once go throw the following let me know any changes please,i am not able to move forward
ReplyDeletemy device is htc explorer version of android is 2.3.5
thanks in advance
function load() { document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
var optionsmenu = new OptionsMenu({
id : "optionsmenu",
items : [ [ { label : "Settings",
image : "images/settings.png",
action : onSettings
}, {
label : "Help",
image : "images/help.png",
action : onHelp
} ], [ {
label : "Row 2", image : "images/settings.png", action : onHelp
} ], [ {
label : "Row 3",
image : "images/settings.png",
action : onSettings
}, {
label : "More Help",
image : "images/help.png",
action : onHelp
}, {
label : "Even More Help",
image : "images/help.png",
action : onHelp
} ], ]
});
}
try hitting your menu button...
@a srikanth
ReplyDeleteYou need to put it in a gist as the html is escaped.
Hi Simon, can you post all the files in this example, i.e. the full working example files. I’ve tried like hell to get this working but I’m struggling. My knowledge of CSS, HTML & JAVESCRIPT programming is somewhat limited as I am self taught. I’m using Adobe Dreamweaver 5.5, and need an ‘option menu’ button for my current app. I’m writing for android on my Galaxy S3 Mini. It would be great to have this app finished and working. Many thanks in advance for your help.
ReplyDelete@Paul F
ReplyDeleteWell all the JS code is posted and the steps to get it going are in the blog post. Why don't you post up a gist of your code and I'll see if I can point out where you are going wrong.