jquery mobile开发常见问题分析


Posted in Javascript onJanuary 21, 2016

本文实例分析了jquery mobile开发常见问题。分享给大家供大家参考,具体如下:

jquery mobile功能很强大,有了它,不用在程序中,写方法去判断,是什么手机了,完全可以用js来实现各种智能手机的的兼容性。也是因为功能强大,jquery mobile插件,200多K,min也有140多K。

1、jquery mobile是通过ajax来进行页面请求,ajax大家都知道,是不涮新页面的。也就是说地址栏的变动也不是真实的涮新。这样就有问题了,js只有刷新页面的时候才会执行,起作用,页面中的js代码刷新页面起作用,点了页面里面的跳转,在转回来就不起作用了。

错误代码:

<script type="text/javascript">
$(function(){
  $('#search01').bind("click",function(){
    $('.searchPanel').show();
  });
});
</script>

正确代码:

<script type="text/javascript">
$(function(){
  $('#search01').live("click",function(){ //jquery 1.7系列
    $('.searchPanel').show();
  });
});
</script>

如果是jquery 1.9系列的

<script type="text/javascript">
$(document).on('click', '#search01', function () { //jquery 1.9系列
  $('.searchPanel').show();
});
</script>

2、所有页面都在一个页面里面,这个时候,就要注意了,id不要用一样的,不然只会读取第一个。多页面在一个页面里面,会出现很多问题。例如算标签到窗口顶部的距离,就会不准。

错误写法:

$('html,body').animate({
   scrollTop: $('.content').offset().top
}, 100);

这样写的问题是,当前页面,前面很可能有很多页面,这样top值就不对了,你如果刷新页面值就会正确

正确写法:

$('html,body').animate({
   scrollTop: $('.ui-page-active .content').offset().top
}, 100);

.ui-page-active,表示当前激活的页面,这样算出来的高度就是对的。

3、php变量赋值给JS变量,有的时候会起作用,有的时候不能。

color = '<?php echo $color?>';

对于这个问题,也没有找到是什么原因产生的。但是,可以用其他方法解决。
<input type="hidden" id='color' value='<?php echo $color;?>'>
<script type="text/javascript">
  color = $('.ui-page-active #color').val();
</script>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
json格式数据的添加,删除及排序方法
Jan 21 #Javascript
jquery及js实现动态加载js文件的方法
Jan 21 #Javascript
js console.log打印对像与数组用法详解
Jan 21 #Javascript
JS遍历数组及打印数组实例分析
Jan 21 #Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 #Javascript
如何用angularjs制作一个完整的表格
Jan 21 #Javascript
angularjs自定义ng-model标签的属性
Jan 21 #Javascript
You might like
PHP XML备份Mysql数据库
2009/05/27 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python魔术方法详解
2015/02/14 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
python实现汽车管理系统
2018/11/30 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python制作微博图片爬取工具
2021/01/16 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
机电工程专业应届生求职信
2013/10/03 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
2014年预算员工作总结
2014/12/05 职场文书
优秀班集体申报材料
2014/12/25 职场文书
写给老婆的保证书
2015/02/27 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
解决redis批量删除key值的问题
2022/03/23 Redis