页面的脚本 Scripting pages
因为jQuery Mobile 是使用Ajax驱动的导航系统,所以在编写控制内容的脚本的时候有一些事情要注意。你可以查阅api中的全局设置选项,事件和方法或者深入研究Ajax导航的模型来了解更多的细节。
头部的脚本和方法 Scripts & styles in the head
当用户点击一个jQuery Mobile驱动的网站的链接,那默认会通过Ajax请求页面。(而不是是浏览器通过默认的链接方法家在整个页面)。当请求发出以后,框架会接收到内容,但是他只会将请求的页面的body 内容插入到DOM中(或者只是 data-role="page" 的容器),这就意味着head标签中的元素不会被请求到。
这就意味着在HEAD中引用的脚本和样式在用通过AJAX加载后不会起作用,只能通过普通的HTTP请求执行。当编写jQuery Mobile 网站的脚本时,两种情况都要因为考虑。通过AJAX加载的页面会无视head 中的内容是因为重新执行相同的JS的几率是很高的(因为整站的每个页面可能都引用同样的JS文件)。而解决这个问题相对比较复杂,所以我们让开发人员来决定每个页面特定的JS,而假定头部的脚本是每个session只执行一遍的。
构建一个jQuery Mobile网站的最简单的办法就是在每一个页面的head都引用相同的css和js.如果你想为某一个页面特定的加载JS或CSS,我们建议用pagecreate事件将逻辑绑定进去,在页面被创建的时候执行需要的代码。这样可以保证代码在页面被直接加载或者通过Ajax请求到的时候被执行。
另一个给某一个页面特定的加载JS的办法是在BODY底部加载。如果你用这种方法引入你的脚本,要注意这些脚本在页面通过AJAX请求或者通过HTTP请求到的时候都会执行。所以如果这些脚本在每个页面都是一样的,那么可能就会出问题。如果你想这样引入页面,我们建议在data-role="page" 容器中将内容包裹,然后在这个容器外面引入你的脚本。
pagecreate = DOM ready
你学习jquery的第一件事就是知道使用$(document).ready()方法在DOM已经准备好时执行代码(经常要远远早于onload事件)。但是在jQuery Mobile网站中,页面是被请求然后插入到同样的dom元素中,所以DOM ready事件是不起作用的,只是在首个页面起作用。所以要在加载新页面的时候执行代码,你可以给pagecreate 事件绑定代码。
pagecreate事件会在页面初始化的时候被触发,跟在initialization事件之后。大多数 jQuery Mobile的UI组件都是在这个事件后初始
化。
HTML 代码:
$( document ).delegate( "pagecreate", "#aboutPage", function() {
alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!');
});
如果你想在pagecreate事件之前,以及在UI组件初始化之前控制页面内容,你也可以使用pagebeforecreate 事件:
$( document ).delegate( "pagecreate", "#aboutPage", function() {
alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!');
});
改变页面 Changing pages
如果你想通过JS改变现在活动的页面,可以使用changePage 方法。有很多方法和属性在改变页面的时候进行控制,下面是两个例子:
//用slideup效果转到about us页面
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
//使用ID为earch的表单数据转到"search results"页面
$.mobile.changePage( "searchresults.php", {
type: "post",
data: $("form#search").serialize()
});
加载页面 Loading pages
使用loadPage 方法加载外部页面,并渲染其内容。有很多方法和属性在加载页面的时候进行控制。
//将"about us"页面加载到DOM
$.mobile.loadPage( "about/us.html" );
渲染新的标记 Enhancing new markup
页面插件会分配一个“pagecreate”事件,大多数UI插件会使用它进行自我初始化。在某个插件的脚本被引用后,他会自动渲染页面上的插件的实例。
但是,如果你在客户端生成了新的标记,或者通过ajax加载了内容并且插入到了页面中。你就可以为新的标记中的插件触发create事件来处理自动初始化的这个事件。这个事件可以在任何元素上触发(甚至在PAGE本身),来节省你处理每个插件初始化过程的时间。
例如,如果某段HTML标记(比如登录表单)是通过AJAX加载的,你可以触发create 事件自动将他包含的所有部件渲染为增强后的版本。代码如下:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
Create 和refresh的差别 Create vs. refresh: An important distinction
注意在某些UI组件上create 事件和refresh 方法是有很大区别的。create事件用于将包含UI组件的原始的HTML标记渲染。而refresh 方法应该用在已经存在的组件上,来手动通过程序刷新他。
例如,如果您想动态的将一个新的data-role=listview 的UL在页面已经创建后插入到页面中,那在父容器中触发create事件会将列表转化为JQM的样式。然后如果UL中通过程序加了一个LI,那就需要调用refresh 方法才刷新。
滚屏到一个位置 Scrolling to a position within a page
因为我们使用URL的哈希值来维持后退按钮的行为,使用页面的ID来滚屏到页面的某个位置的方法就不能用了。所以使用silentScroll方法来滚屏到一个Y值的位置而不触发scroll事件。你可以传一个yPos参数来滚屏到一个Y值的位置。
//scroll to Y 300px $.mobile.silentScroll(300);
给 鼠标和touch事件绑定脚本 Binding to mouse and touch events
在移动设备上要考虑的一个很重要的问题就是处理鼠标和touch 事件。这些事件在不同的平台上差异很大,但是click 事件都是通用的
,通常会延迟500-700ms。这个延迟会让浏览器等待可能会发生的第二次tap,滚屏和hold tap事件。要想避免这个延迟,可以绑定touch
的事件(例如touchstart) ),但是有些平台不支持touch.
我们提供了一系列“虚拟的”鼠标事件试图把鼠标和触摸事件抽象出来。这使得开发者能够给一些基础的鼠标事件,例如mousedown, mousemove, mouseup, 和click来注册监听。插件会
在触摸环境中,插件会保持在传统鼠标环境下触发的顺序,例如:vmouseup总是在vmousedown之前被触发,vmousedown总是在vmouseup 之前,等等。虚拟鼠标事件也会把书剑中放出的坐标信息标准化。所以在基于触摸的设备中事件对象的pageX, pageY, screenX,
screenY, clientX, and clientY这些属性的坐标都可以用。