jQuery Mobile 1.2の新機能「Fetch Links」を先取りする

本機能は、1.2では見送りになりました。(2012/8/10)

jQuery Mobileの1.1の安定版もまだ出ていませんが、1.2で追加される予定の新機能「Fetch links」が凄く良かったので、紹介したいと思います。（ここで紹介するFetch linksは、jQuery Mobile本家の開発中のブランチを動くように修正したものです。実際にリリースされる際には内容が変わる場合もあります。）

Fetch linksは、これまでのようにページ全体をajaxで取得してページ遷移するのではなく、一部のHTMLのみをajaxで取得して指定の要素に埋め込む機能です。この機能を利用すれば、タブやPull to Refresh（リストを引っ張ると更新されるようなUI）のようなものを簡単に作ることができます。

実際の動きは、デモを用意したので、見てもらったほうが早いでしょう。

例えば、あるページのコンテンツ部分だけ、取得して表示したい場合、次ように記述します。

<a href="target.html" data-target="#target" data-fragment="[data-role='content']">取得する</a>

<div id="target">
  ここにajaxで取得した要素が入ります。
</div>

リンクをクリックすると、リンク先のページのコンテンツをajaxで取得してdiv要素に埋めこみます。

リンクに追加した属性は、data-target属性とdata-fragment属性の2つだけです。data-target属性は、埋め込み先の要素をセレクターで指定します。data-fragment属性は、ajaxで取得したデータからどこを切り出すかをセレクターで指定します。これだけで、Fetch linksの機能が利用できます。

Fetch linksの設定を以下にまとめておきます。

属性	説明
data-target	埋め込み先の要素をセレクターで指定する
data-fragment	取得データからどこを切り出すかをセクレターで指定する　　:jqmData(role='page')
data-method	埋め込み方法を指定する。 (html/append/prepend/replace/before/after)
data-breakpoint	Fetch linksを実行する画面サイズのしきい値。実行しない場合は普通のリンクと同じ扱いになる（例: 600を指定するとウィンドウサイズが600より大きければ実行する）

Fetch linksでResponsive Web Design

Fetch linksの中でも面白いのが、data-breakpointです。この設定を利用すると、モバイルでは普通のページ遷移になりますが、デスクトップやタブレットだとフレームのように画面の一部のみを別のページで書き換えることができます。次のサンプルはdata-breakpointに600を指定したものです。

リンクボタンをクリックすると、画面サイズに応じて動作が変化します。

画面サイズが600pxより大きい場合、ボタンの下にページが追加されます。

画面サイズが600px以下の場合、通常通りページ遷移します。

Fetch linksを試してみる

jQuery Mobile 1.2のリリースが待てないという方ために、プラグインを用意しておきます。利用方法は、通常のプラグインと同じですが、簡単に説明します。（このプラグインは公式のものではありませんので、自己の責任の範囲で利用してください。）

1. githubからソースをダウンロードする。
https://github.com/pikotea/jquery-mobile-fetchlinks/

2. 解凍して、jquery.mobile.fetchlinks.cssとjquery.mobile.fetchlinks.jsをコピーして配置する。

3. Fetch Links Pluginを読み込む

<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" />  
<link rel="stylesheet"  href="jquery.mobile.fetchlinks.css" />  
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script>
<script src="jquery.mobile.fetchlinks.js"></script>

4. リンクにdata-targetなどのFetch linksの設定を追加して試してみる。

※ajaxで外部のリソースを読み込むことになるので、取得先のリソースは自分の管理下にあるものに限ったほうが良いでしょう。

まとめ

Fetch linksを利用すると、いろいろな機能に応用することができます。ページ遷移だけでなく、簡単にajaxライクなものができるようになるので、アップデートが楽しみですね。