Skip to content

davidcort/com.mcongrove.slideMenu

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Parameter Type Default
nodes Array
color Object
color.headingBackground String
color.headingText String
Node Parameters:
Parameter Type Description
menuHeader String Header row text
id Number Node ID (unique)
title String Node title
image String Icon path

Methods

Function Parameters Description
clear Removes all nodes
setIndex index The index of the item to mark as selected

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.

About

A sliding menu, built on Titanium Alloy.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%