手机端UI框架light7为什么不会执行jquery和Javascript代码?

《手机端UI框架light7为什么不会执行jquery和Javascript代码?》要点:
本文介绍了手机端UI框架light7为什么不会执行jquery和Javascript代码?,希望对您有用。如果有疑问,可以联系我们。

今天第一次使用手机端UI框架Light7,很漂亮,但是问题马上就来了,

你会发现你的jquery或javascdript代码不会被执行到。

这是因为默认是开启了router,这个功能意味着当你切换页面时,light7是使用ajax方式加载,而原有的js代码不会重新加载,因此不会执行。

解决方法:

方式1、取消router,两种方法

1、在light7.min.js中,把

router:!0,

改成:

router:!1,

2、或者在引入jquery.min.js后,引入light7.min.js前,进行配置设置:

<script type='text/javascript' src='/public/js/jquery-2.1.4.min.js' charset='utf-8'></script>
<script>
       $.config = {
              router: false
       }
</script>
<script type='text/javascript' src='/public/light7-build/dist/js/light7.min.js' charset='utf-8'></script>

或者,你预先用on绑定所有页面的事件。但页面多时,不推荐这么做。

下面是一个不取消router的做法:

在每个页面都会被执行

$(document).on(pageInit, function() {
       var curUri =window.document.location.pathname;
       $('a.tab-item').removeClass('active').each(function (i) {
              var href=$(this).attr('href');
              if(curUri == href ){
                     $(this).addClass('active');
                     return false;
              }
       })
});

取消light7的router有什么后果?

没有,只是页面切换没有那么漂亮,有router时,页面切换会从右边滑进来。取消后,就是普通的加载新页面。

最后,别忘了执行:

$.init()//关键

上面的坑据说SUI Mobile也有,light7是脱胎于SUI Mobile,但light7可以支持jquery。

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码