jquery mobile 手机开发框架分析 (一)

最新推荐文章于 2024-04-23 10:35:25 发布

qjbagu

最新推荐文章于 2024-04-23 10:35:25 发布

阅读量812

点赞数

分类专栏： android

android 专栏收录该内容

476 篇文章 2 订阅

订阅专栏

jquery mobile 是一个基于html，js，css而进行开发的手机框架工具，即是，类似一个网站一般，多个html，jquery实现参数传递，部分特效效果等，css实现UI和部分特效；和网站的区别就是应为是手机客户端开发，所以没有服务器脚本语言。
既然是html，就会有head，body等标签，
jq mobile 的框架在进入app时，有mobileinit的事件，不过这个时间要在jquery.js引入，但是jquery mobile还没引入时就定义，就是
[html]
<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]
<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]
<div data-role="page">
<script src="my.js"></script></div>
那当页面改变，也就是a标签点击，changPage的时候，我想执行一些操作呢，jq mobile有pagebeforchange事件，就是
[javascript]
$(document).bind('pagebeforechange',function(e,data){... ...});
但是在页面改变的时候，这个时间会执行两次（这是jq mobile的框架问题），这两次参数data的内容都不相同，一次data.toPage的属性是一个函数，一个属性是string;一般情况都是从string属性进行下手：
[javascript]
$(document).bind('pagebeforechange',function(e,data){
    if (typeof data.toPage !== "string"){
        return;
    }
    ... ...
});

第一个记录到此。

qjbagu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery mobile 手机开发框架分析 (一)

jquery mobile 是一个基于html，js，css而进行开发的手机框架工具，即是，类似一个网站一般，多个html，jquery实现参数传递，部分特效效果等，css实现UI和部分特效；和网站的区别就是应为是手机客户端开发，所以没有服务器脚本语言。既然是html，就会有head，body等标签，jq mobile 的框架在进入app时，有mobileinit的事件，不过这个时间要在j
复制链接

扫一扫