Titanium下拉框效果

运行效果：

 

app.js代码：

Titanium.UI.setBackgroundColor('#000');

var win1 = Titanium.UI.createWindow({  
    backgroundColor:'#000'
});


//创建2D矩阵
var tr = Titanium.UI.create2DMatrix();
tr = tr.rotate(90);

//创建下拉效果的Button
var drop_button =  Titanium.UI.createButton({
        style:Titanium.UI.iPhone.SystemButton.DISCLOSURE,
        transform:tr
});

//创建输入框，设置右侧下拉按钮
var my_combo = Titanium.UI.createTextField({
    hintText:"选择一个",
    height:40,
    width:300,
    top:20,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
    rightButton:drop_button,
    rightButtonMode:Titanium.UI.INPUT_BUTTONMODE_ALWAYS
});

//创建视图
var picker_view = Titanium.UI.createView({
    height:251,
    bottom:-251
});
//创建‘Cancel’按钮
var cancel =  Titanium.UI.createButton({
    title:'Cancel',
    style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
//创建‘Done’按钮
var done =  Titanium.UI.createButton({
    title:'Done',
    style:Titanium.UI.iPhone.SystemButtonStyle.DONE
});
//创建一个空格按钮
var spacer =  Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});

//创建一个工具栏
var toolbar =  Titanium.UI.createToolbar({
    top:0,
    items:[cancel,spacer,done]//工具栏中的内容
});
//创建picker选择器
var picker = Titanium.UI.createPicker({
        top:43
});
picker.selectionIndicator=true;

//选择器数据
var picker_data = [
    Titanium.UI.createPickerRow({title:'MacBook'}),
    Titanium.UI.createPickerRow({title:'Lenovo'}),
    Titanium.UI.createPickerRow({title:'Samsun'}),
    Titanium.UI.createPickerRow({title:'HP'}),
    Titanium.UI.createPickerRow({title:'Sony'})
];

//设置选择器数据
picker.add(picker_data);

//添加工具栏至视图
picker_view.add(toolbar);
//将picker选择器也添加至视图
picker_view.add(picker);


//创建滑入屏幕特效
var slide_in =  Titanium.UI.createAnimation({bottom:0});
//创建滑出屏幕特效
var slide_out =  Titanium.UI.createAnimation({bottom:-251});


//给输入框添加获得焦点事件
my_combo.addEventListener('focus', function() {
　　 //picker_view滑出屏幕
    picker_view.animate(slide_out);
});
//给下拉按钮添加事件
drop_button.addEventListener('click',function() {
    //picker_view滑入屏幕
    picker_view.animate(slide_in);
　　//让输入框失去焦点
    my_combo.blur();
});
//取消事件：picker_view滑出屏幕
cancel.addEventListener('click',function() {
    picker_view.animate(slide_out);
});
//选择事件：将选择器选择的值赋给输入框，并让picker_view滑出视图
done.addEventListener('click',function() {
    my_combo.value =  picker.getSelectedRow(0).title;
    picker_view.animate(slide_out);
});
//将视图、输入框添加至Window
win1.add(picker_view);
win1.add(my_combo);

win1.open();