Android 应用程序中有许多与众不同的动画特性，为用户了操作中的上下文语义。比如，当用户点击链接时页面向左滑动，而退出时页面向右滑动。
这些动画有滑动，页面翻转，jQtouch 或sencha 等框架便封装了这些动画。
跟随实例 简单的记录热量的应用程序--kilo
让用户根据给定的日期添加或者删除食品条目，我们网站可以做个类似记录孩子饮食，算营养的小工具。。
面板的概念: 应用程序由各种面板组成，而面板又是由直属于body下的div元素组成一。
Home,setting ,Dates Date,New Entry 面板
一、引入jqtouch
组成总分 jquery,jqtouch.js ,jqtouch.css 主题 jqt/theme.css
1、下载jqtouch www.jqtouch.com
jquery 为我们制订了一系列js+css+html与手机使用相关的工具，我们可以使用它来做。
html body 下直属的div就是各面板 它定义了一些css类 toolbar,edgetodege,arrow button back
2、建立index.html
<link type="text/css" rel="stylesheet" href="jqt/jqtouch/jqtouch.css"> 基本css
<link type="text/css" rel="stylesheet" href="jqt/themes/jqt/theme.css">主题css
<script type="text/javascript" src="jqt/jqtouch/jquery-1.4.2.js"></script>
<script type="text/javascript" src="jqt/jqtouch/jqtouch.js"></script>
<script>
var jQT = $.jQTouch({
});
</script>
<body>
<div id="home"> //body后直属的div 即手机看到的面板 home
<div class="toolbar"> 工具栏 toolbar class, 是在jqtouch主题中预先定义好的，它的风格就像传统的移动手机工具栏
<h1>Kilo</h1>
</div>
<ul class="edgetoedge"> 这个ul类中做edgetoedge,告诉jqtouch在可见的区域中，这个列表从左到右展开
<li class="arrow"><a href="#about">About</a></li> arrow类让li在右边有个燕尾的符号 a 指向about面板
</ul>
</div>
<div id="about"> //body后直属子元素 about面板
<div class="toolbar"> //工具栏
<h1>About</h1> /主题
<a class="button back" href="#">Back</a> button back 类让a看上去像返回按钮，来自jQtouch的定义
</div>
<div>
<p>Kilo keeps you easy access to your food diary.</p>
</div>
</div>
</body>
3、效果图
