CodeZine(コードジン)

特集ページ一覧

「jQuery Mobile」を活用したスマートフォンサイト作成(中編)

「jQuery プラグイン」の利用(14)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/04/03 14:00
目次

パネルウィジェットのさまざまなオプション

 パネルウィジェットはさまざまなオプションにより表示のさせ方、操作の仕方などを変えることができます。

コンテンツ部分の固定・アニメーション表示の有無・パネルの閉じ方の設定

 元のコンテンツ部分を固定した状態でパネルウィジェットを表示する方法、表示の際のアニメーション表示をなくす方法、コンテンツ部分をタッチしてもパネルを閉じることができないようにする方法を紹介します。

 jQuery_Mobile_sample2_1.htmlのスクリプト変更部分のみ示します。

[リスト4]パネルウィジェットの表示(オプション1)(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>・第1章</p>
    <p>・第2章</p>
    <p>・第3章</p>
    <p>・第4章</p>
    <p>・第5章</p>
    <p>・第6章</p>
    <p>・第7章</p>
    <p>・第8章</p>
    <p>・第9章</p>
    <p>・第10章</p>
    <p>・第11章</p>
    <p>・第12章</p>
    <p>・第13章</p>
    <p>・第14章</p>
    <p>・第15章</p>
    <p><a href="#panelsample">タッチするとパネルが開くよ!</a></p>
	
</div>

 オプションは「div data-role="panel"」を指定しているdivタグ内に指定します。「data-position-fixed="true"」はパネルを表示するときはコンテンツ部分を一番上まで戻さずに、コンテンツ部分を固定することを意味します。何も指定しない既定値は「false」で、パネルを表示するとコンテンツ部分が一番上まで戻ります。一番下までスクロールしてコンテンツ部分が固定された状態の画面は以下のとおりです。

図9 コンテンツ部分が固定されて、パネルが表示されている状態の画面
図9 コンテンツ部分が固定されてパネルが表示されている状態の画面

 「data-animate="false"」は、左から滑らかにパネルが表示されるアニメーションを表示させないことを意味します。既定値は「true」で、この場合、左から滑らかにパネルが表示されます。「data-dismissible="false"」は、コンテンツ部分をタッチしてもパネルを閉じないことを意味します。既定値は「true」で、コンテンツ部分をタッチすればパネルが閉じます。なお、「<a href="#header" data-rel="close">パネルを閉じる</a>」はパネルを閉じるためのリンクで、ヘッダー部分のIDをリンク先に指定し、「data-rel="close"」を指定すればパネルを閉じることができます。

パネルのアニメーション・パネルの表示サイド変更

 パネルのアニメーション表示方法や、パネルを表示するサイドを変更する方法を紹介します。

 jQuery_Mobile_sample2_2.htmlのスクリプト変更部分のみ示します。

[リスト5]パネルウィジェットの表示(オプション2)(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」で、左からパネルウィジェットが表れます。右からパネルを表示した状態の画面は以下のとおりです。

図10 右にパネルを表示した画面
図10 右にパネルを表示した画面

 これらのオプションをまとめた表は以下のとおりです。

表2 パネルウィジェットのオプション
オプション 既定値 説明
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のさまざまな機能を紹介します。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 健志(コバヤシ タケシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5