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>
ごちゃっとしてしまいましたが、下のようなファイル構成になっていれば問題ないです。
役立つ参考URL
いまから始める、jQuery Mobileの基本
サンプルで学ぶjQuery Mobileまとめ(前編)