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 相关文章推荐
javascript下function声明一些小结
Dec 28 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
js实现双色球效果
Aug 02 Javascript
Vue和Flask通信的实现
May 19 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
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
浅谈discuz密码加密的方式
2014/05/22 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
Python解析json文件相关知识学习
2016/03/01 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Django使用rest_framework写出API
2020/05/21 Python
python爬虫要用到的库总结
2020/07/28 Python
python实现简单猜单词游戏
2020/12/24 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
土木工程应届生求职信
2013/10/31 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
新学期开学标语2015
2015/07/16 职场文书
高三化学教学反思
2016/02/22 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis