PhoneGapの準備
以下にまとめています。
PhoneGapによるiOSアプリ開発環境を構築する（Xcode編）
PhoneGapによるAndroidアプリ開発環境を構築する（Eclipse編）
jQuery Mobileの準備
jQuery Mobileを利用するためには次の3つが必要っぽいので、本家からダウンロードします。
・jquery-1.8.2.min.js （jQuery本体）
・jquery.mobile-1.2.0.min.css （jQuery Mobileのスタイルシート）
・jquery.mobile-1.2.0.min.js （jQuery Mobile本体）
ダウロードは次のサイトからできます。
http://jquery.com/download/ （jQuery本体）
http://jquerymobile.com/download/ （jQuery Mobileのスタイルシートと本体）
ファイルの配置
次のディレクトリを作って、準備した3つのファイルを配置しました。
www/spec/lib/jquery.mobile-1.2.0
ソースコード
www配下のindex.htmlを次のように変更します。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=default-width; user-scalable=no"/> <meta http-equiv="Content-type" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/css" href="spec/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css"> <script type="text/javascript" src="spec/lib/jquery.mobile-1.2.0/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="spec/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script> <title>Hello World!</title> </head> <body> <div data-role="page"> <div data-role="header"> <h1>header</h1> </div> <div data-role="content"> <h1>Hello World!</h1> </div> <div data-role="footer"> <h1>footer</h1> </div> </div> </body> </html>
iPhoneとAndroid端末のシミュレータで実行すると上図のようになりました。
0 件のコメント:
コメントを投稿