使用Titanium来开发“Path”的一些创新UI布局 - 左右菜单
“Path”是appstore中的一个流行应用，由于一些超有创意的ＵＩ布局设计，竞相被很多应用模仿。

App Sotre ：这里



首先我们先做一下这个左右菜单的效果！



左边是主菜单，右边是好友一览，能偶添加，修改，删除好友。
左边的菜单中，点击各个选项的时候，在中间的View中显示页面。右边的菜单项目点击后，迁移到其他页面。

大体上就是这么功能，那我们看看需要做多少个View：
1、初期表示的ContentView1
2、左边主菜单点击后能够显示的ContentView2
3、右边的菜单（好友一览）
4、左边的菜单（主菜单）

在初期状态下个View的重叠顺序（zIndex）顺序依次是：ContentView1、左菜单，右菜单，ContentView2.

知道了大体的页面结构后，我们开始编写代码。

1、一开始我们需要定义tab,window等变量。

friendList.addEventListener("click", function(e){  var friendWin = Ti.UI.createWindow({    backgroundColor: "#123456"  });  var backButton = Ti.UI.createButton({    top: 7,    left: 5,    width: 40,    height: 31,    title: "B",  });  friendWin.add(backButton);  backButton.addEventListener("click", function(){    friendWin.close();  });  friendWin.addEventListener("open", function(){    setTimeout(function(){ leftView.hide(); rightView.hide();      rightView.showed = false;      currentShowView.left = 0;    }, 500);  });  friendWin.addEventListener("close", function(){    leftView.show(); rightView.show();  });  tab.open(friendWin, {animated:true});});

按下好友一览的代码部分中，代码有些杂七杂八的。

定义window然后表示，再做一个返回按钮等。

window 在 open 之后， 使用的setTimeout函数功能比较微妙。他是在window从右滑动过来的动画结束后吧左右菜单隐藏，然后把ContentView显示在中间位置的功能。这样一览，在 window关闭后，跳过好友一览的心事而能很炫的把ContentView显示出来。close事件中只是做了一下隐藏处理。

细节的地方可能说的不够详细，大家可以看看完整的代码。

完整的代码：[url=http://dl.iteye.com/topics/download/16be7cea-5147-3bb8-b013-8de219858145]app.js[/b]