sonoshouのまじめなブログ

情報系大学生からのウェブ見習い人生の記録

jQuery Mobileの導入

jQuery Mobileを導入備忘録を。
jqueryとjquerymobile本体を読み込ませる方が簡単なのですが、
個人的にあまり好まないので、元ファイルをダウンロードして参照する方法を紹介します。


1.jquerymobile.comからZip Fileをダウンロード。
2.Zipファイルを解凍する。

中身は、

となっている。

このうち、
imagesフォルダ と jquery.mobile.min.css と jquery.mobile.min.js
を適切な場所にアップロードする。

※min.cssとmin.jsは元のcssとjsファイルを圧縮したファイル。
※正しいファイル名はバージョンによって異なります。

3.jquery.comからjQueryをダウンロード。
※Downloadのリンク先がjavascriptの場合は、右クリックで名前をつけて保存すれば良い。

4.ダウンロードしたjquery.min.jsを適切な場所にアップロード。

5.index.htmlを適切な場所にアップロード。

下にindex.htmlのサンプルを掲載しますので、参考にして下さい。

<!DOCTYPE html> 
<html> 
	<head> 
	<meta charset="UTF-8">
	<title>Sample</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
	<link rel="stylesheet" href="jquery.mobile-1.0b1.min.css" />
	<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="jquery.mobile-1.0b1.min.js"></script>
</head> 
<body>
	<div data-role="page" id="index"> 
		<div data-role="header"><h1>ヘッダー</h1></div> 
		<div data-role="content">コンテンツ</div> 
		<div data-role="footer"><h4>フッター</h4></div> 
	</div>
</body>
</html>


ごちゃっとしてしまいましたが、下のようなファイル構成になっていれば問題ないです。
f:id:sonoshou:20110730030405p:image




役立つ参考URL
いまから始める、jQuery Mobileの基本
サンプルで学ぶjQuery Mobileまとめ(前編)