CHAPTER 13 - jQuery Mobile 教學 ( 事件 )
前一篇看了一些 jQuery Mobile 基礎的程式，再來介紹一下 jQuery Mobile 的事件，這些事件相當的重要，用法也很簡單，學會之後對於使用 jQuery Mobile 開發才能更得心應手。
1. 頁面事件
jQuery Mobile 提供了兩種頁面事件，分別是 pageinit 和 pageshow，pageinit 表示頁面『第一次』執行時會發生的事件，因此只會發生一次，而 pageshow 表示頁面載入時會發生的事件，每次頁面載入都會觸發，如果要使用 jQuery Mobile，相關的程式必須寫在裡頭。 ( 範例：http://jqmdesigner.appspot.com/designer.html#&ref=5866509217824768，點選按鈕會發現警告視窗彈出兩次，第一次顯示 pageinit，接著顯示 pageshow，再點選一次會發現只會出現 pageshow )
(function () {
$(document).on("pageinit", "#pageID", function () {
// 頁面第一次執行時會觸發
// 程式寫在這裡
});
})()
(function () {
$(document).on("pageshow", "#pageID", function () {
// 頁面載入會觸發
// 程式寫在這裡
});
})();
2. 觸控事件
『觸控』是在手機上操作最重要的行為，因此 jQuery Mobile 提供了五種觸控事件，分別是：tap ( 點擊 )、taphold ( 長按 )、swipe ( 滑動 )、swipeleft ( 往左滑 )、swiperight ( 往右滑 ) ( 範例：http://jqmdesigner.appspot.com/designer.html#&ref=5146167943888896 )
HTML：
<span id="status">狀態顯示</span>
<br>
<br>
<div id="tapthis" class="test">tap</div>
<div id="tapholdthis" class="test">tap hold</div>
<div id="swipethis" class="test">swpie</div>
<div id="swipeleftthis" class="test">swipe left</div>
<div id="swiperightthis" class="test">swipe right</div>
javascript：
(function () {
$(document).on("pageinit", "#home", function () {
$('#tapthis').on("tap", function () {
$('#status').text('tap');
});
$('#tapholdthis').on("taphold", function () {
$('#status').text('taphold');
});
$('#swipethis').on("swipe", function () {
$('#status').text('swipe');
});
$('#swipeleftthis').on("swipeleft", function () {
$('#status').text('swipeleft');
});
$('#swiperightthis').on("swiperight", function () {
$('#status').text('swiperight');
});
});
})();
因為 jQuery Mobile 本身沒有提供往上往下滑的功能，如果要使用，則可新增這段 javascript ，就可以使用 swipeup 往上滑 swipedown 往下滑的事件。
( 範例：http://jqmdesigner.appspot.com/designer.html#&ref=6219705958268928 )
HTML：
<span id="status">狀態顯示</span>
<br>
<br>
<div id="swipeupthis" class="test">swipe up</div>
<div id="swipedownthis" class="test">swipe down</div>
javascript ( 加入這段可以新增往上往下事件 )：
(function () {
var supportTouch = $.support.touch,
scrollEvent = "touchmove scroll",
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
touchStopEvent = supportTouch ? "touchend" : "mouseup",
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
$.event.special.swipeupdown = {
setup: function () {
var thisObject = this;
var $this = $(thisObject);
$this.bind(touchStartEvent, function (event) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[0] :
event,
start = {
time: (new Date).getTime(),
coords: [data.pageX, data.pageY],
origin: $(event.target)
},
stop;
function moveHandler(event) {
if (!start) {
return;
}
var data = event.originalEvent.touches ?
event.originalEvent.touches[0] :
event;
stop = {
time: (new Date).getTime(),
coords: [data.pageX, data.pageY]
};
// prevent scrolling
if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
event.preventDefault();
}
}
$this
.bind(touchMoveEvent, moveHandler)
.one(touchStopEvent, function (event) {
$this.unbind(touchMoveEvent, moveHandler);
if (start && stop) {
if (stop.time - start.time < 1000 &&
Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
Math.abs(start.coords[0] - stop.coords[0]) < 75) {
start.origin
.trigger("swipeupdown")
.trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
}
}
start = stop = undefined;
});
});
}
};
$.each({
swipedown: "swipeupdown",
swipeup: "swipeupdown"
}, function (event, sourceEvent) {
$.event.special[event] = {
setup: function () {
$(this).bind(sourceEvent, $.noop);
}
};
});
})();
javascript ( pageinit 事件 )：
(function () {
$(document).on("pageinit", "#home", function () {
$('#swipeupthis').on("swipeup", function () {
$('#status').text('swipeup');
});
$('#swipedownthis').on("swipedown", function () {
$('#status').text('swipedown');
});
});
})();
3. 旋轉事件
旋轉事件可以偵測行動裝置的旋轉狀態，產生相對應的行為。 ( 範例：http://jqmdesigner.appspot.com/designer.html#&ref=5681561387139072 )
(function () {
$(document).on("pageinit", "#home", function () {
$(window).on("orientationchange", function (event) {
alert("方向是：" + event.orientation);
});
});
})();