首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

HTML5 App实战(五):待办(TODO)

2013-09-06 
HTML5 App实战(5):待办(TODO)TODO是一个很常用的应用程序,这里用“画app吧”开发一个简单而实用的TODO应用程

HTML5 App实战(5):待办(TODO)

TODO是一个很常用的应用程序,这里用“画app吧”开发一个简单而实用的TODO应用程序吧: 

1.用支持HTML5的浏览器(Chrome/Firefox/Safari/IE9+)打开http://www.drawapp8.com/appedit.php。

HTML5 App实战(五):待办(TODO)

选择”新建“创建一个新的app,缺省情况下的设备是iphone5(或者其它设备)。

2.现在我们把设备切换成FirefoxOS的手机。双击设备打开设备的属性对话框,在设备列表中选择firefoxOS的手机。

HTML5 App实战(五):待办(TODO)

3.选择“确定”之后,我们就可以看到iphone5变成了FirefoxOS手机了。我们不需要上面的toolbar,把它删除掉。

HTML5 App实战(五):待办(TODO)

4.现在我们向窗口上重新放一个toolbar,并在上面放一个单行编辑器和一个按钮。

HTML5 App实战(五):待办(TODO)

单行编辑器上的I Want...提示可以在属性对话框中设置。

HTML5 App实战(五):待办(TODO)

5.现在我们向窗口上放一个listview,并调整上面的控件如下图。

HTML5 App实战(五):待办(TODO)

6.现在我们开始写代码:

在窗口的onOpen事件里写些代码(这些代码其实应该放到独立的js文件,不过代码不多,我们先放在这里吧):

var = thisvar = = []= function= thisreturn= functionvar = ifthis= return= functionvar = "ui-list-view"truevar = thisvar = thisvar = thisvar = thisvar = :[]forvar = 0< this++var = this[]var = :[]= if: else : : var = :[]if: else : "default"truereturn= functionvar = = new Date= = 0= 0= this0thisvar = "ui-list-view"truevar = "ui-image-priority"this"ui-image-button"this"ui-label"= -0"default"return = functionforvar = 0< this++var = this[]if=== return return null= functionvar = thisif= !thisthisreturn = functionvar = thisif= new Datethisthisthisthisreturn = functionvar = thisifthisthisthisreturn = functionvar = "ui-list-view"truevar = var = "ui-image-priority"truevar = var = /normal.png/"hign.png"= /hign.png/"normal.png"= "ui-image-button"truevar = var = /done.png/"delete.png"= /delete.png/"done.png"this= this= this= this= thisthisreturn= 
= = = "ui-edit"true= if""
= = = "ui-edit"true= if""
= = = "ui-list-item"= 
= = = "ui-list-item"= ifelse {appInfo.makeTodoDone(id);}

7.差不多了,我们点击设备上的"预览"按钮,看看实际的运行效果。

8.我们通过菜单"文件“/”在设备上预览“生成一个URL,在实际的设备上看看效果如何。

9.最后当然是生成安装包了,菜单“云编译”/"编译FirefoxOS安装包"。

这里有我们做好的,

你也可以直接编辑

也可以在线运行

热点排行