利用 Swipe Event 控制換頁

image
Carousel 效果是我認為在 Mobile 上面最難處理的部分,大部分的作法都是用一個長條 div 只顯示其中一部份,再用 css : Left 或是 Top 去控制顯示的部分。如果是 jQuery 早期的動畫效果 jquery.animate() 就算是 ipad2 跑起來也是超頓的,唯一的解法就是利用 –webkit-Transform 來做處理。
在 jQuery Mobile 上面預設在換頁的時候就會觸發 –webkit-Transform 來處理換頁的特效(在不支援的瀏覽器上面會直接換頁顯示),但是這邊的特效跟其他 Framework 呈現方式比較不一樣的是在觸控移動的時候 jQuery Mobile Swipe 的方式是當使用者手指移動超過一段距離之後,就觸發 Swipe 事件。其他的 framework 如果有將 touchstart ,touchmove ,touchend 分別做處理的話,就可以在手指移動的同時就做畫面移動的效果,然後在 touch end 手指離開計算距離決定要不要呈現下一頁,抑或是距離不足就停留在原本頁面。jQuery Mobile 目前看起來沒有太重視這一塊,感覺他們的主要目標還是在容易開發、廣泛支援上面。

Swipe Events

基本上 jQuery Mobile 就是讓你很容易套用,所以要取得滑動的事件只要註冊 swipe event 就可以了,jQuery Mobile 利用 javascript 的 touch event 如果長度超過一定距離就觸發 swipe event。

  • 預設在一秒之內移動水平距離超過 30px 而且垂直小於 20px ,就會觸發 swipe 事件。
  • $.event.special.swipe.horizontalDistanceThreshold = 130; 設定 horizontalDistanceThreshold 參數,將原本水平移動距離 30px 改為 130px 之後,他才會觸發 swipe 事件,這邊就是根據測試的習慣來修改,避免因為太容易換造成其實 user 並沒有想要換頁,但是事件被觸發。
  • durationThreshold Swipe 動作要在多少時間下被完成,如果超過這個時間就不觸發 Swipe 事件,預設 1000 (ms)。
  • verticalDistanceThreshold 垂直移動不能超過多少(px)才觸發 Swipe。
  • scrollSupressionThreshold 水平移動超過多少(px)就停止原本垂直滾動。

Example

一開始我先建立一個 js 物件

Site: {
PrePage: { Url: "" },
NextPage: { Url: "" }
}

全網站註冊 Swipe 事件,只註冊一次

$(document).ready(function () {
$.event.special.swipe.horizontalDistanceThreshold = 130;
$(document).bind("swipeleft", function (e) {
$.mobile.changePage(Site.NextPage.Url, { transition: 'slide' });
});
$(document).bind("swiperight", function (e) {
$.mobile.changePage(Site.PrePage.Url, { transition: 'slide', reverse: true });
});
});

在每一頁載入的時候去修改物件的值

$('div:jqmData(role="page")').live('pageinit', function () {
Pru.Site.PrePage.Url = '@(PreviousSibling.Url)';
Pru.Site.NextPage.Url = '@(NextSibling.Url)';
});

這邊我是用 mvc3 Razor 搭配 ASP.NET MVC SiteMap provider 來控制,強力推薦 ASP.NET MVC SiteMap provider 很好用喔。全網站事件我只有註冊一次,如果在每一次 pageinit (pageint 是 jQuery Mobile 事件,ajaxload 新頁面進來觸發) 重複註冊的話,就會變成一次 swipe 換了好多頁。也有考慮過利用 bind unbind 來控制,但是似乎不是很容易,目前感覺上還是用 js 物件操作會比較方便。


jQuery Mobile | jQuery Mobile

HTML5 applicationCache javascript Events

image

利用 manifest 可以做到 application cache 在頁面載入的時候,瀏覽器就會先確定 manifest 中每個文件是不是都已經存在 application cache 裡面,上面的畫面就是 chrome 在確認的時候 console 顯示的資訊。

appCache = window.applicationCache;
appCache.addEventListener('cached', handleCacheEvent, false);
appCache.addEventListener('checking', handleCacheEvent, false);
appCache.addEventListener('downloading', handleCacheEvent, false);
appCache.addEventListener('error', handleCacheError, false);
appCache.addEventListener('noupdate', handleCacheEvent, false);
appCache.addEventListener('obsolete', handleCacheEvent, false);
appCache.addEventListener('progress', handleCacheEvent, false);
appCache.addEventListener('updateready', handleCacheEvent, false);

IE7,8 在 addEventListener 會沒有第三個參數,不過反正 IE 7,8 也不支援 application cache ….

checking

每次重新載入頁面都會觸發這個 event ,檢查 application cache 的檔案

downloading

manifest 檔案有被修改過,開始下載前觸發

progress

下載檔案的時候觸發,注意的是每下載完一個檔案就會觸發一次喔

cached

檔案全部被 cache 了,但是這個事件是第一次進入的時候 cache 完成發生的。

noupdate

manifest 檔案沒有修改過

updateready

不是第一次進入這個頁面,manifest 有修改過,而且下載已經完成,cached,noupdate,updateready 都是 application cache 沒有發生異常的狀況下最後一個事件。

