jquery mobile 开发中的问题

张映 发表于 2013-08-16

分类目录: nodejs/vue/js/jquery

标签:,

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>


转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1550.html