早速、jQuery Mobileを使ってスマフォで表示させてみた

に衝撃を受け、サンプルを眺めていても意味がないと思ったので

早速、jQuery Mobileを使ってサクサクっと画面を作ってみました。

また、スマフォだとどんな感じになるのかと表示もさせてみました。

・開発環境

Aptana Studio 3

・メインページ

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0" />
        <title>jQuery Mobile Test</title>
        <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
        <script src="jquery-1.5.min.js"></script>
        <script src="jquery.mobile-1.0a3.min.js"></script>
    </head>
    <body>
        <!-- メインページ -->
        <div data-role="page" id="foo">
            <!-- メインページのヘッダー -->
            <div data-role="header">
                <h1>メインページ</h1>
            </div>
            
            <!-- メインページの内容、サブページへのボタン -->
            <div data-role="content">
                <p>Go To Subpage
                    <a href="sampleJSMSub.html" data-transition="slide" data-role="button">SubPage</a>
                </p>
            </div>
            
            <!-- メインページのフッター -->
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>
        </div>
    </body>
</html>

・サブページ

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0" />
        <title>jQuery Mobile Test</title>
        <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
        <script src="jquery-1.5.min.js"></script>
        <script src="jquery.mobile-1.0a3.min.js"></script>
    </head>
    <body>
        <!-- サブページ -->
        <div data-role="page" id="bar">
    
            <!-- サブページのヘッダー -->
            <div data-role="header">
                <h1>サブページ</h1>
            </div>
            
            <!-- サブページの内容 -->
            <div data-role="content">
                <p>Sub Contents</p>
            </div>
            
            <!-- サブページのフッター -->
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>
        </div>
    </body>
</html>

・画面確認（Galaxy Sの標準スクリーンキャプチャを使用）

画面の体裁は、まだまだですがメインページでボタンを押下したら

ちゃんとサブページに遷移することを確認できました。

しかし、問題が遷移時に少し固まるようなことがあります。

スマフォの方の問題なのか、jQuery Mobileなのか、

ローカルサーバが貧弱なのかわからないままとなっています。

とりあえず、次はフッターがキッチリと画面いっぱいに

なるように体裁を整える調査をしてみます。

コメントを書く

トラックバック - http://d.hatena.ne.jp/fujikawa-y/20110216/1297784025

リンク元

		2011/02
日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28

TECHNOPOLIS-テクノポリス-

2011-02-16

早速、jQuery Mobileを使ってスマフォで表示させてみた