プログラムでページ遷移＋WebStorageをちょこっと

jQueryMobile

こんにちは。
Adobe Shadowが発表されましたね。
モバイル開発者には必須のツールになるのではないでしょうか。
私もインストールして使ってみましたが、端末毎のテストが、すごく楽になりそうです。


さて、前々回の続きです。

「開閉パネルとボタンが複数あって、押されたボタンの種類によって、開くパネルを変えたい、と言うケースへの応用」です。
前々回の話しは、プログラムから開閉パネルを展開する方法 をご覧下さい。

画面は、今回も２つです。
ボタンが２つあるindexページと、開閉パネルが２つあるhogeページです。

今回は、ボタンAをタップすると、hogeに遷移して、パネルAが開き、ボタンBをタップすると、同様にhogeに遷移して、パネルBが開く、と言う動きを実現します。
ポイントは、ボタンにidを振って、タップイベントを拾える様にすることと、ボタンのhref要素に、遷移先idを書かずに、#を書く、と言う所です。

マークアップとスクリプトは、こんな感じです。

<!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="hoge2.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 id="anchorA" href="#" data-role="button">I am button A. Tap me.</a>
            <a id="anchorB" href="#" data-role="button">I am button B. 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>私は開閉パネルAです</h1>
                    <p>
                      タップする度に、開いたり閉じたりします。
                    </p>
            </div>
            <div id="bar" data-role="collapsible" data-collapsed="true">
                <h1>私は開閉パネルBです</h1>
                    <p>
                      私もタップする度に、開いたり閉じたりします。
                    </p>
            </div>
        </div>
        <div data-role="footer" data-theme="b">
            <h1><p>hogeページのフッタ</p></h1>
        </div>
    </div>


</body>
</html>

$("#index").live("pageinit",function(){
    $("#anchorA").bind("tap", function() {  //#anchorAのtapイベントにbindする関数を定義。
        localStorage['to'] = '#foo';        //Webストレージに変数を保管します。
        $.mobile.changePage( "#hoge", {     //プログラムからページ遷移します。
            type: "post"
        });
    });
    $("#anchorB").bind("tap", function() { //#anchorBのtapイベントにbindする関数を定義。
        localStorage['to'] = '#bar';
        $.mobile.changePage( "#hoge", {
            type: "post"
        });
    });
});
$("#hoge").live("pageinit",function(){
    $(function() {
        $("div[data-role*='page']").live('pageshow', function(event, ui) {
            var prevId = ui.prevPage[0].id;
            if ( prevId != 'index' ) {
                return;
            }
            var to = localStorage['to'];    //Webストレージからプロパティ値を取り出します。
            if ( to == null ){
                return;
            }
            $(to).trigger("expand");
            $.mobile.silentScroll($(to).offset().top);  //おまけ。開いたパネルの位置までスクロールします。
        });
    });
});

changepageとWebStorageを使うと出来ますよ、と言う話でした。

では、また。

中の人Bでした。