使用Titanium开发简单实例

移动开发
从该实例当中你将学会如何创建一个窗口视图,在窗口里添加一个输入框,一个表格,并为输入框和表格添加相应的事件。

今天我们来学习创建一个简单的titanium实例。

从该实例当中你将学会如何创建一个窗口视图,在窗口里添加一个输入框,一个表格,并为输入框和表格添加相应的事件。

一、创建一个工程,并且把系统自动生成的代码全部删除

二、在app.js文件里编写代码

1、创建一个窗口并且设置背景图片

varwin=Ti.UI.createWindow({

backgroundImage:"background.png"

});

2、创建输入框

varcasella=Ti.UI.createTextField({

hintText:"输入你的消费清单",//提示文字

borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED,//

top:20,//离顶部的距离

height:80,//高度

width:"90%"//宽度

});

3、创建表单视图

vartable=Ti.UI.createTableView({

backgroundColor:"transparent",//背景颜色设为透明

top:120,//顶部距离

left:20,//左边距离

right:20,//右边距离

bottom:40,//底部距离

editable:true//编辑状态

});

4、在窗口添加刚才的输入框和表格

win.add(casella);

win.add(table);

5、为输入框添加回车事件

casella.addEventListener('return',function(){

//添加输入框的内容到表格中并设置背景颜色和内容颜色

table.appendRow({title:casella.value,backgroundColor:"transparent",color:"#009"});

casella.value="";

casella.blur();

});

6、表格点击事件

table.addEventListener('click',function(evento){

evento.row.hasCheck=true;//点击后显示已选的提示勾

});

7、打开窗口

win.open();

运行一下程序,效果如下:在输入框输入文字回车直接添加到表格中,点击表格中的内容会显示一个勾,表示已选!

责任编辑:佚名 来源: 移动web开发社区
相关推荐

2012-04-19 10:52:52

2012-04-19 12:58:26

TitaniumJSS

2012-04-19 17:16:32

Titanium实例代码分析

2012-04-19 16:55:48

Titanium视频jQuery Mobi

2012-04-19 16:17:24

TitaniumAndroidtabbar

2012-04-19 13:55:19

TitaniumTiMVC

2012-05-17 09:09:05

Titanium单元测试

2012-04-19 16:22:12

TitaniumTabGroup

2012-05-18 10:08:56

TitaniumAndroid

2012-05-18 11:29:55

Titaniumpros

2012-05-18 11:34:03

Titaniumcons

2011-09-08 13:41:53

Widget

2012-05-18 11:16:42

@Kroll注解详解TitaniumAndroid模块

2012-05-25 13:12:57

TitaniumMobile WebHTML5

2012-02-13 14:41:50

Titanium架构分析

2013-05-23 14:50:18

2012-04-19 17:42:46

Titanium布局

2012-05-18 10:52:20

TitaniumAndroid模块自定义View模块

2012-02-09 16:45:41

2012-02-14 09:33:14

Titanium MoTitaniumUbuntu 10.0
点赞
收藏

51CTO技术栈公众号