phoneGap+jquery mobile项目经验
2015-01-03 23:25
375 查看
下面谈谈自己在开发过程中遇到的一些问题以及解决方法。
开始选择框架时,曾试过采用其他框架做UI,例如chocolatechip,它的UI比jquery mobile做得更加美观,且体验比jqm反应速度快,大家不妨去体会一下。
【1】访问外部url,需要在PhoneGap.plist中ExternalHosts中添加域名,注意,不要把协议和路劲加进来。
【2】若使用第三方phonegap插件(https://github.com/phonegap/phonegap-plugins),需在PhoneGap.plist中Plugins中添加对应项。
【3】iScroll插件:手动刷新更可靠。
var scroll;
function loaded(){
scroll = new iScroll("wrapper",{checkDOMChange:false});
}
document.addEventListener("DOMContentLoaded",loaded,false);
当DOM树改变时,手动刷新scroll.refresh();
页面滚动到顶部:scrollTo(x,y,time,relative)
如scroll.scrollTo(0,0,500);
【4】禁止全屏滚动:document.addEventListener("tochmove",function(e){e.preventDefault();},false);
【5】中间显示Loading进度框
$.mobile.loadingMessage="Loading...";//自定义文字
$.mobile.showPageLoadingMsg();//显示
$.mobile.hidePageLoadingMsg();//隐藏
【6】操作XML文件
我们将配置信息保存在config.xml中,读取内容:
function getConfig(key){
$.ajax({
url:"config.xml",
async:false,//同步
type:"Get",
dataType:"xml",
timeout:1000,
error:function(xml){},
success:function(xml){
var url;
$(xml).find("item").each(function(i){
if(key==$(this).children("name").text())
url=$(this).children("url").text();
})
return url;
}
})
}
注意,Chrome浏览器设置了安全项,不支持读取本地文件,要加载服务端文件
【7】数据加载:
$.ajax({
url:"http://www.XXX.XXX",
async:true,//异步
cache:false,
type:"Get",
dataType:"json",
timeout:5000,
error:function(data){},
success:function(data){},
complte:function(data){}
})
注意以上都是逗号结尾。
我们在success函数中操作DOM,
function(data){
$.each(data,function(i,field){
$("ul").append("<li>"+filed.name+"</li>");
})
}
最后切记刷新listview: $("ul").listview("refresh")。
相关文章推荐
- phoneGap+jquery mobile项目经验
- phoneGap+jquery mobile项目经验
- JQueryMobile + PhoneGap 经验总结
- JQueryMobile + PhoneGap 经验总结
- Phonegap+JqueryMobile问题总结与经验汇总
- JQueryMobile + PhoneGap 经验总结
- 转载:JQueryMobile + PhoneGap 经验总结
- phonegap 做 手游的 项目实施经验(二)
- 基于PhoneGap+JQuery Mobile+ArcGISJavascript API实现
- 很早写的用HTML5 JQUERYMOBILE PHONEGAP来实现的手机照相
- phonegap+jquerymobile 局部渲染(转)
- 用PhoneGap + jQuery Mobile开发 Android应用
- phonegap+jquerymobile post提交问题
- phonegap+jquerymobile开发android的心得(3)
- phonegap 做 手游的 项目实施经验(一)
- phonegap+jquerymobile 自定义弹窗
- phonegap+jquerymobile开发android的心得(1)
- 初识phoneGap + dreamweaver5.5 + jQuery Mobile UI
- jquery项目中所的经验
- 用Dreamweave cs 5.5+PhoneGap+Jquery Mobile搭建移动开发环境