com.mcongrove.slideMenu

com.mcongrove.slideMenu copied to clipboard

NOTICE:

This widget only supports applications that utilize views instead of windows. As such, it is probably not suitable for most applications.

Slide Menu Widget

A custom slide menu widget for Titanium Alloy.

Example Usage

Alloy View (XML)

<Alloy>
	<Window id="MainWindow">
		<Require type="widget" src="com.mcongrove.slideMenu" id="SlideMenu" />
		
		<View id="AppWrapper">
			<!-- Content Goes Here -->
		</View>
	</Window>
</Alloy>

Initialize Menu (JS)

// Create our node items
var nodes = [
	{ menuHeader: "My Tabs", id: 0, title: "Home", image: "/images/home.png" },
	{ id: 1, title: "Contact", image: "/images/phone.png" },
	{ id: 2, title: "Settings", image: "/images/gear.png" }
];

// Initialize the slide menu
$.SlideMenu.init({
	nodes: nodes,
	color: {
		headingBackground: "#000",
		headingText: "#FFF"
	}
});

// Set the first node as active
$.SlideMenu.setIndex(0);

// Add an event listener on the nodes
$.SlideMenu.Nodes.addEventListener("click", handleMenuClick);

// Handle the click event on a node
function handleMenuClick(_event) {
	if(typeof _event.row.id !== "undefined") {
		// Open the corresponding controller
		openScreen(_event.row.id);
	}
}

Slide Animation Code Example (JS)

function openMenu() {
	$.AppWrapper.animate({
		left: "200dp",
		duration: 250,
		curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
	});
	
	$.SlideMenu.Wrapper.animate({
		left: "0dp",
		duration: 250,
		curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
	});
}

function closeMenu() {
	$.AppWrapper.animate({
		left: "0dp",
		duration: 250,
		curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
	});
	
	$.SlideMenu.Wrapper.animate({
		left: "-200dp",
		duration: 250,
		curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
	});
}

$.AppWrapper.addEventListener("swipe", function(_event) {
	if(_event.direction == "right") {
		openMenu();
	} else if(_event.direction == "left") {
		closeMenu();
	}
});

Options

Node Parameters:

Methods

Changelog

• 1.1
  • Initial commit as separate module; see ChariTi for previous versions

License

Copyright 2013 Matthew Congrove

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.