他と差別化できるjQuery Mobile

jQuery Mobileに対して、楽に実装できる反面自由度に欠けるのではないか、という印象をお持ちの方も少ないかと思います。

私の過去のエントリでも、jQuery MobileがいかにHTML完結でサイト構築できるかに焦点を当てて紹介してきました。

過去のエントリ :
jQuery Mobileのススメ - 商用利用に耐えうる3つの理由
jQuery Mobile - 標準テーマでらくらくデザイン
jQuery Mobile - data-transition属性でアニメーション指定

ところがどっこい、jQuery Mobileは独自にJavascript・CSSを記述して、独自に拡張可能なように設計されています。
他のサイトと差別化を図りたい場合も問題なく利用できるんですね。

「楽に」しかし「自由に」。

本当によくできたライブラリだと思います。

Javascriptで拾えるイベント

拾えるイベントの一覧です。
ざっと眺めただけでおおよそのイメージが掴めるのではないでしょうか。

• tap
• taphold
• swipe
• swipeleft
• swiperight
• orientationchange
• scrollstart
• scrollstop
• pagebeforeshow
• pagebeforehide
• pageshow
• pagehide
• pagebeforecreate
• pagecreate

最後の2つがやや分かりにくいので捕捉説明します。

jQuery Mobileはページがロードされた時にページを構成する部品をスマートフォンに最適化してくれます。

この処理はonloadのタイミングで実行されるのですが、

pagebeforecreateは、この部品の最適化処理の『前処理』のことを
pagecreateは、この処理の『後処理』のことを指します。

これらのタイミングで動作させたいJavascriptメソッドがあれば
pagebeforecreate, pagecreateにイベントとして登録すればよいのです。

イベントの登録は以下のような処理をonload時に実行すればOKです。

$('.hoge').live('tap',function(event){
  doSomething();
});

"hoge"クラスの要素がタップされた時にdoSomething()メソッドを実行しなさい、という命令ですね。


ちなみに最適化される部品についてはIBMさんが1枚の画像にしてくれています。
全部とは言えませんが、充分な部品が提供されていますね。

公式デモサイトの「Components」でこれらの部品の詳細が解説されています。
興味のある方はぜひご覧になってみてください。

jQuery Mobileで最適化される部品

参考 : jQuery Mobile の紹介 | IBM

提供されているメソッド

jQuery Mobileはいくつかのメソッドが外部から呼び出せるよう設計されています。
今回は、iPhone向け英単語学習サイト『eWords』で使用した２つのメソッドを紹介したいと思います。

$.mobile.changePage(to, transition, reverse, changeHash);

ページ遷移のためのメソッドです。
to, transition, reverseについては、前回のエントリでページ遷移の詳細を紹介したので、そちらをご覧になっていただくとより理解しやすいと思います。ぜひご覧になってください。

前回のエントリ : jQuery Mobile - data-transition属性でアニメーション指定

changeHashはやや分かりにくいですね。

jQuery Mobileは「back」ボタンを自動表示する機能を備えており、そのためにページ遷移を記録するための配列を内部にもっています。

changeHashはその配列を更新するか否かを指示するためのパラメータです。
「back」ボタンを非表示にする場合はfalseを指定しましょう。
※1
jQuery ObjectやAjaxパラメータを渡すことも可能です。jQuery Objectを渡した場合の動作については前回のエントリをご覧になってください。
公式ページによると、2つのページ参照を配列で渡すことができるようですが、よく意味が理解できませんでした。ご存じの方、教えて頂けると幸いです。
※2
アニメーションのデフォルト値は変更可能です。
詳細はこちらをご覧になってください。「defaultTransition」でページ内検索すると該当箇所に辿り着きます。

$.mobile. pageLoading(Done);

loadingメッセージを表示するためのメソッドです。

loadingメッセージとは重い処理を実行する時にだす
グルグル回るこれのことですね。



一般的には下記のようなソースをonloadイベントに記述することになると思います。

$('.hoge').live('tap',function(event){
  $.mobile. pageLoading(); // loadingメッセージを表示
  doSomethingHeavy();
  $.mobile. pageLoading(true); // loadingメッセージを隠す
});

"hoge"クラス要素がタップされた場合にloadingメッセージを表示して、何らかの重い処理をするというソースですね。

loadingメッセージのメッセージ内容は変更可能です。
詳細はこちらをご覧になってください。「loadingMessage」でページ内検索すると該当箇所に辿り着きます。

他のメソッドに興味のある方は、公式ページに詳しい解説があります。

是非参考にしてください。

最後に

公式ページにもデモが準備されています。

デモ : jQuery Mobile: Demos and Documentation : Pages

今回紹介したのは、APIの2行目「Events」と
3行目「Methods & Utilities」の内容の一部です。
興味がありましたら、ぜひ他の項目もご覧になってください。