gistfile1.js

// WIDGET CONTROLLER

$.init = function(_params) {
  $.tabs       = [];
	$.menuImages = [];

	for(var i = 0; i < _params.tabs.length; i++) {
		var tab = Ti.UI.createTableViewRow({
			id: _params.tabs[i].id,
			height: "47dp",
			backgroundColor: "#2E2E2E",
			backgroundSelectedColor: "#1E1E1E",
			selectedBackgroundColor: "#1E1E1E"
		});
		
		var iconWrapper = Ti.UI.createView({
			width: "28dp",
			height: "28dp",
			top: "9dp",
			left: "7dp",
			touchEnabled: false
		});

		var icon = Ti.UI.createImageView({
			image: _params.tabs[i].image_off,
			width: Ti.UI.SIZE,
			height: "30dp",
			top: 0,
			touchEnabled: false,
			preventDefaultImage: true
		});
		
		var label = Ti.UI.createLabel({
			text: _params.tabs[i].title,
			top: "0dp",
			left: "47dp",
			right: "7dp",
			height: "47dp",
			font: {
				fontSize: "20dp",
				fontWeight: "bold"
			},
			color: "#BBB",
			shadowColor: "#1E1E1E",
			shadowOffset: {
				x: "0dp",
				y: "1dp"
			},
			touchEnabled: false
		});
		
		iconWrapper.add(icon);
		tab.add(iconWrapper);
		tab.add(label);
		
		$.tabs.push(tab);
		
		$.menuImages.push({
		    icon: icon,
		    imageOff: _params.tabs[i].image_off,
		    imageOn: _params.tabs[i].image_on || _params.tabs[i].image_off
		});
		
		if (_params.tabs[i].selected) {
		    $.setMenuOn(i);
		}
	}
	
	if (_params.hasOwnProperty('header_title')) {
	    $.createHeaderView(_params.header_title);
	}
	
	$.Tabs.setData($.tabs);
  
  $.createSettings();
};

$.createHeaderView = function(header_title) {
    var headerView = Ti.UI.createView({
        backgroundColor: 'transparent',
        height: "68dp",
        touchEnabled: false
    });
    
    headerView.add(Ti.UI.createLabel({
        text: header_title,
        width: '100%',
        textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
        font: {
            fontSize: "24dp",
            fontWeight: "bold"
        },
        touchEnabled: false
    }));

    $.Tabs.setHeaderView(headerView);
};

$.createSettings = function() {
	var tab = Ti.UI.createTableViewRow({
		id: "settings",
		height: "47dp",
		backgroundColor: "#2E2E2E",
		backgroundSelectedColor: "#1E1E1E",
		selectedBackgroundColor: "#1E1E1E"
	});

	var icon = Ti.UI.createImageView({
		image: WPATH("images/settings.png"),
		width: "28dp",
		height: "28dp",
		top: "9dp",
		left: "7dp",
		touchEnabled: false,
		preventDefaultImage: true
	});

	var label = Ti.UI.createLabel({
		text: "Settings",
		top: "0dp",
		left: "47dp",
		right: "7dp",
		height: "47dp",
		font: {
			fontSize: "14dp",
			fontWeight: "bold"
		},
		color: "#BBB",
		shadowColor: "#1E1E1E",
		shadowOffset: {
			x: "0dp",
			y: "1dp"
		},
		touchEnabled: false
	});

	tab.add(icon);
	tab.add(label);

	$.Tabs.appendRow(tab);
};

$.clear = function() {
	$.Tabs.setData([]);
};

$.setIndex = function(_index) {
	$.Tabs.selectRow(_index);
};

$.setMenuOn = function(_index) {
    for (var i = 0; i < $.menuImages.length; i++) {
        var icon     = $.menuImages[i].icon;
        var imageOff = $.menuImages[i].imageOff;
        var imageOn  = $.menuImages[i].imageOn;

        _index == i ?
            icon.setImage(imageOn) :
            icon.setImage(imageOff);
    }
};

$.Tabs.addEventListener("click", function(_event) {
	if(typeof _event.index !== "undefined") {
		$.setIndex(_event.index);
		$.setMenuOn(_event.index);
	}
});

// END WIDGET CONTROLLER

// HOW CONFIGURE

function createTabs() {
    tabs.push({
        id: 1,
        title: 'Feed',
        image_off: "/menu/icn_menu_home_off.png",
        image_on: '/menu/icn_menu_home_on.png',
        controller: 'feed',
        selected: true
    });
    
    tabs.push({
       id: 2,
       title: 'Membros',
       image_off: "/menu/icn_menu_members_off.png",
       image_on: "/menu/icn_menu_members_on.png",
       controller: 'member'
    });
    
    tabs.push({
       id: 3,
       title: 'Grupos',
       image_off: "/menu/icn_menu_groups_off.png",
       image_on: "/menu/icn_menu_groups_on.png",
       controller: 'group'
    });
    
    return tabs;
}

function initMenu() {
    $.menu_slider.init({
        tabs: createTabs(),
        header_title: 'SocialBase'
    });
    
    Alloy.Globals.menu_slider.Wrapper.left = '0dp';
}