PDA

View Full Version : vrs.ux.MenuPanel: Extension to simplify creation of ios style menus with forms



abierbaum
20 Apr 2011, 12:11 PM
On one of my current projects, I found that I needed to create a lot or "menus" in the interface with a look and feel similar to the iPhone settings menus. I was having trouble making it easy to create something that looked good and didn't take a lot of code. So I created an extension that allows for the simple creation of menus with decorations (left and right side icons) using sencha touch FormPanel and fieldsets. I also included a styling flag to allow developers to make it look a bit more like iOS. Hopefully this will prove useful for other people.

You can find links to demo and source code on github: https://github.com/vrsource/vrs.ux.touch/wiki

The code looks like:



menu_items = [
{content: 'Photo Gallery', leftIcon: 'img/flower.png', rightIcon: 'img/chevron.png'},
{content: 'Messaging', leftIcon: 'img/sms.png', rightIcon: 'img/chevron.png'},
{content: 'Allow Tracking', leftIcon: 'img/checked.png' }
]

var menu = new vrs.ux.touch.MenuPanel({
menuItems: menu_items,
listeners: {
itemTap: function(fl, index) { console.log('Tapped index: ', index); },
leftTap: function(fl, index) { console.log('Left item selected: ', index); },
}
});


http://i.imgur.com/ud5VRl.jpg

Let me know what you think. If you have ideas, please pass them along or better yet fork the code on github and try it out.

steve1964
22 Apr 2011, 2:20 PM
Hi, very well done, i'm using your plugin for a "more" tab in an app i'm developing. I've tested the plugin on iPad, iPod, Samsung Galaxy Tab and Samsung Galaxy GT 9003 and it work as expected.
Thanks a lot...

abierbaum
23 Apr 2011, 7:07 AM
Hi, very well done, i'm using your plugin for a "more" tab in an app i'm developing. I've tested the plugin on iPad, iPod, Samsung Galaxy Tab and Samsung Galaxy GT 9003 and it work as expected.
Thanks a lot...

that is great to hear. I am glad it is proving useful. :)

eyalfx
28 Jun 2011, 2:23 PM
I just started using it and whaooo... it's unbelievable.
Thank you so much for sharing it.
YOU ROCK!