phoneGap+jquery mobile项目经验
最近一个月,一直在用phoneGap+jquery mobile来开发一项目。
下面谈谈自己在开发过程中遇到的一些问题以及解决方法。
开始选择框架时,曾试过采用其他框架做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项目经验相关推荐
- 转载:用Dreamweave cs 5.5+PhoneGap+Jquery Mobile搭建移动开发
转载地址:http://blog.csdn.net/haha_mingg/article/details/7900221 移动设备应用开发有多难,只要学会HTML5+Javascript就可以.用Dr ...
- jquery mobile项目(一款“运动”移动web)
包含功能: 登录页 注册页 首页 社区 我的运动 消息 我 该文章只列出部分代码,项目的所有代码将上传到资源,免费下载. 下载地址:https://download.csdn.net/download ...
- 移动web前端框架一、jQuery Mobile
简述:jQuery Mobile是 jQuery发布的针对手机和平板设备.经过触控优化的Web框架.它基于jQuery,在不同移动设备平台上可提供统一的用户界面.该框架基于渐近增强技术,并利用HTML ...
- jQuery Mobile中文手册:开发入门
jQuery Mobile 以"Write Less, Do More"作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框架可以让你为所有流 ...
- web上渐进使用jQuery Mobile中animate相关CSS
一.关于animate.css 在介绍主人公之前,先说说他的亲戚. 有个叫"蛋一灯(Dan Eden)"的人弄了个名叫animate.css的开源项目,实际上就是使用CSS3 an ...
- jQuery Mobile 高级设计模板
来自:http://www.adobe.com/cn/devnet/dreamweaver/articles/dw-template-jquery-mobile.html 下载: template_1 ...
- html实现在线新闻浏览器,使用JQuery Mobile实现手机新闻浏览器
[IT168 专稿]jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作,在本文中,笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机 ...
- jquery mobile android浏览器,我们怎样使用jQuery Mobile实现手机新闻浏览器
大家是否还对这部分知识存在疑问呀,让我来为大家详细解答一下. Mobile项目是jQuery项目下的在方面的又一力作.swift 教程在本文中,笔者将带你一步步更深入学习使用jQuery Mobile ...
- jquery mobile android浏览器,使用JQuery Mobile实现手机新闻浏览器
[IT168 专稿]jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作,在本文中,笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机 ...
最新文章
- openssl 模块 安装 centso Ubuntu
- SGS 0.9.7 协议解析
- vc++怎么可以直接刷掉MBR?搞笑的吧
- 灵活运用 SQL Server 数据库的 FOR XML PATH
- typeorm_Nestjs 热更新 + typeorm 配置
- 替换Quartus 自带编辑器 (转COM张)
- 零基础教你玩转ESP8266(一) 重识ESP8266
- sql server 群集_部署SQL Server以使用群集共享卷进行故障转移群集–第1部分
- T-SQL命令性能比较– NOT IN与SQL NOT EXISTS与SQL LEFT JOIN与SQL EXCEPT
- C语言程序设计专项练习——PTA
- 第一性原理分子动力学(AIMD)结果分析教程
- odoo14 Botton按钮标签属性详解及按钮图标使用
- Mac OSX 升级python six模块版本
- Invalid header signature; read 0x3C0A0D0A0DBFBBEF, expected 0xE11AB1A1E011CFD0
- 用友NCC产品API使用指南
- 浅说北仑有趣的地名之霞浦篇
- 你所不知的Redis三个特殊类型
- PyCharm关闭更新提示
- 全网通报:数模国赛作弊的后果
- Ajax的简历技能如何写,web前端简历专业技能填写样本
热门文章
- react 禁止微信调整字体大小
- cisco设备运维常用命令 总结-1
- oracle安装问题: 11g安装未填写hosts导致弹窗错误
- 51 nod 机器人走方格
- GDI+编程说明及小结
- 简单的dns解析过程
- 对于shell脚本获取参数的一些小技巧
- WCF(Sender) to MSMQ to WCF(Receiver)
- C#之Action和Func的用法(转自 https://www.cnblogs.com/LipeiNet/p/4694225.html)
- 2018.12.5 区块链论文翻译