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 相关文章推荐
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
node.js自动上传ftp的脚本分享
Jun 16 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
js实现九宫格布局效果
May 28 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
详解js中==与===的区别
2017/01/08 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
python右对齐的实例方法
2020/07/05 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
小学国庆节活动方案
2014/02/11 职场文书
大学生暑期实践感言
2014/02/26 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server