通讯录详细信息页
.通讯录详细信息页Detail.html页面代码如下，它分为三个部分，分别是显示已存在的详细通讯录信息页，空白的用于新建显示录入通讯录的信息页以及在删除通讯录时显示的界面，先来看显示已存在的详细通讯录信息页的代码如下：
<!-- Header for contact details -->
<div data-role="header" id="hdrDetail" data-nobackbtn="true" data-theme="c">
<h1><img align="top" src="img/contacts.png"> Details</h1>
</div>
<div data-role="content" id="contentDetail" data-theme="c">
<form id="contactForm" onsubmit="return false;">
<input id="contactId" type="hidden">
<div id="namesDiv" data-role="fieldcontain">
<table>
<tbody>
<tr>
<td>First name</td>
<td><input id="firstName" type="text"></td>
</tr>
<tr>
<td>Last<br>
name</td>
<td><input id="lastName" type="text"></td>
</tr>
<tr>
<td>Notes</td>
<td><input id="note" type="text"></td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Phone Numbers</h3>
<table id="phonesTable"></table>
</div>
注意如下几点：
· 这里的contactId是一个隐藏域，记录当前查看或修改的通讯录的ID号，在更新时必须用到。
· 这里的电话号码是一个可以展开输入的伸缩面板，使用的是
jQuery Mobile框架中的可伸缩区块的方法(具体参考：http://jquerymobile.com/demos/1.0a3/#docs/content/content-collapsible.html)。这里，为方便用户输入电话提供了更多的输入选项，当用户点“Phone Number”时，会下拉显示出更多的四种不同的通讯方式以供用户输入。只需要在代码中写入data-role="collapsible" data-collapsed="true"两个jQuery Mobile的属性即可。实际效果如下图：
我们继续来看，剩下的象EMAIL及“更多”部分，都同样使用了jQuery Mobile中的可收缩区域的技术去实现，具体代码请参考附件，这里不再列出，下面是其中的几个截图如下：
▲
最后是显示三个新增，修改及删除的按钮及页面的底部，代码如下：
<a href="javascript:generateJson();return false;" data-role="button" ><h5>Save</h5></a>
<a id="deleteButton" href="javascript:showDialog();return false;" data-role="button" ><h5>Delete</h5></a>
<a href="javascript:showListPage();return false;" data-role="button" ><h5>Cancel</h5></a>
</div>
</div>
<!-- Footer for contact details -->
<div data-role="footer" id="ftrDetail" data-theme="c"></div>
...
</div> <!-- Container page -->
· 注意这里使用了data-role="controlgroup"这一jQuery Mobile提供的属性，将三个按钮都以同一分组的形式放在同一个区域，而data-type="horizontal" 则表示以垂直的方式分组将按钮进行摆放设置。
· 三个按钮都通过Javascript实现触发。
接下来是显示进度条等待的页面，代码如下，比较简单，不详细论述。
<h1>Processing...</h1>
</div>
<div data-role="content" id="contentProgress" data-theme="c">
<div align="CENTER"><h4>Please wait.</h4></div>
<div align="CENTER">
<img alt="" id="spin" src="img/wait.gif">
</div>
</div>
<div data-role="footer" id="ftrProgress" data-theme="c"></div>
当用户要删除某条通讯录时，会出现新的页面，以询问用户是否确认删除，代码如下：
<h1>Confirm delete</h1>
</div>
<div data-role="content" id="contentDialog" data-theme="c">
<div align="CENTER">
<h4>Are you sure you want to delete this contact?</h4>
</div>
<div align="CENTER" data-role="controlgroup" data-type="horizontal">
<a href="javascript:deleteContact();return false;" data-role="button"><h5>Delete</h5></a>
<a href="javascript:showDetail();return false;" data-role="button"><h5>Cancel</h5></a>
</div>
</div>
<div data-role="footer" id="ftrDialog" data-theme="c"></div>
用Javascript控制页面的显示和隐藏
在本教程的第一讲中，已经讲解了如何通过jQuery及Javscript，控制一个页面容器中各个容器子页的显示和隐藏，这里只是简单提到复习下，详细的请参考第一篇教程。我们可以在jQuery的ready()方法中，定义一系列的变量，分别指代页面容器中各子页的头部，内容部分和页脚部分，然后由于各个部分其实都是div层的结构，所以显示时只需要调用show方法即可，隐藏时调用hide方法即可，下面是部分代码，具体代码请参考下载附件：
...
//定义变量
var contactIdVar;
<!-- contact details -->
var hdrDetailVar;
var contentDetailVar;
var ftrDetailVar;
$(document).ready(function () {
contactIdVar = $('#contactId');
<!-- contact details -->
hdrDetailVar = $('#hdrDetail');
contentDetailVar = $('#contentDetail');
ftrDetailVar = $('#ftrDetail');
...
}
function hideDetail(){
hdrDetailVar.hide();
contentDetailVar.hide();
ftrDetailVar.hide();
}
function showDetail(){
hideDialog();
hideProgress();
hdrDetailVar.show();
contentDetailVar.show();
ftrDetailVar.show();
}
</script>
