jQuery mobile 开发问题记录
一、动态加载页面问题
1.存在这样一个页面布局:
main.html 为主界面A,B为该页面中的三个page,其中A为splitview左部分页面,B为右半部页面
a1.html 为一个独立的页面
a2.html为一个独立的页面
2.在main.html中有这样一段script
$("#A1").live("pagecreate",function(){
$.getScript("a1.js", function(){
$.mobile.changePage(a1.html',{transition: "none",changeHash:false});
});
});
而a1.html中存在一个按钮btn1,a1.js中有这样一段代码
$("#btn1").live("click",function(){
$.getScript("a2.js", function(){
$.mobile.changePage(a2.html',{transition: "none",changeHash:false});
});
});
无论a1.js还是a2.js中的按钮触发一个动作,然后动态生成一个页面填充至B,而后使用
$.mobile.changePage("#B");
这种操作是不能成功的。
每当a1->a2时,a2页面中的pageceate及pageinit事件会被调用
同理,每当a2->a1时,a1页面中的pageceate及pageinit事件会被调用
为了解决这个问题,
方法1.可以删除a1,a2页面,把这两个页面的html代码合并至main.html中。
方法2.如果这样会导致页面庞大不好维护,也可以采用在页面一加载之初,a1.html的内容使用ajax获取,并且追加至A容器中,当btn1按钮点击时,同样,使用ajax把a2.html的内容追加至A容器。
二、动态生成ListView问题
这个问题花了整整一天的时间才解决了。之前老是出现各种奇怪的错误,典型如:
Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'
我的listview的容器ul完全是动态生成的。动态HTML代码如下:
<div data-role="page" id="pLogin" data-hash="false">
<div data-role="header" data-theme="b" data-position="inline">
<h1>欢迎使用</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-inset="true" id="lv1">
<li><a href="#">AAAAAAAAAAA<a></li>
<li><a href="#">BBBBBBBBBBB<a></li>
<li><a href="#">CCCCCCCCCCC<a></li>
<li><a href="#">DDDDDDDDDDD<a></li>
</ul>
</div>
</div>
</div>
调用
$("#lv").listview('refresh');时,出错了:Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'
查了N多资料,终于弄明白了。因为我的page容器也是动态生成的。page数据加载至容器时,jquerymobile并没有对该page容器进行初始化。因此调用 page的content下的listview组件的refresh方法时,会出现异常。
解决方法:
在dom数据加载完成后,重新生成page
$("#pLogin").page();
$("#lv").listview('refresh');
问题成功解决。
三、splitview导航时,导航标签所在页面消失。
存在场景,L为splitview的左部分,R为splitview的右部分。
在L容器中,存在
<li><a id="a1" οnclick="fun1()" href="#d1">导航1</a></li>
<li><a id="a2" οnclick="fun1()"href="#d2">导航2</a></li>
在点击a1,a2按钮后,触发fun1,使用ajx去服务器取数据,并且生成一段HTML格式化代码,填充至R容器中。
服务器生成HTML代码如下:
<div data-role="page" id="d1" data-hash="false">
<div data-role="header" data-theme="b" data-position="inline">HHHHHH</div>
<div data-role="content">
<div class="content-primary">
XXXXXXXXXXX
</div>
</div>
</div>
fun1代码:
html = ${发送ajax后,由服务器生成的格式如上}
$("#R").append(html);
$.mobile.changePage("d1");
问题就出现了,是的,R部分显示了XXXXXXXXXXX,是该显示的东东,不过,L部分变成空白了。
琢磨了很久,原来是这样,因为使用ajax,是异步请求,a1点击时锚点对应的d1 页面并没有生成,并且填充至R容器,由于找不到d1,因此左部分空白了。
解决方法仍然有两个:
1.在R部分再做一个空白的page,a1,a2的href属性设置为该空白page的id即可
2.在发送异步请求之前,先生成page所在div容器,至少让d1容器先生成出来,不至于a1找不到锚点。在请求完成后,把请求得到的数据填充至content部分即可。
四、header上增加返回按钮时,导致header变高
我的header部分是动态生成的。根据业务需要,有的page需要返回按钮,有的page不需要。业务详情共用一个page,每次点击后,根据业务信息更新header及业务情况,决定是否显示返回按钮。
我的方法:
在header中加入一个按钮header.append('<a οnclick="history.go(-1)">返回<a>');
然后再去修改header部分的文字信息。
不过,问题就来了,第一,返回按钮的地方不一定准确。第二,header部分变得特别高。把content部分都遮挡了。
解决方案:删除生成了返回按钮,使用page带的返回按钮属性。
<div data-role="page" id="p'+id+'" data-add-back-btn="true" data-back-btn-text="返回">
业务逻辑中,使用这样的代码
if(back){
$("a[data-rel='back']",header).show();
}else{
$("a[data-rel='back']",header).hide();
}
来决定是否显示返回按钮。
这样做解决了header超高问题,返回位置不准确问题。
五、关于a标签结合changePage使用问题
如果点击一个a标签后,调用一个changePage转到目标页面,而在a标签上,又设置了href="#id"属性,这样可能会导致点击a标签后, 页面多次跳转问题。
解决方案,如果页面使用了button那么就使用changePage
如果页面使用了href属性,则在生成目标page后,不需要调用changePage事件。
转载于:https://www.cnblogs.com/wangluochong/p/3426466.html
jQuery mobile 开发问题记录相关推荐
- 18 个 jQuery Mobile 开发贴士和教程
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...
- 跨平台APP JQuery Mobile开发-张晨光-专题视频课程
跨平台APP JQuery Mobile开发-1170人已学习 课程介绍 jQuery Mobile 是创建移动 web 应用程序的框架: 适用于所有流行的智能手机和平板电脑,使用 H ...
- 视频教程-跨平台APP JQuery Mobile开发-jQuery
跨平台APP JQuery Mobile开发 主要研究方向为J2EE..net .数据库 .前端.Android,曾经服务过大型上市国企IT部门,软件企业联合创始人,对软件研发管理.市场营销有自己独特 ...
- jquery mobile开发笔记之Ajax提交数据
这两天学习了下,jquery mobile(以下简称jqm)的开发相关的内容.可能之前有过web的开发基础,相对于我来说学习这个东西感觉挺简单的,很容易上手.Jqm的的语法和jquery其实是一样的, ...
- jQuery Mobile开发的新闻阅读器,适应iphone和android手机
程序猿都非常赖.你懂的! 我们常常上新浪,腾讯.雅虎等各大站点上面看新闻.他们也都各自推出了自家的手机新闻阅读器.今天我自己使用jQuery Mobile 来实现这一功能.图片大小上传限制了大小250 ...
- jQuery Mobile开发1-UI components
一.jQuery Mobile现在支持的UI components 二.List views 基础List views <!DOCTYPE html> <html><he ...
- jQuery Mobile和PhoneGap混合开发
其实二者并不影响,PhoneGap负责调用系统的接口,jQuery Mobile实现一些网页效果.PhoneGap开发请看上一篇文章,jQuery Mobile开发环境搭建如下:[请先阅读上一篇文章, ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十二) —— jQuery Mobile 页面事件与 deferred
在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery ...
- 【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile界面综合实战
文章目录 8. JQuery Mobile界面综合实战 8.1 清爽的电子书阅读器 8.2 简单的计算器 8.3 移动BBS模板 8.4 基于JQuery Mobile的简单记事本 8.5 基于JQu ...
- jquery mobile_使用jQuery Mobile改善Web应用程序的安全性
jquery mobile 在你开始前 本教程适用于有兴趣保护其应用程序的jQuery Mobile开发人员. 假定读者具有使用PHP,MySQL,JavaScript,XHTML和CSS进行Web应 ...
最新文章
- 如何刷新JTable
- centos安装nginx小记
- wxpython 调用子窗口_wxpython入门第一步(简单例子)
- Atitit php db mysql api<?php$mysql_conf = array( ‘host‘ => ‘localhost‘, ‘db‘ => ‘mysql
- 树莓派使用 python IIC 驱动 OLED 刷新率低问题与解决
- 使用SmartUpload上传文件报错
- linux鼠标选中的内容不能复制,解决vim不能使用鼠标右键复制的问题
- 加拿大布鲁克大学计算机科学,布鲁克大学(Brock University)
- Google SketchUp Cookbook: (Chapter 2) Following Paths with Follow Me
- Vue+PHP实现个人博客系统
- [leetcode]初级算法——动态规划
- div html用法详解,div标签详解
- JavaScript基础随笔
- Android访问网络资源
- C语言 % x的作用,关于c语言%#X意思大全
- 【CSS3 基础】全面入门学习
- ESP32学习笔记(22)——ADC接口使用
- java 头尾 队列_java总结之 链表实现队列
- 中国版Meerkat来了,趣播手中有一利器,可大幅拉低直播流量
- dedecms获取顶级栏目名称、二级栏目名称实现方法
热门文章
- PDF to Word OCR for Mac(PDF文档转换成word格式)
- Aiseesoft Screen Recorder入门教程
- MWeb 博客生成软件如何使用“发布脚本”发布网站?
- OpenCV --- 实现两幅图像并排合并(ROI)
- 选择编程语言前需要知道的事
- 递归,yield,参数槽
- !HDU 1078 FatMouse and Cheese-dp-(记忆化搜索)
- ODAC(V9.5.15) 学习笔记(十六)直接访问模式
- android适配各种分辨率的问题
- PCoIP卡由火炮升级为喀秋莎