文章發佈日期: 2022-01-24
小知識教學類型: 手機應用程式開發
Title : jQuery Mobile Orientation & Page Events
jQuery Mobile Orientation
手機使用者，有時會橫向有時會直向望手機銀幕，這個習慣視乎手機使用者自身的需要或那種方式較清楚去呈現或查閱手機中的文字、圖片或影片內容。由於我們無法估計手機使用者是即將會用那種方向(直向/橫向)去使用你的手機應用程式，所以手機應用程式編寫員可以善用 jQuery Mobile Orientation Event 去應對這種情況，當手機用戶由橫轉直或由直轉橫，jQuery Mobile orientationchange Event 就會被偵測到 (triggered)。
我們可以用 window object 去捕捉orientationchange Event，寫法如下:
$(window).on("orientationchange",function(){
//當偵測到手機方向轉變時，自定想進行或展示訊息的程式段落
});
這個function會回向(return)一個值，若果現刻是直向會是portrait值，若果現刻是橫向會是landscape值。同理的做法，可以使用window.orientation的回向值(return value)，若果現刻是直向會是0值，若果現刻是橫向會是1值。當偵測到手機方向轉變時，或特別於某方向偵測到的區段裡，手機應用程式編寫員可以自定想進行或展示訊息的程式段落。
jQuery Mobile Page Events
手機應用程式程式可簡單想像是由頁面(Page)所組成，而頁面(Page)可以有四大情況可以造成 jQuery Mobile Page EventsjQuery Mobile Page Events，這時手機應用程式編寫員可以善用Page Events去應對情況:
Page Initialization - 手機Apps頁面產生(creation)前及剛產生時，例子:
$(document).on("pagebeforecreate",function(event)
$(document).on("pagecreate",function(event)
Page Load/Unload - 手機Apps頁面正在運載(loading)/取消運載(unloading)/運載錯誤(failure)時，例子:
$(document).on("pagecontainerload",function(event,data)
$(document).on("pagecontainerloadfailed",function(event,data)
Page Transition - 手機Apps頁面轉換時，例子:
$(document).on("pagebeforeshow","#pagetwo",function()
$(document).on("pageshow","#pagetwo",function()
$(document).on("pagebeforehide","#pagetwo",function()
$(document).on("pagehide","#pagetwo",function()
Page Change - 手機Apps頁面更改(changed)或遇到錯誤(failure)時
