javascript原生移动云编程5 - 如何做互动按钮和页面跳转

用javascript在码实云平台上，可以在云里编写原生的移动应用。移动应用必然涉及到用户的互动。下面实例中，做了两个按钮。按下第一个按钮“秘密机关”会显示隐藏的第二个按钮“紧急逃生”，而“紧急逃生”按钮按下会跳转页面。

Class.create(Mash5.Widget, {
initialize : function (config, params) {
var container = Ti.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
backgroundColor : '#ddd'
});
this.setContentView(container);

var button1 = Ti.UI.createView({
top: '50%',
width: '160dip',
height: '40dip',
backgroundColor : '#44f',
borderRadius: dipToPx(20),
});
container.add(button1);
button1.add(Ti.UI.createLabel({
text : '秘密机关在此',
color : '#fff',
font : {
fontSize : '20dip',
fontWeight: 'bold'
},
}));

var button2 = Ti.UI.createView({
top: '30%',
width: '160dip',
height: '40dip',
backgroundColor : '#f44',
borderRadius: dipToPx(20),
visible: false, // 初始设为不可见
});
container.add(button2);
button2.add(Ti.UI.createLabel({
text : '紧急逃生',
color : '#fff',
font : {
fontSize : '20dip',
fontWeight: 'bold'
},
}));

// 按钮button1的交互事件处理，实现用户互动
button1.addEventListener('click', function() {
if (button2.visible)
button2.hide();
else
button2.show();
});

// 按钮button2的交互事件处理，实现页面跳转
var context = this.getContext();
button2.addEventListener('click', function() {
context.startPage({
nameSpace: 'mashDeveloper.views.BasicView.zhinengxiaoche_1406856699707'
});
});
}
})

显然，按钮也是用View做出来的，按钮上面用Label写有文字。博客的内容框是content_box1。做第二个按钮时，注意View里面的属性visible: false，这个View初始不显示。第一个按钮的互动实现用个事件处理器button1.addEventListener，侦听的事件是'click'，也就是点击事件。一旦手机屏幕点击了这个按钮的View，就会执行function()里面的代码。动作就是判断button2.visible，如果第二个按钮已经可见，让它隐藏，否则，让它显示。

第二个按钮的动作是跳转页面。页面跳转用context.startPage的实现非常简单，参数里面的nameSpace是一个页面的全名，即命名空间。这个长名字可以在“页面”工具栏里看到。码实平台里，所有的构件都用命名空间来标识，以后详细介绍。