2011/02/16

jQuery Mobile(jQuery モバイル)テンプレートをつくる-①

jQueryモバイルですが、現在はアルファ3です。バグも600以上あったものが2月16日現在では180ぐらいと非常に少なくなってきています。今回は、jQueryモバイルの実装編に移りたいと思います。

今回から実際に allWebのモバイル用のサイトを作成していきましょう。

jQuery Mobile 公式サイト




jQuery mobile git hub

準備するもの
  • テキストエディタ(utf-8が入力できるもの)
  • iOSシミュレーター もしくは 実機(実機がベター)
まずは、jQuery Mobile のページからテンプレートをダウンロードしましょう。

jQuery Mobile テンプレートページ

テンプレート
この状態では、iOS シミュレーターでレンダリングしても何もまだ表示されません。

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Page Title</title> 
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head> 
<body> 

...

</body>
</html>

ヘッダー部分、コンテンツ部分、フッター部分の追加
<div data-role="page">
 <div data-role="header">ヘッダー</div> 
 <div data-role="content">コンテンツ</div> 
 <div data-role="footer">フッター</div> 
</div>
これをbody要素内に記述すれば、簡単にヘッダー部分、フッター部分が用意されます。実際にiPhoneエミュレーターでみてみましょう。たしかに画面の上端と下端に黒い帯が追加されました。

しかし、このままでは文字化けをしています。

meta="charset" の追加
文字化けを回避するには 文字コード「utf-8」を指定する必要があります。
<!DOCTYPE html> 
<html lang="ja"> 
 <head>
 <meta charset="utf-8" />
 <title>トップページ</title> 
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head> 
<body>

<div data-role="page">

 <div data-role="header">
  <h1>トップページ</h1>
 </div><!-- /header -->

 <div data-role="content"> 
  <p>Page content goes here.</p>  
 </div><!-- /content -->

 <div data-role="footer">
  <h4>フッター</h4>
 </div><!-- /footer -->

</div><!-- /page -->

</body>
</html>


よくみるとフッター部分が「...」となっている。次回はこの部分の変更からはじめましょう。


Bookmark and Share