开发基于jquerymobile+phonegap+android的应用程序（2）

在<div data-role="content">中 我是这样写的

 

<!-- content---->
<div data-role="content">

<div>

<!--fieldset1--第一行-->
<fieldset align="center" class="ui-grid-a">


<!--商家列表---->
<div class="ui-block-a center">
<a href="#businesses/index.html">
<div><img src="images/1.png" width="80" height="80" /></div>
<div>商家列表</div>
</a>
</div>
<!--/商家列表---->



<!--我的位置---->
<div class="ui-block-b center">
<a href="#mylocation/index.html">
<div><img src="images/2.png" width="80" height="80" /></div>
<div>我的位置</div>
</a>
</div>
<!--/我的位置---->

</fieldset ><!-- /--fieldset1---->




<!--fieldset2--第二行-->
<fieldset align="center" class="ui-grid-a">
<!--附近商家---->
<div class="ui-block-a">
<a href="#nearby/index.html">
<div><img src="images/3.png" width="80" height="80" /></div>
<div>附近商家</div>
</a>
</div>
<!--/附近商家---->



<!--关于我们---->
<div class="ui-block-b">
<a href="#about/index.html">
<div><img src="images/4.png" width="80" height="80" /></div>
<div>关于我们</div>
</a>
</div>
<!--/关于我们---->

</fieldset><!-- /fieldset2-- -->



</div>

</div><!-- /content---->

 

我在页面上加入四个功能，分别是商家列表、我的位置、附近商家、关于我们

1、商家列表

该功能实现以列表形式显示商家，顶部还有搜索功能，输入商家关键字就可以查询到

2、我的位置

该功能实现使用phonegap中间件调用手机定位功能，并在地图上显示用户所在位置

3、附近商家

根据“我的位置”获取到用户所在位置，列出附近商家信息

4、关于我们

程序开发的相关信息

 

效果图如下

 

完成主页面的设计我们接着将一一把功能实现