【IT168 专稿】jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作，在本文中，笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机上运行的新闻浏览器，这个新闻浏览器会读取Yahoo网站上以RSS方式提供的新闻。

　　jQuery Mobile项目目前的最新版本是alpha 3版本，该项目的主要目的是为了能轻易地实现能在不同的移动操作系统上运行的应用程序，比如能在Android,iOS和黑莓手机上运行。而本文的重点是介绍如何在Android上运行程序。本系列文章将以如下的结构进行教学：

　　首先，我们会向大家介绍jQuery Mobile中的基本的UI框架元素。为了达到这个目的，我们先会学习如何做一个Web应用，这个Web应用使用了Ajax和php技术，向Yahoo的服务器发起请求，然后会把Yahoo的RSS返回的新闻列表，其实是XML格式的文件返回进行解析。其中我们会学习使用jquery-dotimeout-plugin这个插件去实现当不断有最新的新闻返回时，而呈现的过渡渐变效果。同时我们还会使用DST.js plugin这个插件，去保存用户选择的要阅读的新闻分类。这个Web应用程序包括了一个HTML文件，jQuery Mobile的库文件和jQuery插件，同时其中用到了php程序去发起请求并且将请求返回给html文件。最后我们提供了该应用程序在Android,iOS上的实际效果图，以说明jQuery Mobile产生的应用的效果在不同的系统上看起来都是一致的。

　　在教学系列的第2、3部分，将介绍如何将我们已经做好的web应用移植到Android上去。这里我们使用的是Android系统中的android.webkit.WebView对象容器去运行我们已经实现的HTML页面，这是一个十分方便的实现方法，同时，这里的修改只是把之前用PHP实现的ajax实现的请求改为真实的Yahoo新闻的RSS地址即可，我们也会介绍如何去设计Android的一些按钮以及其中的技巧。

　　项目的页面结构介绍

　　我们先来看下项目的页面结构，先有个初步的认识。首先，呈现在用户的第一个页面，是列出了各个分类的最新的一条新闻，如下图：

　　在上图中，使用了jQuery Mobile的split list控件，分成了左右两个区域。其中左边的是显示了用户选择的新闻分类，每个分类下面显示了最新的一条新闻，大概每隔2秒，就会以渐变过渡效果显示最新的另外一条新闻。而每个分类的右边有一个交叉的图标，当用户点这个图标时，就会把这个分类删除掉。此外，可以通过最上方的Add图标去增加一个分类。

　　当用户点了增加的按钮后，出现如下图：

　　在上图中，用户选择下拉列表中自己喜欢的新闻分类，然后点选“Get Category”按钮，这样就会将该新闻分类添加到用户喜爱的新闻分类中去。

　　而点每个分类的标题，则可以在另外一个页面中列出该分类下的所有最新新闻，如下图所示：

　　而每条新闻都有相关的新闻图片，当点每张新闻图片时，会跳转到新闻的详细连接页面，如下图：

　　要注意的是，在我们的web应用和Android程序中，当打开了新闻详细页面后，如果用户要返回，则必须点后退按钮或者是手机上的后退按钮，将会返回到分类目录的首页中。

　　下面这个图清晰地列出了整个流程：

　　注意在上图中，在页面的过渡之间，我们使用了一个小的等待的图标，这个在移动设备上是十分常见的技巧，因为移动设备资源有限不象平常的web应用一样，可能有的时候要让用户等待，这个时候用一个等待图标告诉用户现在的装载进度，是一个很好的用户体验。