まず、jQueryとjQuery Mobileのダウンロードは以下のURLから行います。
jQueryのダウンロード
http://jquery.com/download/
jQuery Mobileのダウンロード
http://jquerymobile.com/
ファイルをダウンロードせずに、CDNを利用する手もあります。
CDNとは、Contents Delivery Networkといって、大容量のファイルや利用頻度が高いファイルなどをネットワーク経由で安定的に配布するために仕組みです。
GoogleのCDNを使うことが一般的なようです。
https://developers.google.com/speed/libraries/devguide?hl=ja#jquery
実際、どの環境に移動しても動くように書くなら、CDNを使った方がいいと思います。
開発から本番にあげるときに、jQueryのスクリプトを転送し忘れたりしたら、機能しなくなってしまうからです。
まぁ、そんなことはないと思うけど。
スマホの検証環境としては、シミュレータを使うのが一般的かと思いますが、
とりあえず、手元のWindowsで作ったhtmlが、iPhoneでどう動くのか見てみたい、という人は、コマンドプロンプトを立ちあげて、
ipconfig
と打ちます。
出てきたIPアドレスに、接続すると、手元の環境の情報を表示することができます。
こんな感じです。
適当なサンプルを作ってみます。
こんな感じの。
1ページ目
2ページ目
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=divice-width, initial-scale=1"> <title>jQuery Mobile Example</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" /> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <div data-role="page" data-theme="b" id="one"> <div data-role="header" data-theme="b"> <h2>7月24日</h2> </div> <div data-role="content"> <p>この日は札幌にいきます</p> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">10時</li> <li><a href="http://www.voyage1996.com/"><img src="img/soup.jpg">ヴォイジュ</a></li> </ul> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">11時</li> <li><a href="#"><img src="img/tokei.jpg">時計台</a></li> </ul> </div> <div data-role="footer" data-theme="b"> <h2><a href="#two">7月25日へ</a></h2> </div> </div> <div data-role="page" date-theme="e" id="two"> <div data-role="header" data-theme="e"> <a href="#one" data-direction="reverse">7月24日に戻る</a> <h2>7月25日</h2> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="#">menu1</a></li> <li><a href="#">menu1</a></li> </ul> </div> <div data-role="footer" data-theme="e"> <h2>フッター</h2> </div> </div> </body> </html>
中のHTMLについてですが、
一つのHTMLファイルに複数のページを入れるために、
<div data-role="page" data-theme="b" id="one">
のように書いています。idを使って、リンクを付けて飛びます。