Titanium drop-down box Effect

Running effect:

 

App. js code:

Titanium. UI. setbackgroundcolor ('# 000'); var win1 = titanium. UI. createwindow ({backgroundcolor:' #000 '});
// Create a 2D matrix var TR = titanium. UI. create2dmatrix (); Tr = tr. Rotate (90 );
// Create the buttonvar drop_button = titanium for the drop-down effect. UI. createbutton ({style: titanium. UI. iPhone. systembutton. disclosure, transform: TR}); // create an input box and set var my_combo = titanium. UI. createtextfield ({hinttext: "select one", height: 40, width: 300, top: 20, borderstyle: titanium. UI. input_borderstyle_rounded, rightbutton: drop_button, rightbuttonmode: titanium. UI. input_buttonmode_always}); // create a view var picker_view = titanium. UI. createview ({Height: 251, bottom:-251}); // create the 'cancel' button var cancel = titanium. UI. createbutton ({Title: 'cancel', style: titanium. UI. iPhone. systembuttonstyle. bordered}); // create the 'done' button var done = titanium. UI. createbutton ({Title: 'done', style: titanium. UI. iPhone. systembuttonstyle. done}); // create a space button var spacer = titanium. UI. createbutton ({systembutton: titanium. UI. iPhone. systembutton. flexible_space}); // create a tool bar var toolbar = titanium. UI. createmedilbar ({top: 0, items: [cancel, spacer, done] // content in the toolbar}); // create a picker selector var picker = titanium. UI. createpicker ({top: 43}); picker. selectionindicator = true;
// Selector data 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 '})]; // sets picker. add (picker_data );
// Add the toolbar to the view picker_view.add (toolbar );
// Add the picker selector to the view picker_view.add (picker); // create the slide-in screen effect var slide_in = titanium. UI. createanimation ({bottom: 0 });
// Create a slide-out screen effect var slide_out = titanium. UI. createanimation ({bottom:-251}); // Add a focus event my_combo.addeventlistener ('focal ', function (){
// Picker_view slide-screen picker_view.animate (slide_out) ;}); // Add the event drop_button.addeventlistener ('click', function () {// picker_view slides into the screen
Picker_view.animate (slide_in );
// Lose the focus of the input box my_combo.blur () ;}); // cancel the event: picker_view slides out of the screen cancel. addeventlistener ('click', function () {picker_view.animate (slide_out) ;}); // select an event: Assign the value selected by the selector to the input box and let the picker_view slide out of the view done. addeventlistener ('click', function () {my_combo.value = picker. getselectedrow (0 ). title; picker_view.animate (slide_out) ;}); // Add the view and input box to windowwin1.add (picker_view); win1.add (my_combo); win1.open ();