パネルウィジェットのさまざまなオプション
パネルウィジェットはさまざまなオプションにより表示のさせ方、操作の仕方などを変えることができます。
コンテンツ部分の固定・アニメーション表示の有無・パネルの閉じ方の設定
元のコンテンツ部分を固定した状態でパネルウィジェットを表示する方法、表示の際のアニメーション表示をなくす方法、コンテンツ部分をタッチしてもパネルを閉じることができないようにする方法を紹介します。
jQuery_Mobile_sample2_1.htmlのスクリプト変更部分のみ示します。
<!--6.パネルの設定--> <div data-role="panel" id="panelsample" data-position-fixed="true" data-animate="false" data-dismissible="false"> 新機能のパネルウィジェットです</p> <a href="#header" data-rel="close">パネルを閉じる</a> </div> <!--8.ページ内容の設定--> <div data-role="content"> <p>・第１章</p> <p>・第２章</p> <p>・第３章</p> <p>・第４章</p> <p>・第５章</p> <p>・第６章</p> <p>・第７章</p> <p>・第８章</p> <p>・第９章</p> <p>・第１０章</p> <p>・第１１章</p> <p>・第１２章</p> <p>・第１３章</p> <p>・第１４章</p> <p>・第１５章</p> <p><a href="#panelsample">タッチするとパネルが開くよ！</a></p> </div>
オプションは「div data-role="panel"」を指定しているdivタグ内に指定します。「data-position-fixed="true"」はパネルを表示するときはコンテンツ部分を一番上まで戻さずに、コンテンツ部分を固定することを意味します。何も指定しない既定値は「false」で、パネルを表示するとコンテンツ部分が一番上まで戻ります。一番下までスクロールしてコンテンツ部分が固定された状態の画面は以下のとおりです。
「data-animate="false"」は、左から滑らかにパネルが表示されるアニメーションを表示させないことを意味します。既定値は「true」で、この場合、左から滑らかにパネルが表示されます。「data-dismissible="false"」は、コンテンツ部分をタッチしてもパネルを閉じないことを意味します。既定値は「true」で、コンテンツ部分をタッチすればパネルが閉じます。なお、「<a href="#header" data-rel="close">パネルを閉じる</a>」はパネルを閉じるためのリンクで、ヘッダー部分のIDをリンク先に指定し、「data-rel="close"」を指定すればパネルを閉じることができます。
パネルのアニメーション・パネルの表示サイド変更
パネルのアニメーション表示方法や、パネルを表示するサイドを変更する方法を紹介します。
jQuery_Mobile_sample2_2.htmlのスクリプト変更部分のみ示します。
<!--6.パネルの設定--> <div data-role="panel" id="panelsample" data-display="overlay" data-swipe-close="false" data-position="right"> 新機能のパネルウィジェットです </div>
「data-display="overlay"」は、コンテンツ部分に重ねるようにパネルを表示させることを意味します。既定値は「reveal」で、滑らかにコンテンツ部分がスクロールし、パネルが表示されます。また、「push」という指定もでき、この場合はコンテンツ部分をパネル部分が押し出すようにしてパネルが表示されます。
「data-swipe-close="false"」は、パネル部分をスワイプしてもパネルを閉じることができないようにすることを意味します。既定値は「true」で、パネル部分をスワイプすればパネルを閉じることができます。
「data-position="right"」は、右からパネルウィジェットを表示することを意味します。既定値は「left」で、左からパネルウィジェットが表れます。右からパネルを表示した状態の画面は以下のとおりです。
これらのオプションをまとめた表は以下のとおりです。
| オプション | 既定値 | 説明 |
|---|---|---|
| data-position-fixed | false |
パネル表示時にコンテンツ部分を最上部まで戻す（false）か 固定する（true）か |
| data-animate | true | パネル表示時にアニメーション表示をするかしないか |
| data-dismissible | true |
コンテンツ部分をタッチしてパネルを閉じることができる（true）か できない（false）か |
| data-display | reveal |
パネル表示時のアニメーションを （reveal、overlay、push）から選択 |
| data-swipe-close | true |
パネル部分をスワイプしてパネルを閉じることができる（true）か できない（false）か |
| data-position | left |
パネル部分を左から表示させるか（left）、 右から表示させるか（right） |
まとめ
今回はjQuery Mobile1.2.0以降で採用された機能を使って、さまざまなスマートフォン用サイトを作成してみました。jQuery Mobileはバージョンアップごとにさまざまな表現ができるようになっていて、最新版のjQueryにも対応していますので、ぜひ最新版を使って、表現豊かなスマートフォン用サイト作りを目指してみてはいかがでしょうか。次回もjQuery Mobileのさまざまな機能を紹介します。
