jQuery Mobile 设计 Android 通讯录(二)
本文是
jQuery Mobile 设计 Android 通讯录系统教程的第二篇，在上一篇教程中，初步
介绍了我们要设计的应用的架构和页面结构，并介绍了
Jquery Mobile 框架中重要的页面元
素的知识，以及
Android Java 应用程序如何跟前端的 JavaScript 页面进行交互。在本系列教
程的第二篇，将介绍如何创建新的通讯录帐号及如何修改和删除已经存在的通讯录名单。
创建通讯录帐号
下面来看下如何新创建通讯录帐号。用户只需要输入自己的姓名，点保存按钮。其中该
部分的代码是在
ListPage.html 中可以找到，代码如下：
1
<html> ...
2
<body> <!-- Container Page -->
3
<div data-role="page" data-theme="c" id="containerPage"> ...
4
<!-- Create Account --> <div data-role="header" id="hdrAccount" data-
nobackbtn="true" data-theme="c">
5
<h1>Create Account</h1> </div>
6
<div data-role="content" id="contentAccount"
data-theme="c"> <div
align="CENTER"><img src="img/contacts-master-bgd.png"></div>
7
<div align="CENTER"><h4>Please enter name of the new account for this
application</h4></div> <div align="CENTER">Contacts created with this application will
be associated with the new account specified below.
8
Other contacts can be viewed, however, cannot be deleted or modified with this
application.</div> <div align="CENTER" id="accountDiv" data-role="fieldcontain">
9
<input id="accountName" type="text" /> </div>
10
<div align="CENTER"> <a href="javascript:createAccount();return false;" data-
role="button"
11
data-inline="true">Save</a> </div>
12
... </div>
13
<div data-role="footer" id="ftrAccount" data-theme="c"></div>
14
</div> <!-- Container Page Ends Here --> ...
15
<script> ...
16
function createAccount(){ showProgress();
17
contactSupport.createAccount($('#accountName').val(),'ListPage.html'); }
18
... </script>
◆我们把创建帐号这个页面放在页面容器中，这个页面有自己的头部，内容 content 部
分和页脚部分。