การใช้งาน Picker แบบ Multi Column (สำหรับ iOS เท่านั้น)
หลังจากที่เราได้รู้จักวิธีการใช้งาน Picker แบบ ธรรมดา ๆ ไปแล้ว ในบทความ การใช้งาน Picker ใน Titanium Mobile ในบทความนี้ผมจะนำเสนอการใช้งาน Picker แบบ Multi Column นะครับ
การใช้งาน Picker แบบ Multi Column นั้น ก็จะมีวิธีการเหมือนกับการใช้งาน Picker แบบธรรมดา ๆ ซึ่งก็จะเริ่มจากสร้าง Picker ก่อนครับ
การใช้งาน Picker แบบ Multi Column นั้น ก็จะมีวิธีการเหมือนกับการใช้งาน Picker แบบธรรมดา ๆ ซึ่งก็จะเริ่มจากสร้าง Picker ก่อนครับ
var picker = Ti.UI.createPicker({
bottom : 0
});
จากนั้นก็ทำการสร้างข้อมูลแบบ Multi Column แรก โดยเริ่มจากการสร้าง PickerColumn
var column1 = Ti.UI.createPickerColumn({opacity:0});
column1.addRow(Ti.UI.createPickerRow({title:'Bananas'}));
column1.addRow(Ti.UI.createPickerRow({title:'Strawberries'}));
column1.addRow(Ti.UI.createPickerRow({title:'Mangos'}));
column1.addRow(Ti.UI.createPickerRow({title:'Grapes'}));
จากนั้นทำการสร้าง PickerColumn อันที่ สอง
var column2 = Ti.UI.createPickerColumn();
column2.addRow(Ti.UI.createPickerRow({title:'red'}));
column2.addRow(Ti.UI.createPickerRow({title:'green'}));
column2.addRow(Ti.UI.createPickerRow({title:'blue'}));
column2.addRow(Ti.UI.createPickerRow({title:'orange'}));
จากนั้นก็ทำการ นำเอา Picker ทั้งสองไปใส่ใน Picker ด้วยคำสั่ง
picker.add([column1,column2]);
ก็จะได้ Picker ที่เป็น 2 Column ตามที่ต้องการแล้วครับ
ส่วนการนำค่าจาก Picker ไปใช้งานนั้นก็สามารถใช้ Event Change เพื่อนำค่าที่เลือกไปใช้งานต่อไป ดังนี้
picker.addEventListener('change',function(e)
{
alert(e.rowIndex + ' : ' + e.columnIndex);
}
0 ความคิดเห็น:
แสดงความคิดเห็น