您的位置：首页 > Web前端 > JQuery

SpringMVC+JQueryMobile开发 data-external-page与JQM机制

2015-07-23 22:50 549 查看

贴文地址：http://blog.csdn.net/dats0407/article/details/8166378

在做SpirngMVC+JQueryMoblie的Web开发过程中，遇到跳转之后新页面JS代码无法执行的情况，在浏览器调试之后发现，带有data-role=page属性的页面，在跳转之后原page不消亡的情况。排除了多个原因之后，发现问题来自JQueryMobile框架本身。贴文如下：

jquery mobile 是一个基于html，js，css而进行开发的手机框架工具，即是，类似一个网站一般，多个html，jquery实现参数传递，部分特效效果等，css实现UI和部分特效；和网站的区别就是应为是手机客户端开发，所以没有服务器脚本语言。

既然是html，就会有head，body等标签，
jq mobile 的框架在进入app时，有mobileinit的事件，不过这个时间要在jquery.js引入，但是jquery mobile还没引入时就定义，就是

[html]
view plaincopy

<script src="jquery.js"></script>
<script src="myscript.js"></script>
<script src="jquery-mobile.js"></script>

其中myscript就是mobileinit的事件的位置；
这个框架的特点是，在进入app的第一个html的时候，的<head></head>标签的内容是加载（也就是被执行）的，其他html里的head标签是不被执行的，当然，window.location.href='second.html',这样的js原生态写法，把页面重新彻底跳转一次，head标签就会被再次执行；否则，jquery mobile 里的<a href='second.html'></a>标签也好，$.mobile.changePage('second.html',{transition:"slide"})也罢，都是不会再次执行head标签的内容的。
可能读者会问，那有时候不想引进所有的js，在执行到某些页面的时候，再加载这些特定的js，也就是按需加载；这又如何处理呢？
要解决这个问题，先来在看看jq mobile的机制。
在每个html里，都会有

[html]
view plaincopy

<body>

<div data-role="page">

<span style="white-space:pre">  </span><div data-role="header" data-theme="b">... ...</div>
<span style="white-space:pre">  </span><div data-role="content">... ...</div>
<span style="white-space:pre">  </span><div data-role="footer">... ...</div><pre name="code" class="html" style="font-size: 18.18181800842285px; "></div></pre></body>
<pre></pre>
<span style="white-space:pre"></span>在每次a标签或者<span style="font-size:18.18181800842285px">$.mobile.changePage()事件的时候，改变的都是<div data-role="page"></div>的内容。</span>
<pre></pre>

笔者研究发现，jquery mobile的页面里，最多有两个<div data-role="page"></div>，在这两个div里面，第二次出现的div里会有data-external-page="true"这个属性，而且，第一个进入的div是永远停留在那里，不会被替换，也就是说，引入新的页面，都是在第二个<div
data-role="page"></div>（带有data-external-page="true"这个属性）的div层里进行替换加载；可以做个分类，有12345个页面，从小到大连接过去，那么1一直都占着一个<div
data-role="page"></div>，2345就在不停的替换第二个<div data-role="page"></div>；这个说的深入了。
那如何按需加载呢？当我们把要进入的js写在新的html的<div
data-role="page"></div>里面就可以，就是

[html]
view plaincopy

<div data-role="page">
<script src="my.js"></script></div>

那当页面改变，也就是a标签点击，changPage的时候，我想执行一些操作呢，jq mobile有pagebeforchange事件，就是

[javascript]
view plaincopy

$(document).bind('pagebeforechange',function(e,data){... ...});

但是在页面改变的时候，这个时间会执行两次（这是jq mobile的框架问题），这两次参数data的内容都不相同，一次data.toPage的属性是一个函数，一个属性是string;一般情况都是从string属性进行下手：

[javascript]
view plaincopy

$(document).bind('pagebeforechange',function(e,data){
    if (typeof data.toPage !== "string"){
        return;
    }
    ... ...
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery mobile SpringMVC jquery

相关文章推荐

新的分享

章节导航