Skip to content

Instantly share code, notes, and snippets.

@setou
Created August 30, 2012 16:02
Show Gist options
  • Save setou/3531749 to your computer and use it in GitHub Desktop.
Save setou/3531749 to your computer and use it in GitHub Desktop.
Titanium Mobile Facebook Menu UI (fix?
/*
* Facebookアプリ風のメニューを作る。
* Titanium Studio で新規プロジェクトを作成して、
* その際に Master / Detail Application テンプレートを指定してください。
* その後、このファイルを ui/handheld/ios/ApplicationWindow.js に上書きします。
* メニュー用のTableViewは使用者が作成・追加してください。
*/
function ApplicationWindow() {
var MasterView = require('ui/common/MasterView'),
DetailView = require('ui/common/DetailView');
var self = Ti.UI.createWindow({
backgroundColor:'#ffffff'
});
// background
var backWindowLable = Ti.UI.createLabel({text:'hoge'});
var backWindow = Ti.UI.createWindow({
backgroundColor : 'lightgray',
visible : false,
});
backWindow.add(backWindowLable);
backWindow.open();
// Master
var masterView = new MasterView();
var masterContainerWindow = Ti.UI.createWindow();
masterContainerWindow.add(masterView);
var titleLabel = Ti.UI.createLabel({
text : 'Products',
});
masterContainerWindow.titleControl = titleLabel;
var menuButton = Ti.UI.createButton({
image : 'images/btn_menu.png',
backgroundColor : 'transparent',
});
masterContainerWindow.leftNavButton = menuButton;
// Detail
var detailView = new DetailView();
var detailContainerWindow = Ti.UI.createWindow({
title:'Product Details'
});
detailContainerWindow.add(detailView);
// NabigationGroup
var navGroup = Ti.UI.iPhone.createNavigationGroup({
window:masterContainerWindow
});
self.add(navGroup);
// EventListener
masterView.addEventListener('itemSelected', function(e) {
detailView.fireEvent('itemSelected',e);
navGroup.open(detailContainerWindow);
});
var menuToggle = false;
menuButton.addEventListener('click', function() {
if (menuToggle) {
self.animate({
left : 0,
curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
duration : 300,
}, function(){
menuToggle = false;
titleLabel.visible = true;
backWindow.visible = false;
});
}
else {
titleLabel.visible = false;
backWindow.visible = true;
self.animate({
left : Ti.Platform.displayCaps.platformWidth-60,
curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
duration : 300,
}, function(){
menuToggle = true;
});
}
});
return self;
};
module.exports = ApplicationWindow;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment