jQuery Mobile 事件参考手册
下表列出了所有的 jQuery Mobile 事件。
注释:请通过使用 on() 方法来绑定事件。
事件 | 描述 |
hashchange | 启用 bookmarkable #hash 历史记录。 |
navigate | 针对 hashchange 和 popstate 的 wrapper 事件。 |
orientationchange | 当用户垂直或水平旋转其移动设备时触发。 |
pagebeforechange | 在页面变化周期内触发两次:任意页面加载或过渡之前触发一次,接下来在页面成功完成加载后,但是在浏览器历史记录被导航进程修改之前触发。 |
pagebeforecreate | 当页面即将被初始化,但是在增强开始之前触发。 |
pagebeforehide | 在过渡动画开始前,在“来源”页面上触发。 |
pagebeforeload | 在作出任何加载请求之前触发。 |
pagebeforeshow | 在过渡动画开始前,在“到达”页面上触发。 |
pagechange | 在 changePage() 请求已完成将页面载入 DOM 并且所有页面过渡动画已完成后触发。 |
pagechangefailed | 当 changePage() 请求对页面的加载失败时触发。 |
pagecreate | 当页面已创建,但是增强完成之前触发。 |
pagehide | 在过渡动画完成后,在“来源”页面触发。 |
pageinit | 当页面已经初始化并且完成增强时触发。 |
pageload | 在页面成功加载并插入 DOM 后触发。 |
pageloadfailed | 如果页面加载请求失败,则触发。 |
pageremove | 在窗口视图从 DOM 中移除外部页面之前触发。 |
pageshow | 在过渡动画完成后,在“到达”页面触发。 |
scrollstart | 当用户开始滚动页面时触发。 |
scrollstop | 当用户停止滚动页面时触发。 |
swipe | 当用户在元素上水平滑动时触发。 |
swipeleft | 当用户从左划过元素超过 30px 时触发。 |
swiperight | 当用户从右划过元素超过 30px 时触发。 |
tap | 当用户敲击某元素时触发。 |
taphold | 当元素敲击某元素并保持一秒时触发。 |
throttledresize | 启用 bookmarkable #hash 历史记录 |
updatelayout | 由动态显示/隐藏内容的 jQuery Mobile 组件触发。 |
vclick | 虚拟化的 click 事件处理器 |
vmousecancel | 虚拟化的 mousecancel 事件处理器 |
vmousedown | 虚拟化的 mousedown 事件处理器 |
vmousemove | 虚拟化的 mousemove 事件处理器 |
vmouseout | 虚拟化的 mouseout 事件处理器 |
vmouseover | 虚拟化的 mouseover 事件处理器 |
vmouseup | 虚拟化的 mouseup 事件处理器 |
// 全局命名空间
var swiptimg = {
$index: 0,
$width: 120,
$swipt: 0,
$legth: 3
}
var $imgul = $("#ifrswipt");
$(".imgswipt").each(function() {
$(this).swipeleft(function() {
if (swiptimg.$index < swiptimg.$legth) {
swiptimg.$index++;
swiptimg.$swipt = -swiptimg.$index * swiptimg.$width;
//alert(swiptimg.$swipt + "/" + swiptimg.$index);
$imgul.animate({ left: swiptimg.$swipt }, "slow");
}
}).swiperight(function() {
if (swiptimg.$index > 0) {
swiptimg.$index--;
swiptimg.$swipt = -swiptimg.$index * swiptimg.$width;
//alert(swiptimg.$swipt + "/" + swiptimg.$index);
$imgul.animate({ left: swiptimg.$swipt }, "slow");
}
})
})
方向改变事件
$(function() {
var $p = $("p");
$('body').bind('orientationchange', function(event) {
var $oVal = event.orientation;
if ($oVal == 'portrait') {
$p.html("垂直方向");
$p.attr("class", "p-portrait");
} else {
$p.html("水平方向");
$p.attr("class", "p-landscape");
}
})
})
//窗口滚动事件
$('div[data-role="page"]').live('pageinit', function(event, ui) {
var eventsElement = $('p');
$(window).bind('scrollstart', function() {
eventsElement.html("开始滚动");
eventsElement.css('background', 'green');
})
$(window).bind('scrollstop', function() {
eventsElement.html("滚动停止");
eventsElement.css('background', 'red');
})
})
$(function() {
$('div').live('pagebeforehide', function(event, ui) {
console.log('1. ' + ui.nextPage[0].id + ' 正在显示中... ');
});
$('div').live('pagebeforeshow', function(event, ui) {
console.log('2. ' + ui.prevPage[0].id + ' 正在隐藏中... ');
});
$('div').live('pagehide', function(event, ui) {
console.log('3. ' + ui.nextPage[0].id + ' 显示完成! ');
});
$('div').live('pageshow', function(event, ui) {
console.log('4. ' + ui.prevPage[0].id + ' 隐藏完成! ');
})
})
var absPath = $.mobile.path.makePathAbsolute($(this).val(), strPath);
var absPath = $.mobile.path.makeUrlAbsolute($(this).val(), strPath);
var blnResult = $.mobile.path.isRelativeUrl($(this).val()) ? "是" : "否";
var blnResult = $.mobile.path.isAbsoluteUrl($(this).val()) ? "是" : "否";
var blnResult = $.mobile.path.isSameDomain($txt1, $txt2) ? "是" : "否";