独自ページ切り替え効果

独自効果の作成 (JSベース)

ユーザがリンクをクリックすると、jQuery Mobileはまず data-transition 属性が指定されていないかを確認します。ここで属性値として指定されたものが、ページ切り替えに使われる名前になります。属性が指定されていない場合、切替効果名はグローバル設定の $.mobile.defaultPageTransition (ページに対して)や $.mobile.defaultDialogTransition (ダイアログに対して)で指定されたものになります。

新たなページが読み込まれると、切替効果名で $.mobile.transitionHandlers に登録されたハンドラを用いてアニメーションが実行されます。ここでハンドラが見つかれば、そのハンドラが切替効果に用いられ、見つからなかった場合は $.mobile.defaultTransitionHandler が用いられます。

初期状態では、この $.mobile.transitionHandlers には “none” というハンドラが設定されているだけの状態です。このハンドラは単純に、遷移元のページから “ui-page-active” クラスを除去して、遷移先のページに付与するだけのものです。切り替えは即座に行われ、何のアニメーション効果もありません。

そして $.defaultTransitionHandler は、CSS3により定義された効果を用いるようになっています。これは前述のCSSベースの切替効果を実現するものです。

これら “none” と “css3” のハンドラは、$.mobile名前空間から利用できます。

$.mobile.noneTransitionHandler
$.mobile.css3TransitionHandler

切替効果ハンドラ

切替効果のハンドラとは、次のようなものです。

function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}

ハンドラは、必ず Deferred オブジェクトを作り promise を返す必要があります。この promise は、切替効果が実際に完了した時にシステムと連携するためのものです。この時に *deferred.resolve()* を呼ぶかどうかは、機能次第です。もし Deferred オブジェクトの考え方に馴染みが無い場合は "このページ(英語)":http://api.jquery.com/category/deferred-object/ を参照してください。

ハンドラの登録と呼び出し

切替効果のハンドラをつくったら、それをjQuery Mobileに通知するため $.mobile.transitionHandlers に登録してやる必要があります。この時の key が切替効果の名前になります。つまり、実際に用いる際に data-transition 属性に指定する名前です。

// Define your transition handler:

function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}

// Register it with jQuery Mobile:

$.mobile.transitionHandlers["myTransition"] = myTransitionHandler;

登録が終われば、それを data-transition に指定して実際に使うことができます。

<a href="#page2" data-transition="myTransition">Page 2</a>

このリンクがクリックされると、ページ読み込み後にハンドラが用いられます。

CSSベースの切替効果を独自ハンドラで上書きする

前述の通り、デフォルトで用意されている “none” 以外の切替効果は、すべてCSS3のアニメーションにより定義されています。これら既存の効果を上書きしたい場合、名前を重ねたハンドラで再定義することも可能です。たとえば、デフォルトの “slide” 効果をJavaScriptを使った効果で上書きしたい場合、次のようにします。

// Define your transition handler:

function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}

// Register it with jQuery Mobile:

$.mobile.transitionHandlers["slide"] = myTransitionHandler;

これによって、いずれかで “slide” 効果を呼んだ場合は、このハンドラが用いられます。

デフォルトの切替効果ハンドラを上書きする

初期状態では $.mobile.css3TransitionHandler が、デフォルトのハンドラです。指定された切替効果に該当するハンドラが $.mobile.transitionHandlers に見つからない場合は、このハンドラが呼ばれます。独自につくったハンドラをデフォルトにしたい場合は $.mobile.defaultTransitionHandler に設定します。

// Define your default transition handler:

function myTransitionHandler(name, reverse, $to, $from)
{
    var deferred = new $.Deferred();

    // Perform any actions or set-up necessary to kick-off
    // your transition here. The only requirement is that
    // whenever the transition completes, your code calls
    // deferred.resolve(name, reverse, $to, $from).

    // Return a promise.
    return deferred.promise();
}

$.mobile.defaultTransitionHandler = myTransitionHandler;

これによって $.mobile.transitionHandlers に無い効果を呼んだ場合は、このハンドラが用いられることになります。