使用JQuery Mobile实现手机新闻浏览器

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

<!-- Container page --> <div data-role="page" data-theme="b" id="containerPage"> . <!-- Content pages will go here --> </div>

　　其中，在这个div层中，使用了data-theme=“b”的属性，这个是jQuery Mobile预先为我们设置好的a,b,c,d,e5种风格属性，

　　其中这里使用的b风格，使用的是偏蓝色的风格体系，其他的4种风格体系如下所示：

• <div ... data-role="header" ... > • <div ... data-role="content" ... > • <div ... data-role="footer" ... >

　　下面我们看下具体的目录分类页的结构和代码，如下图：

<div data-role="header" id="hdrCategories" data-nobackbtn="true"> <h1>Categories</h1> <a id="buttonAddCategory" data-icon="plus" class="ui-btn-left" href="" data-role="button" data-inline="true">Add</a> </div> <div data-role="content" id="contentCategories"> <ul data-role="listview" data-split-icon="delete" data-split-theme="d" id="currentNews"></ul> </div> <div data-role="footer" id="ftrCategories"></div>

　 　在上面的代码中，其中的data-nobackbn的值设置为true, 表明这里不需要设置一个返回的按钮。而我们在增加新闻分类的按钮中(<a id="buttonAddCategory" ...>)设置了data-icon的样式为plus,即代表这个按钮中会有一个加号，而样式ui-btn-left是设置按钮在header的左 边对齐，而在页脚部分我们则留空，在本文中不设置任何东西，而你当然可以设置一些象版权声明那样的文字。

　　我们再来学习中间部分id为 contentCategories的层，在这个层中，我们使用了jQuery Mobile中的分隔listview样式，即<ul data-role="listview”……/>部分，这是一个项目列表的形式呈现在用户面前，注意data-split-icon指定用了一个 样式为删除按钮的图作为分隔，可以看到，每一行都被划分为两个部分，左边部分是显示当前的新闻分类和最新一条新闻，右边是删除按钮。

　　增加分类的页面

　　下面给出的是增加一个新闻分类的页面代码：

<!-- Category Selection --> <div data-role="header" id="hdrSelect" data-nobackbtn="true"> <h1>Select</h1> </div> <div data-role="content" id="contentSelect"> <form id="form1"> <div id="categoryDiv" data-role="fieldcontain"> <select id="category" tabindex="2"> <option value=''>Select a Category</option> <option value='topstories'>Top Stories</option> <option value='us'>U.S.</option> <option value='world'>World</option> <option value='politics'>Politics</option> ... </select> </div> <a id="buttonGetCategory" href="" data-role="button" data-inline="true">Get Category</a> </form> </div> <div data-role="footer" id="ftrSelect"></div>

　　在这个页中，有一个表单form1,其中还包含了一个下拉选择菜单，菜单中列出了Yahoo站的常见新闻分类，以供用户选择。

　　新闻页

　　我们来看新闻页的框架代码如下：

　<!-- News --> <div data-role="header" id="hdrNews" data-nobackbtn="true"> <h1>News</h1> <a id="buttonHdrShowCategories" data-icon="arrow-l" class="ui-btn-left" href="" data-role="button" data-inline="true">Back</a> </div> <div data-role="content" id="contentNews"></div> <div data-role="footer" id="ftrNews"> <a id="buttonFtrShowCategories" data-icon="arrow-l" class="ui-btn-left" href="" data-role="button" data-inline="true">Back to News Categories</a> </div>

　 　在该代码段中，我们没有使用jQuery Mobile自带的回退按钮，而是自己实现了一个按钮(id为buttonHdrShowCategories)，而其事件代码编写会在稍后的教程中讲 解。属性data-icon=“arrow-l”则使用了jQuery内置的按钮(详细的按钮列表见http://jquerymobile.com /demos/1.0a2/#docs/buttons/buttons-icons.html)。为了方便用户在移动设备中，当拖动到页面底部时，也能 够有返回的功能，因此也在页面底部同样设置了返回按钮。

　<!-- Progress --> <div data-role="header" id="hdrProgress" data-nobackbtn="true"> <h1>Processing...</h1> </div> <div data-role="content" id="contentProgress"> <div align="CENTER"><h4>Please wait.</h4></div> <div align="CENTER"><img id="spin" src="img/wait.gif"/></div> </div> <div data-role="footer" id="ftrProgress"></div>

　　新闻内容页

　　关于新闻内容页的处理，将在本系列教程的第2部分给出说明。

　　如何显示这些页面

　　接下来，我们讨论下如何在一个单独的html页中，控制上述介绍的各个页面的显现和隐藏，方法是使用Javascript,代码如下：

</script>

　　可以看到，我们在Javascript中，用变量保存了各个层的id名称，如果要隐藏某个页面，只需要简单调用jQuery提供的方法hide()就可以了，比如，要隐藏目录页：

　　function hideCategories(){ hdrCategoriesVar.hide(); contentCategoriesVar.hide(); ftrCategoriesVar.hide(); }

　　同理，其余的各层，也是调用相同的代码进行隐藏，比如：

function hideSelect(){ hdrSelectVar.hide(); contentSelectVar.hide(); ftrSelectVar.hide(); } ... function hideNews(){ hdrNewsVar.hide(); contentNewsVar.hide(); ftrNewsVar.hide(); } ... function hideProgress(){ hdrProgressVar.hide(); contentProgressVar.hide(); ftrProgressVar.hide(); }

　　而为了显示某一层，只需要调用jQuery.show()方法即可，比如：

function showCategories(){ hideSelect(); hideProgress(); hideNews(); hdrCategoriesVar.show(); contentCategoriesVar.show(); ftrCategoriesVar.show(); }

　 　当然，我们这个例子中实现的是在同一个页面中，使用多个不同的层的技术，然后在各层之间进行导航，jQuery Mobile也支持在不同的页面中实现导航，具体的请参考：jQuery的帮助文档(http://jquerymobile.com/demos /1.0a2/#docs/pages/docs-navmodel.html)

　　小结

　 　在本文中，我们简单介绍了我们这个项目的结构和页面流程，并且复习了一些jQuery Mobile的基本用法，把页面的基本结构都设计好了，在下一篇教程中，将详细介绍jQuery Mobile和其他相关插件如何配合一起，先实现一个web版本的新闻浏览器。敬请关注我们后续的文章报道！