jQuery Mobile

모바일 웹 페이지를 더 쉽고 빠르게 만들 수 있는 Sencha touch나 jQuery Mobile 같은 프레임워크가 발표됐습니다. 여기서는 jQuery Mobile을 다룹니다. jQuery Mobile은 jQuery 플러그인으로 모바일 웹 페이지를 만드는 데 쓰입니다. 범용적인 기능을 한꺼번에 제공하므로 프레임워크로 취급합니다.
jQuery Mobile의 기본 사용 방법은 jQuery UI와 매우 비슷합니다. jQuery Mobile 공식 홈페지 http://jquerymobile.com 사이트에서 다운 받을 수 있으며, 관련 예제와 무문서를 살펴볼 수 있습니다.

jQuery Mobile 사이트의 Download 탭에 들어가면 아래와 같이 간단한 사용 방법이 적혀 있습니다. jQuery와 마찬가지로 CDN 호스트를 사용하는 방식도 있고 직접 다운받아 사용할 수도 있습니다. CDN 호스트를 이용하려면 다운로드 페이지의 아래 그림에 위치한 Copy-and-Paste Snippet 부분을 복사해 사용합니다.
jQuery Mobile와 Phone Gap 등의 프레임워크를 함께 사용해 하이브리드 애플리케이션 제작할 때에는 오프라인 상태에서도 jQuery Mobile을 사용할 수 있어야 하므로 다운받아 사용해야 합니다.



jQuery Mobile을 사용하려면 아래와 같이 head 태그를 구성합니다.

							<head>
								<meta charset=utf-8>
								<title>new document</title>
								<!--[if lt IE 9]>
									<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
								<![endif]-->
								<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
								<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
								<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
							</head>