jquery mobile 手机开发框架分析 (一)
2013-01-09 13:31
253 查看
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;
}
... ...
});
第一个记录到此。
既然是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;
}
... ...
});
第一个记录到此。
相关文章推荐
- jquery mobile 手机开发框架分析 (一)
- Jquery mobile,智能手机,平板电脑Web开发框架
- 【分析总结框架记录】开发环境搭建3
- 三大移动Web开发框架_jquery mobile_jQTouch_sencha touch
- 深入浅出 - Android系统移植与平台开发(十四) - Sensor HAL框架分析之四
- Socket开发框架之框架设计及分析
- [LINK]常用移动web开发框架研究分析
- phonegap(智能手机开发框架)资料收集
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
- 手机网站开发分析
- JFinal极速开发框架使用笔记(三) 分析Model和ActiveRecord
- HTML5+JS手机web开发之jQuery Mobile初涉
- 【cocos2d-x】 给大家分析 现在流行的手机游戏是用什么开发的(含方法)
- 手机客户端开发中的“恶意代理”攻击分析
- Maemo Linux手机平台系列分析:9 Maemo平台开发之 使用D-Bus信号做异步操作
- jQuery Mobile开发的新闻阅读器,适应iphone和android手机
- 移动前端开发框架jQuery Mobile,基于jQuery
- Maemo Linux手机平台系列分析:(15) Maemo应用开发
- 手机游戏开发现状分析
- 手机版开发框架集合