/alloy-widget-drawermenu

An Appcelerator Alloy Widget to implement a slide-in, drawer-style menu

Primary LanguageJavaScript

DrawerWidget

This is an Appcelerator Alloy widget to implement a nice "drawer-type" menu on you iOS and Android Apps. This new version 2.0 was a bit refactored, simplifying the way you interact with the widget, and adding swipe functionality.

Demo

This Widget exposes two views: drawermenuview and drawermainview

Before you get started

The demo at /demo shows the menu running on iOS with a simple yet practical scenario of two menu options and responding to click events. For Android after Titanium SDK 3.3.0, you MUST use the ActionBar which is displayed by default on Android apps, and it's somewhat difficult to hide (I blogged about this here). So, for Android you have two options: check the example in /ActionBar Demo, or better yet, don't use this widget for Android and use Android's native Drawer Layout exposed by this module.

Getting started

This widget simply gives you a container to which you can add two views: the menu view and the main view. Open/Close of the menu can be triggered by either a button you add to your main view, or by swiping with your finger.

Assuming you have a view called menu and a view called main, simply add this to the index.js of your app:

$.drawermenu.init({
    menuview:menu,
    mainview:main,
    duration:200,
    parent: $.index
})

That's all. At this point you have a swipeable area that shows the menu by swiping to the right.

If you add a "menu button" to your main view, simply add an event listener like this:

	var menubutton.addEventListener('click',function(e){
		$.drawermenu.showhidemenu();
	})

ActionBar

In the ActionBar Demo folder you'll find an example of how to trigger the Drawer Menu from the ActionBar

ActionBar Demo

Want to try it for yourself? Download the APK.

Apps

Send me a link to your app, or a pull request of the README.md file to showcase your app using this Widget.

Contribuitors

License

MIT - http://alco.mit-license.org