jQuery Mobile逆引きリファレンス
Panelウィジェットで左右からスライド表示するには？
左右からスライド表示するパネルを、jQuery MobileのPanelウィジェットで手軽に作成する方法を解説する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
Panelウィジェットを利用することで、左右からスライド表示するようなパネルを作成できます。例えばスマホ版のFacebookアプリでは、メニュー表示のために利用されています。その他、サブフォームや補足情報の表示など、限られた表示領域の中で、頻繁にアクセスする情報を表示するのに適しています。
Panelウィジェットの基本
まずは、ボタンクリックでパネルをスライド表示するサンプルで、Panelウィジェットの用法を確認します。
|
<div data-role="page">
<!--1パネル領域を定義-->
<div id="panel" data-role="panel">
<h3>補足情報</h3>
<p>Panelウィジェットを利用することで、左右からスライド表示するようなパネルを作成できます。たとえばスマホ版のFacebookアプリでは、メニュー表示のために利用されています。</p>
<p>その他、サブフォームや補足情報の表示など、限られた表示領域の中で、頻繁にアクセスする情報を表示するのに適しています。</p>
<!--3パネルを閉じるためのリンクボタン -->
<a href="#" data-rel="close"
class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">閉じる</a>
</div>
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<!--2パネルを開くためのリンクボタン-->
<a href="#panel" class="ui-btn ui-icon-info ui-btn-icon-left">補足情報</a>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
|
［補足情報］ボタンをタップ
パネルとして表示すべき領域は、<div data-role="panel">要素で表します（1）。この際、パネル領域は、「ページ配下で、ヘッダー／コンテンツ／フッター領域の前、または後方に来るように」配置します（間に挟んではいけません）。前後いずれに配置するかは、（例えば）スクリーンリーダ―などでパネルの内容をどのタイミングで読み込むかによって決めます。また、あとでパネルを呼び出す際に特定できるよう、id属性は必須です。
パネルを呼び出しているのは、2のハイパーリンクです。href属性にはパネルのid値を「#id」の形式で指定します。パネルを閉じるためには、3のように「data-rel="close"」属性を付与したボタンを設置します。明示的に［閉じる］ボタンが設置されなかった場合には、コンテンツ領域をタップすることでもパネルを閉じることができます。
Panelウィジェットの主なパラメーター
Panelウィジェットで利用できる主なパラメーターを、以下でまとめます。カッコ内はデフォルト値を表します。
（1）data-animateパラメーター（true）
パネルを表示する際にスライド効果を付与するかどうかを決めます。「false」（デフォルトは「true」）とした場合にはアニメーションは実行されず、そのままパネルが表示されます。
（2）data-displayパラメーター（reveal）
パネルの表示方法を指定します。デフォルトの「reveal」（＝ずらす）の他、「push」（＝コンテンツを押し出す）、「overlay」（＝コンテンツに重ねる）などの値を指定できます。以下は、「overay」を指定した場合の例です。
|
<div id="panel" data-role="panel" data-display="overlay">
|
（3）data-positionパラメーター（left）
パネルを表示する位置を表します。デフォルトではコンテンツ領域の左側に表示しますが、「right」を指定することで右側から表示できます。
|
<div id="panel" data-role="panel" data-position="right">
|
（4）data-position-fixedパラメーター（false）
パネルを表示したときに、コンテンツを固定するか、先頭まで戻すかどうかを決めます。「true」でコンテンツ領域を固定し、パネルの表示時にもコンテンツはそのままの位置を維持します。
|
<div id="panel" data-role="panel" data-position-fixed="true">
|
［補足情報］ボタンをタップ
（5）data-dismissible（true）／data-data-swipe-close（true）パラメーター
いずれもパネルを閉じる方法を決めるためのパラメーターです。data-dismissibleパラメーターはコンテンツ領域をタップしたときにパネルを閉じるか、data-swipe-closeパラメーターはパネルをスワイプしたときにパネルを閉じるかを、それぞれ決定します。いずれのパラメーターも「false」の場合には、明示的にパネルを閉じるためのボタンなどを用意しなければ、パネルを閉じることはできません。
パネルを複数ページで共有する
パネルをページ要素の外に配置することで、複数ページで共有することもできます。
|
<script>
$(function() {
$('[data-role="panel"]').panel({ theme: 'b' });
});
</script>
……中略……
<div data-role="page">
……中略……
<div role="main" class="ui-content">
<a href="#panel" class="ui-btn ui-icon-info ui-btn-icon-left">補足情報</a>
<a href="panel_ex2.html" class="ui-btn ui-icon-info ui-btn-icon-left">
次ページ</a>
</div>
……中略……
</div>
<!--パネルはページ要素の外で定義-->
<div id="panel" data-role="panel" data-position-fixed="true">
……中略……
</div>
|
パネル要素をページの外で定義した場合、Ajax式リンクの前後で要素は文書ツリーに維持されます。結果、他のページでも呼び出せるのです（この例であれば、リンク先であるpanel_ex2.htmlでパネル要素をあらためて準備する必要はありません）。
ただし、この際、パネル要素は自動では初期化されません。サンプルの太字部分のように、panelメソッドを呼び出して、手動で初期化してください。また、パネルはもともと親要素からテーマを継承しますので、親となるページ要素がない場合は、テーマ（themeオプション）を明示的に指定しておきます。
※以下では、本稿の前後を合わせて5回分（第9回～第13回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
9. Navbarウィジェットでナビゲーションバーを作成するには？
アプリ共通のリンクやコマンドボタンなどを配置するために使われるナビゲーションバーを、jQuery MobileのNavbarウィジェットで手軽に作成する方法を解説する。
10. Tabsウィジェットでタブパネルを作成するには？
パネルの端に配置されたタブをクリックするとパネル内容が切り替わるUIを、jQuery MobileのTabsウィジェットで手軽に作成する方法を解説。
11. 【現在、表示中】≫ Panelウィジェットで左右からスライド表示するには？
左右からスライド表示するパネルを、jQuery MobileのPanelウィジェットで手軽に作成する方法を解説する。
12. Popupウィジェットでポップアップを表示するには？
ツールヒント／ダイアログ／ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。
13. Popupウィジェットで画像ボックスやダイアログなどを作成するには？
ダイアログ／画像ボックス／ポップアップメニューのような複雑なポップアップを、jQuery MobileのPopupウィジェットで作成する方法を解説する。
