スクリーン

複数のDOM要素をコンテンツとして扱い、1つづつスライドさせて表示するスクリーン機能をサポートする部品です。横並び、縦並びに対応しています。

サンプルはこちら。

使用方法

ナビゲーションコントローラの実装について

ナビゲーションコントローラは、イベントをトリガしてスクリーンを操作するよう実装します。

トリガされたイベントは、ScreenUIControllerによって処理されます。ScreenUIControllerが受け付けているイベントは以下です。

prevPage
前のページへ移動。以下のパラメータを渡すことができます。
url
スクリーンを移動した後、移動後のコンテンツ領域に表示させるコンテンツのURLを指定します。指定しない場合はロードしません。
force
移動後のページがすでにコンテンツをロード済みの時に、再ロードするかどうかを指定します。trueなら再ロード、falseならロードしません。
nextPage
次のページへ移動。渡せるパラメータはprevPageイベントと同じです。
loadPage
現在表示中のスクリーン内のコンテンツに指定したURLのコンテンツをロードします。渡せるパラメータはprevPageイベントと同じです。
screenTrackstart
スクリーンをpx単位で移動(トラック操作)する準備を開始します。このイベントをトリガすると、screenTrackmoveイベントを受け付けるようになります。以下のようにパラメータを渡します。
trackSize
ここで指定した距離(px)のトラック操作が、スクリーン上での1ページ分の移動になります。トラック操作を行う要素の幅を指定すると、その要素の端から端までトラック操作をした時にスクリーン1ページ分移動するようになります。スクリーン幅と移動距離を1:1で対応させる場合はスクリーン幅を指定してください。
screenTrackmove
スクリーンをpx単位で移動します。パラメータ指定された分だけ動かします。以下のようにパラメータを指定します。
dist
移動距離。screenTrackstartイベント時に渡したtrackSizeに基づいてスクリーンの移動距離が計算されます。
screenTrackend
スクリーンのトラック操作を終了します。トラック操作終了時のスクリーンの位置からパラメータで指定したページへ移動します。パラメータは以下のように渡します。
page
'current'または'next'または'prev'を指定します。トラック操作開始時(screenTrackstart時)のページへ移動させるなら'current'、次(右)へ移動させるなら'next'、前(左)へ移動させるなら'prev'を指定します。
url
移動後のコンテンツ領域に表示させるコンテンツのURLを指定します。指定しない場合はロードされません。
force
移動後のページがすでにコンテンツをロード済みの時に、再ロードするかどうかを指定します。trueなら再ロード、falseならロードしません。urlパラメータが指定されている場合のみ有効です。

.screen要素は、アニメーション動作中には'isOperation'クラスが追加されます。

スクリーンがアニメション中かどうかは $('.screen').hasClass('isOperation'); で確認できます。

スクリーンがスライドされて、コンテンツが移動した時及び、削除時と追加時に、ナビゲーションコントローラのルートエレメントに対して以下のイベントが上がります。

screenchange
nextPageやprevPage及びトラック操作によってスクリーンに表示しているコンテンツが変更されたときに上がるイベントです。イベントハンドラの引数として、第1引数に現在のコンテンツ要素、第2引数に変更前のコンテンツ要素のjQueryオブジェクトが渡されます。 (コントローラでイベントを拾う時は、context.evArgsに順番に格納されています。以下のイベントも同様です。)
screenremove
スクリーンに表示しているページが削除されたときに上がるイベントです。イベントハンドラの第1引数に削除されたのコンテンツの要素がjQueryオブジェクトで渡されます。
screenadd
スクリーンにコンテンツが追加されたときに上がるイベントです。イベントハンドラの第1引数に追加されたのコンテンツの要素がjQueryオブジェクトで渡されます。

コンテンツ移動時及び追加時や削除時に何か処理をしたい場合は、ナビゲーションコントローラの{rootElement}で、イベントを拾えばよいでしょう。