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();