jquerymobile jquerymobile jquery jqueryJS jquerymobile jquerymobileJSCSS contextpath css

jquery-mobileのライブラリ構成 jquery-mobileを構成するライブラリはたった３ファイル！！ ・jquery ⇒ jqueryのJSファイル ・jquery-mobile ⇒ jqueryを使ったmobile用JSファイルとCSSファイル {contextpath}/ ├css/ 　│ └jquery. mobile-{version}. css ├js/ │ ├jquery. mobile-{version}. js │ └jquery-{version}. js └html

jquery-mobileの基本構成① jquery-mobileを使った画面の基本構成はこれだけ。 <!DOCTYPE html> <head> 必須 jquery、及び、jquery-mobileのjs、cssを読み込み。 </head> <body> 必須 divタグ(page部) divタグ(header部) divタグ(content部) divタグ(footer部) 任意 </body </html>

jquery-mobileの基本構成② <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0, minimum-scale=1. 0, maximum-scale=1. 0, user-scalable=no"> <title>forefrontier title. </title> <link rel="stylesheet" href="css/jquery. mobile-1. 1. 1. min. css" /> <link rel="stylesheet" href="css/forefrontier. css" /> <script src="js/jquery-1. 7. 1. min. js"></script> <script src="js/config. js"></script> <script src="js/jquery. mobile-1. 1. 1. min. js"></script> <script src="forefrontier. js"></script> </head> <body> <div data-role="page" id="page 1"> <div data-role="header"> <h 1>ヘッダー</h 1> </div> <div data-role="content"> メインコンテンツ </div> <div data-role="footer"> フッター </div> </body> </html>

画面遷移の仕組み Ajax使用時の画面遷移はこうなっている。 sample 1. html sample 2. html <!DOCTYPE html> <head> </head> <body> <div data-role="page" id="page 1"> <div data-role="header"> <h 1>ヘッダー１</h 1> </div> <div data-role="content"> メインコンテンツ１ <a href=“sample 04 -1. html”>次へ</a> </div> <div data-role="footer"> フッター１ </div> <!DOCTYPE html> <head> </head> <body> <div data-role="page" id="page 2"> <div data-role="header"> <h 1>ヘッダー２</h 1> </div> <div data-role="content"> メインコンテンツ２ <a href=“sample 04 -2. html”>前へ</a> </div> <div data-role="footer"> フッター２ </div> </body </html> ③DOMの body要素内 に追加 ①Ajaxで 要求 ②datarole=“page 2” のみ取得

イベント処理の仕組み jquery-mobileのイベント処理の仕組みはどうなっているのか？ （参考：http: //screw-axis. com/2012/01/20/jquery-mobile-pageevent-cheatsheet/）