obsolete

如果 manifest 檔案回傳給你 404 或 410 就會發生這個 event

Error

就是發生錯誤的時候囉,瀏覽器在一開始確認跟最後的時候都會確認 manifest 檔案。之前就發生過一個狀況是因為我不想要每次測試都修改 manifest 檔案,所以就讓 manifest 動態產生,再給他一個 # 加上 Datetime.Now.ToString,結果每次都錯誤,因為瀏覽器在第一次 checking 跟最後確認的時候取得的 manifest 檔案是不一樣的。

另外 manifest 檔案的 MIME 必須是 text/cache-manifest 而且編碼是 UTF-8,如果適用 IIS Server 就必須在 IIS 下的 MIME 額外去設定附檔名對應,預設副檔名 manifest 對應的是 application/x-ms-manifest ,目前看起來針對 application 的 manifest 似乎也沒有公認的副檔名,各家網站設定也都不一樣,反正只要回傳的 MIME 是 text/cache-manifest 就 OK 了


6.6 Offline Web applications — HTML Standard

HTML5 Rocks – A Beginner’s Guide to Using the Application Cache

Using HTML5 Offline Application Cache Events In Javascript

Mobile Web #5 判斷網路連線狀態

image

為了判斷網路連線的狀態,各家瀏覽器都有支援判斷的 js 語法,不過 IE 並不跟著走。

Internet explorer

這邊有很詳細的介紹

http://help.dottoro.com/ljcuiwad.php

Other Browsers

利用 navigator.onLine 可以抓到網路卡的狀態,不過並不一定是實際網路,如果是中間的 router 掛掉,或是伺服器真的有問題就沒這麼容易判斷囉。

    <script>
var
statusElem = document.getElementById('status')

setInterval(function () {
statusElem.innerHTML = navigator.onLine ? 'online' : 'offline';
}, 250);
</script>


http://html5demos.com/nav-online

http://help.dottoro.com/ljcuiwad.php

Mobile Web #4 利用 application caching 減少網路延遲

一直以來 Web 都有一個問題,就是網路連線的問題,連線的品質確實影響了 Web User Experience,以往在這情況下,我都會說”去怪你的網路公司吧”。但是到了 Mobile 裝置上,這個情況更顯得嚴重了,並不是罵一罵 3G 廠商就能解決的,就算稍微好心增加一點頻寬,也並不能消除連線問題。只能想辦法讓 User Experience 盡可能提升。

browser caching & application caching

既然如此要提升User Experience 的話當然就是在本機資源上作手腳,瀏覽器本身也就包含了 caching 的功能,不過以往的 browser caching 是不容易控制的,在 HTML5 之後把 cache 動作演變成可以從 application 去控制,也可以透過 javascript 去得知以及控制狀態。

manifest

manifest 是 HTML5 的新屬性,負責定義有關於整個網站 cache 的動作,利用 manifest 的設定相關網路 cache 還有連線離線的處理。目前五大瀏覽器除了 IE 之外,其他的最新版本都支援 manifest 。

CACHE MANIFEST
# VERSION 1.0

CACHE:
/favicon.ico
/Content/Images/desktop-icon.png
/Content/Images/startup-icon.png

在 CACHE 之後定義需要 CACHE 的檔案,在 manifest 中定義的 cache files 除非 manifest 檔案有更改,不然都會被視為是同樣的檔案,所以如果在這邊的資源有更改過,那你也必須修改 manifest 檔案(可以在#後面加上版本編號),不然瀏覽器還是會認為是同一份檔案。

NETWORK:  /Home/Member
/Report/

在 NETWORK 的區塊定義需要網路連線的部分,特定檔案或是包含子路徑,在這邊定義的部分不會被 cache 。

FALLBACK:
/Home/Offline

FALLBACK 這邊則是如果網頁在離線的狀態下被開啟(而且並沒有存在 cache 中),則會顯示這個頁面。


http://www.html5rocks.com/en/tutorials/appcache/beginner/

http://www.pluralsight-training.net/microsoft/

Mobile Web #1 – html tags for mobile

在 Mobile 裝置上面跟一般瀏覽器在讀取標籤方面會有一些小小的不一樣,

Viewport

<meta name="viewport" content="width=240, height=320, user-scalable=yes,
initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

設定放大縮小倍率,行動裝置上通常都可以放大縮小網頁,避免有些網頁在行動裝置上面看字會太小的貼心設計,不過假設你的 Web App 是專門為了行動裝置設計的,反而有可能會讓操作不順手或是破壞版面,這時候就可以藉由 Viewport 來做限制。

width 裝置寬度,或著用 width=device-width 設定為裝置寬度
height 裝置高度,或著用 width=device-width 設定為裝置高度
user-scalable 可被放大縮小
initial-scale 初始放大倍率
maximum-scale 最大放大倍率
minimum-scale 最小放大倍率

href=tel

<a href="tel:0912345678">聯絡我們</a>

可以讓手機自動撥出電話

href=sms

<a href="sms:0912345678">

讓手機傳簡訊

input type=date

<input type="date">

當 focus 在這個輸入框的時候會有日期選擇器出現,目前似乎只有 ios5 safari 支援

Reference

Mobile META Tags

Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5)