ActionSheetプラグイン
jQuery Mobile用プラグイン “jQuery Mobile ActionSheet Plugin“ を試してみました。
これは、jQuery Mobileで iOS のアクションシート風のインターフェースを簡単に実装するためのプラグインです。
通常、フレームワークでダイアログを表示するには外部に別のページとして作る必要があります。あるいは同ファイル内にページを書くこともできますが、その場合は複数ページテンプレートにしなければなりません。そうした煩雑さを避け、なおかつマークアップだけで簡単にポップアップを実装できるのが、このプラグインの強みでしょう。
とりあえず、簡単な実装方法とデモを用意してみました。
デモ
簡易的なデモページを、下に用意しました。
このデモページには、全部で3つのアクションシートを含ませています。ひとつは、ヘッダ内右側の「設定」ボタン。あとの2つは、コンテンツ中にあります。JavaScriptコードを全く書かずに、マークアップだけでこうしたポップアップが実現可能になります。
実装方法
サイトのhead部分で、プラグイン用のCSSとJSを取り込みます。
<link rel="stylesheet" href="jquery.mobile.actionsheet.css">
<script src="jquery.mobile.actionsheet.js"></script>
ボタンをつくり、そこに表示するポップアップを作るには、次のようにマークアップします。
<a data-role="actionsheet" data-icon="info">ActionSheetプラグインとは</a>
<div style="padding: 10px;">
<h3>ActionSheetプラグインとは</h3>
<p>簡単なアクションシートを、マークアップだけで設定するプラグインです。</p>
<a href="#" data-rel="close" data-role="button">閉じる</a>
</div>
アンカーに data-role=”actionsheet” が指定されています。この時、href属性は指定されていません。ポップアップには、このリンク直後に置かれている要素が使われます。
別の方法としては、ポップアップ要素にidを指定し、data-sheet属性でそのidを参照することも出来ます。
<a data-role="actionsheet" data-sheet="login-form">ログイン</a>
<p>様々なコンテンツなどのマークアップ...</p>
<div id="login-form">
<form>
<input type="text" name="username" placeholder="ユーザ名" />
<input type="password" name="password" placeholder="パスワード" />
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" data-theme="b" data-role="button">OK</a>
</div>
<div class="ui-block-b">
<a href="#" data-rel="close" data-role="button">Cancel</a>
</div>
</div>
</form>
</div>
上の例では、アンカーに data-sheet=”login-form” が指定されています。そのため、直後の要素ではなく、別の場所にある id=”login-form” の指定された要素がアクションシートの中身になっています。
非常に簡易的なプラグインですが、手軽さが利点かなと思います。表示のされ方もポップで便利です。
動きやデザインも、CSSをいじることで変更可能です。