等待处理

　　前面提到过，在不同的页面之间切换时，或者在处理一些耗费时间久的操作上，一个给用户很好的操作体验是使用进度指示图(或者是进度条)等，所以这里也同样给出了一个等待的图标，代码如下：

　<!--  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>...
  ...
  var hdrCategoriesVar = $('#hdrCategories');
  var contentCategoriesVar = $('#contentCategories');
  var ftrCategoriesVar = $('#ftrCategories');

  var hdrSelectVar = $('#hdrSelect');
  var contentSelectVar = $('#contentSelect');
  var ftrSelectVar = $('#ftrSelect');

  var hdrProgressVar = $('#hdrProgress');
  var contentProgressVar = $('#contentProgress');
  var ftrProgressVar = $('#ftrProgress');

  var hdrNewsVar = $('#hdrNews');
  var contentNewsVar = $('#contentNews');
  var ftrNewsVar = $('#ftrNews');
  ...
</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版本的新闻浏览器。敬请关注我们后续的文章报道！