Titanium下拉框效果

archie2010

Titanium下拉框效果

    <div class="postText">运行效果：


app.js代码：
Titanium.UI.setBackgroundColor('#000');var win1 = Titanium.UI.createWindow({      backgroundColor:'#000'});
//创建2D矩阵var tr = Titanium.UI.create2DMatrix();tr = tr.rotate(90);
//创建下拉效果的Buttonvar 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});//创建&lsquo;Cancel&rsquo;按钮var cancel =  Titanium.UI.createButton({    title:'Cancel',    style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED});//创建&lsquo;Done&rsquo;按钮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);});//将视图、输入框添加至Windowwin1.add(picker_view);win1.add(my_combo);win1.open();