[jQuery Mobile] ActionSheetプラグイン

jQuery Mobile用プラグイン “jQuery Mobile ActionSheet Plugin” を試してみました。

これは、jQuery Mobileで iOS のアクションシート風のインターフェースを簡単に実装するためのプラグインです。

通常、フレームワークでダイアログを表示するには外部に別のページとして作る必要があります。あるいは同ファイル内にページを書くこともできますが、その場合は複数ページテンプレートにしなければなりません。そうした煩雑さを避け、なおかつマークアップだけで簡単にポップアップを実装できるのが、このプラグインの強みでしょう。

とりあえず、簡単な実装方法とデモを用意してみました。

デモ

簡易的なデモページを、下に用意しました。

» ActionSheetプラグイン デモ

このデモページには、全部で3つのアクションシートを含ませています。ひとつは、ヘッダ内右側の「設定」ボタン。あとの2つは、コンテンツ中にあります。JavaScriptコードを全く書かずに、マークアップだけでこうしたポップアップが実現可能になります。

実装方法

サイトのhead部分で、プラグイン用のCSSとJSを取り込みます。

ボタンをつくり、そこに表示するポップアップを作るには、次のようにマークアップします。

ActionSheetプラグインとは

アンカーに data-role=”actionsheet” が指定されています。この時、href属性は指定されていません。ポップアップには、このリンク直後に置かれている要素が使われます。

別の方法としては、ポップアップ要素にidを指定し、data-sheet属性でそのidを参照することも出来ます。

ログイン
様々なコンテンツなどのマークアップ...

上の例では、アンカーに data-sheet=”login-form” が指定されています。そのため、直後の要素ではなく、別の場所にある id=”login-form” の指定された要素がアクションシートの中身になっています。

非常に簡易的なプラグインですが、手軽さが利点かなと思います。表示のされ方もポップで便利です。
動きやデザインも、CSSをいじることで変更可能です。

Related posts:

1. [jQuery Mobile] BartenderプラグインでフッタをiOSアプリ風にする
2. [jQuery Mobile] Markup Cheat Sheet
3. [jQuery Mobile] Paginationプラグイン
4. [jQuery Mobile] PhotoSwipeプラグイン
5. [jQuery Mobile] SEOとユーザビリティを両立させるポイント