下面我们来看一下具体demo的开发过程

由于之前开发过预约订餐的demo，想着也可以试试预约住宿的APP，如果要重新设计很麻烦，而且也只是想搞一个demo，并不发布上线，就在应用商店里搜寻到一个很新颖的应用，仿照着做。找到我们的UI美女把全部的图片切给我，接下来就是开发了。

其中一个页面使用了侧滑菜单控件SlidingMenu （http://www.imagapp.com/doc/slidingmenu）来完成信息导航（如下图）。SlidingMenu定义了两个item，第一个item一开始是隐藏的，当点击左上角按钮时调用open()方法显示侧滑菜单，当然，SlidingMenu本身就带了滑动的效果，右滑就可以响应出侧边栏。如果使用原生的话，Android倒是提供了HorizontalScrollView，虽然不用手动处理各种冲突，但也要了解事件的分发机制。

下图使用了弹出菜单控件popupmenu（http://www.imagapp.com/doc/popupmenu），内容填充部分一个列表list搞定，可以自己设置list的背景，边距，文字颜色等样式。

上图中的产品类型选择由上拉菜单控件actionmenu（http://www.imagapp.com/doc/actionmenu）展示，ActionMenu控件用来显示iOS ActionSheet风格的上拉菜单，风格固定，不能自己定制背景和样式，并且只能通过Javascript脚本动态创建。效果图如下

下面的几张效果图相对来说就很简单了，大多数布局都是用的list控件实现的，跳转页面使用onclick="$page.open('')"方法。个别页面加入了screen控件来展示多组图片。

<?xml version="1.0" encoding="utf-8"?>

<page>

<left>

<label style="font-size:18;color:#3a3a3a;margin-left:32">邀请好友</label>

</title>

<list type="transparent" style="padding:0 18">

<row><button style="background:#ff5a5f;height:44;width:100%;font-size:15;color:#ffffff;align:center;padding-top:2">邀请联系人</button></row>

<row>

<label style="color:#727a7e;font-szie:15;align:center;margin:0 10">或</label>

</row>

<row><label style="color:#4d5153;font-size:13;align:center">分享链接</label></row>

<item style="padding:15 0;col-width:*,3,50">

<col></col>

<col><row style="height:44;background:#ffffff"><icon src="share.png" style="align:center"/></row></col>

<item style="margin-top:15;padding:0 0 44">

<row style="background:#c9ccc7;height:1"></row>

<row><label style="font-size:15;color:#7a8286;align:center">您有旅行基金即将到账</label></row>

<row><label style="font-size:15;color:#ff4c51;align:center">查看过去的邀请</label></row>

</list>

</content>

</imag>

更详细的源码链接:https://github.com/imagjs/Housing-resources