版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
【移动应用开发技术】jQueryMobile怎么设计Android通讯录
页面流程结构/upload/information/20210522/379/540864.jpg/upload/information/20210522/379/540865.jpg/upload/information/20210522/379/540868.jpg/upload/information/20210522/379/540870.jpg/upload/information/20210522/379/540872.jpg/upload/information/20210522/379/540873.jpgjQueryMobile页面设计<div
data-role="page">
<div
data-role="header">...</div>
<div
id="contentWithHeaderAndFooter1"
data-role="content">...</div>
<div
data-role="footer">...</div>
<div
data-role="header">...</div>
<div
id="contentWithHeaderAndFooter2"
data-role="content">...</div>
<div
data-role="footer">...</div>
<div
id="contentWithNoHeaderAndFooter"
data-role="content">...</div>
</div>/upload/information/20210522/379/540874.jpg如何整合前端代码和Android后端Java代码/upload/information/20210522/379/540876.jpgimport
android.webkit.WebView;
import
android.app.Activity;
...
public
class
ContactsActivity
extends
Activity
{
WebView
webView;
...
public
void
onCreate(Bundle
savedInstanceState)
{
...
webView
=
new
WebView(this);
...
webView.addJavascriptInterface(this,
"contactSupport");
...
}
public
void
deleteContact(String
contactId,
String
displayPage){
...
}<script>
...
function
someJavaScriptFunction(){
..
contactSupport.deleteContact(contactIdVar.val(),'ListPage.html');
}
...
</script>AndroidJava代码如何访问前端Javascript代码/upload/information/20210522/379/540878.jpgimport
android.webkit.WebView;
import
android.app.Activity;
import
android.os.Handler;
...
public
class
ContactsActivity
extends
Activity
{
WebView
webView;
private
Handler
handler
=
null;
...
public
void
onCreate(Bundle
savedInstanceState)
{
...
webView
=
new
WebView(this);
...
handler
=
new
Handler();
...
}
public
void
deleteContact(String
contactId,
String
displayPage){
ContactUtility.deleteContact(contactId,...);
loadPage(displayPage);
}
public
void
loadPage(String
in){
final
String
url
=
"file:///android_asset/www/"
+
in;
loadURL(url);
}
private
void
loadURL(final
String
in){
handler.post(new
Runnable()
{
public
void
run()
{
webView.loadUrl(in);
}
});
}如何调用前端的JavaScriptpublic
class
ContactsActivity
extends
Activity
{
...
public
void
getAllContacts(String
callback,
String
accountCallback){
final
String
accountCallbackFunction
=
"javascript:"
+
accountCallback
+
"()";
if(accountName
==
null){
loadURL(accountCallbackFunction);
return;
}
final
String
json
=
ContactUtility.getAllContactDisplaysJSON(getContentResolver());
final
String
callbackFunction
=
"javascript:"
+
callback
+
"('"
+
json
+
"')";
loadURL(callbackFunction);
}<script>
$(document).ready(function
()
{
...
contactSupport.getAllContacts('setContactsList','showAccount');
});
</script>在前后端交互中参数的类型问题程序入口介绍public
class
ContactsActivity
extends
Activity
{
WebView
webView;
private
Handler
handler
=
null;
private
String
accountType
=
null;
private
String
accountName
=
null;
...
public
void
onCreate(Bundle
savedInstanceState)
{
super.onCreate(savedInstanceState);
//
初始化WebView
webView
=
new
WebView(this);
setContentView(webView);
//允许使用Javscript
webView.getSettings().setJavaScriptEnabled(true);
//检查应用中的帐号是否已经建立
accountType
=
"com.jquerymobile.demo.contact";
Account[]
accounts
=
AccountManager.get(this).getAccountsByType(accountType);
if(accounts.length
!=
0){
accountName
=
accounts[0].name;
}
handler
=
new
Handler();
webView.addJavascriptInterface(this,
"contactSupport");
//
装载index.html页
loadPage("index.html");
}
...
}ListPage.html<html>
<head>
<B><!--
jQuery
Mobile
Libraries
--></B>
<link
rel="stylesheet"
href="css-js/jquery.mobile-1.0a3.min.css"
/>
<script
src="css-js/jquery-1.5.min.js"></script>
<script
src="css-js/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<B><!--
Container
Page
--></B>
<div
data-role="page"
data-theme="c"
id="containerPage">
<B><!--
Contact
List
--></B>
<div
data-role="header"
id="hdrList"
data-nobackbtn="true">
<h2><img
align="top"
src="img/contacts.png">
Contacts</h2>
<a
id="buttonAddContact"
data-icon="plus"
class="ui-btn-right"
href="<B>javascript:addContact();</B>return
false;"
data-role="button"
data-inline="true">Add</a>
</div>
<div
data-role="content"
id="contentList"
data-theme="c">
<ul
data-role="listview"
data-dividertheme="c"
id="contactSelections"></ul>
</div>
<div
data-role="footer"
id="ftrList"></div>
<B><!--
Progress
--></B>
<div
data-role="header"
id="hdrProgress"
data-nobackbtn="true"
data-theme="c">
<h2>Processing...</h2>
</div>
<div
data-role="content"
id="contentProgress"
data-theme="c">
<div
align="CENTER"><h5>Please
wait.</h5></div>
<div
align="CENTER"><img
id="spin"
src="img/wait.gif"/></div>
</div>
<div
data-role="footer"
id="ftrProgress"
data-theme="c"></div>
<B><!--
Create
Account
--></B>
<div
data-role="header"
id="hdrAccount"
data-nobackbtn="true"
data-theme="c">
<h2>Create
Account</h2>
</div>
<div
data-role="content"
id="contentAccount"
data-theme="c">
<div
align="CENTER"><img
src="img/contacts-master-bgd.png"></div>
<div
align="CENTER"><h5>Please
enter
name
of
the
new
account
for
this
application</h5></div>
<div
align="CENTER">Contacts
created
with
this
application
will
be
associated
with
the
new
account
specified
below.
Other
contacts
can
be
viewed,
however,
cannot
be
deleted
or
modified
with
this
application.</div>
<div
align="CENTER"
id="accountDiv"
data-role="fieldcontain">
<input
id="accountName"
type="text"
/>
</div>
<div
align="CENTER">
<a
href="javascript:createAccount();return
false;"
<B>data-role="button"
data-inline="true"</B>>Save</a>
</div>
...
</div>
<div
data-role="footer"
id="ftrAccount"
data-theme="c"></div>
</div>
<B><!--
Container
Page
Ends
Here
--></B>
...以上的代码中，注意如下几点<script>
var
hdrListVar;
var
contentListVar;
var
ftrListVar;
var
hdrProgressVar;
var
contentProgressVar;
var
ftrProgressVar;
var
hdrAccountVar;
var
contentAccountVar;
var
ftrAccountVar;
$(document).ready(function
()
{
//
Initialize
commonly
used
variables
hdrListVar
=
$('#hdrList');
contentListVar
=
$('#contentList');
ftrListVar
=
$('#ftrList');
hdrProgressVar
=
$('#hdrProgress');
contentProgressVar
=
$('#contentProgress');
ftrProgressVar
=
$('#ftrProgress');
hdrAccountVar
=
$('#hdrAccount');
contentAccountVar
=
$('#contentAccount');
ftrAccountVar
=
$('#ftrAccount');
...
});
...
function
hideList(){
hdrListVar.hide();
contentListVar.hide();
ftrListVar.hide();
}
function
showList(){
hideProgress();
hideAccount();
hdrListVar.show();
contentListVar.show();
ftrListVar.show();
}
function
hideProgress(){
hdrProgressVar.hide();
contentProgressVar.hide();
ftrProgressVar.hide();
}
...
</script>public
void
getAllContacts(String
callback,
String
accountCallback){
final
String
accountCallbackFunction
=
"javascript:"
+
accountCallback
+
"()";
if(accountName
==
null){
loadURL(accountCallbackFunction);
return;
}
final
String
json
=
ContactUtility.getAllContactDisplaysJSON(getContentResolver());
final
String
callbackFunction
=
"javascript:"
+
callback
+
"('"
+
json
+
"')";
loadURL(callbackFunction);
}{"contacts":[
{"key":"A","values":[
{"contactId":"257","displayName":"Aach
Herb","key":"A"},
...,
{"contactId":"256","displayName":"Aaker
David","key":"A"}
]
},
{"key":"B","values":[
{"contactId":"259","displayName":"Belanger
Andre","key":"B"},
...,
{"contactId":"260","displayName":"Bohme
Jacob","key":"B"}
]
},
...
]
}<div
data-role="content"
id="contentList"
data-theme="c">
<ul
data-role="listview"
data-dividertheme="c"
id="contactSelections"></ul>
</div>
...
<script>
...
//
Commonly
used
variables
...
var
contactSelectionsVar;
$(document).ready(function
()
{
//
Initialize
commonly
used
variables
...
contactSelectionsVar
=
$('#contactSelections');
...
}
...
function
setContactsList(jsonText){
var
tmpJson
=
$.parseJSON(jsonText);
if(tmpJson
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 安全教学课件
- 安全生产管理制度和岗位操作
- 三重一大议事制度
- 固定资产自查报告存在问题及整改措施
- 2025沪昆高铁邵阳北站站前综合事务服务中心选调1人备考题库（湖南）及一套答案详解
- 2026岚图汽车产研领域招聘备考题库含答案详解（达标题）
- 2026上半年海南事业单位联考海口市美兰区招聘71人备考题库（第一号）附答案详解（预热题）
- 2026广东广州白云区石门街中心幼儿园招聘4人备考题库含答案详解ab卷
- 2026年上海政法学院高层次学科（实务）带头人与骨干人才引进备考题库及答案详解1套
- 2026广东广州花都区狮岭镇益群小学临聘教师招聘1人备考题库附答案详解（基础题）
- 广东省佛山市顺德区2026届高一数学第一学期期末检测模拟试题含解析
- 新河北省安全生产条例培训课件
- 交警执勤执法培训课件
- 【初高中】【假期学习规划】主题班会【寒假有为弯道超车】
- 铁路声屏障施工方案及安装注意事项说明
- 反诈退赃协议书
- 2026年及未来5年市场数据中国超细铜粉行业发展趋势及投资前景预测报告
- （新教材）2026年人教版八年级下册数学 21.2.2 平行四边形的判定 21.2.3 三角形的中位线 课件
- 继承农村房屋协议书
- 2025-2026学人教版八年级英语上册（全册）教案设计（附教材目录）
- 台球竞业协议书范本
评论
0/150
提交评论