jQueryMobile入門
HTML5ひな形
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5ひな形</title> </head> <body> </body> </html>
jQuery MobileとjQueryの読み込み
CDNからファイルを読み込む
<head> <meta charset="UTF-8"> <title>jQueryの読み込み：CDN</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
ファイルをローカルにダウンロードして利用する
<head> <meta charset="UTF-8"> <title>jQueryの読み込み：ダウンロード</title> <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css"> <script src="jquery-1.7.1.min.js"></script> <script src="jquery.mobile-1.1.1.js"></script> </head>
jQuery Mobileにおけるページの考え方
- 一般的なWebサイトの場合は1ページ＝1HTMLファイルですが、jQuery Mobileではカスタムデータ属性「data-role="page"」を持つdiv要素が1ページになります
- 次のようなHTMLでは「data-role="page"」を持つdiv要素が5つあるので、全部で5ページのサイトを表しています
<body> <div data-role="page" id="index"> TOPページ </div> <div data-role="page" id="about"> サイトについて </div> <div data-role="page" id="seminar"> セミナー情報 </div> <div data-role="page" id="access"> アクセス </div> <div data-role="page" id="contact"> お問い合わせ </div> </body>
この時点でブラウザーで表示すると、最初にページとして定義している「TOPページ」のdiv要素（id="index"）だけが表示され、他のページは表示されません。
