プログラムから開閉パネルを展開する方法

jQueryMobile

こんにちは。
中の人Ｂです。

jQueryMobile(以降、jQMと書きます)で便利に使えるコンポーネントの一つに、開閉パネルがあります。これを何かのイベントが発生したタイミング(例えば、ページが読み込まれたタイミング)で、開きたい、と言うことがあります。

これをやろうとして、本家のサイト(http://jquerymobile.com/demos/1.0.1/)や、翻訳サイト(http://dev.screw-axis.com/doc/jquery_mobile/)などを見たのですが、情報がなくて、困り果てたので、ここにその実装の方法を書こうと思います。

今回のサンプルでは、ページを2つ用意します。idをindexとhogeとします。
画面イメージはこんな感じです。普通にマークアップしただけだと、[Tap Me]ボタンをタップして、hogeページを開くだけのものです。


このマークアップは、こんな感じです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name = "format-detection" content = "telephone=no">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script src="hoge.js"></script><!-- このファイルは、別途用意します-->
</head>

<body>
    <div data-role="page" id="index" data-theme="b">
        <div data-role="header" data-theme="b">
            <h1><p>indexページのヘッダ</p></h1>
        </div>
        <div data-role="content">
            <a href="#hoge" data-role="button">Tap me</a>
        </div>
        <div data-role="footer" data-theme="b">
            <h1><p>indexページのフッタ</p></h1>
        </div>
    </div>

    <div data-role="page" id="hoge" data-theme="b">
        <div data-role="header" data-theme="b">
            <h1><p>hogeページのヘッダ</p></h1>
        </div>
        <div data-role="content">
            <div id="foo" data-role="collapsible" data-collapsed="true">
                <h1>私は開閉パネルです</h1>
                    <p>
                      タップする度に、開いたり閉じたりします。
                    </p>
            </div>
        </div>
        <div data-role="footer" data-theme="b">
            <h1><p>hogeページのフッタ</p></h1>
        </div>
    </div>


</body>
</html>

hoge.jsにコードを書いて、hogeページが開いたタイミングで、展開パネルが自動的に開くようにします。ドキュメントを読んでも、プログラムから展開パネルの開閉を操作する記述はないのですが、jQMの実装モジュールを読むと、"expand"と言うイベントが定義されています。
実は、それさえ分かれば、何のことはなくて、数行のコードを書くだけです。

hoge.js

$("#hoge").live("pageinit",function(){
    $(function() {
        $("div[data-role*='page']").live('pageshow', function(event, ui) {
            $("#foo").trigger("expand");
        });
    });
});

実は、今回の例では、最初から開いとけば良いじゃん、と言う落ちになるのですが、この実装は、開閉パネルとボタンが複数あって、押されたボタンの種類によって、開くパネルを変えたい、と言うケースへの応用を想定しています。次回(正確には次々回)は、その辺りを書く予定です。

こう言う隠しイベント(隠してるわけじゃないと思いますが)みたいなのが他にも色々ありそうです。自分で見つける楽しみもあるんですけど、時間が無い時は焦ります。

興味の有る方は、http://jquerymobile.com/download/からzipファイルを落として、jquery.mobile-1.0.1.js(minの付いてない方)を読んでみて下さい。
1.0.1は、現時点でのものですので、その時の最新のものを読めば良いと思います。


それでは。

本日は、中の人Ｂが担当しました。