jQuery Mobile HTML 기본 구조

jQuery Mobile HTML 기본 구조

jQuery Mobile HTML 의 기본구조는 다음과 같습니다.

1. viewport 설정

화면의 확대/축소를 방지하기 위해 위와 같이 설정합니다. 일반적으로 모바일 웹페이지는 디바이스 화면에

딱 맞게끔 디자인 되기 때문에 사용자에 의해 확대/축소되어 화면이 깨지는 것을 방지할 필요가 있습니다.

2. CSS, JS 파일 import

jQuery Mobile에서 사용하는 css, js를 import 합니다. 당연히 기본적으로 jQuery 라이브러리도 import 해야

합니다. 여기서 주의할 부분은 jQuery Mobile 의 init event handling의 등록 위치입니다.

jQuery Mobile 의 init event handling (초기화 이벤트 처리 부분) 은 jQuery 라이브러리 로딩 이 후 jQuery Mobile 

라이브러리 로딩 이 전에 위치하여야 합니다.

이유는 기본적으로 jQuery 객체를 사용할 수 있는 상태에서 jQuery Mobile의 초기화 설정을 해야하기 때문입니다.

3. page

jQuery Mobile에서는 data-role="page" 속성을 가지는 특정 div 1개가 1 page를 나타냅니다. page에 포함

되는 header와 footer는 필수가 아니나 content는 반드시 포함하여야 합니다.

4. header

header와 footer를 고정하려면, data-position="fixed" 속성을 주면 됩니다. 만약 content가 많은 경우 화면

을 터치 또는 클릭 했을 때 header와 footer 부분이 jQuery Mobile 에 의해 자동으로 hide 됩니다.

헤더 부분에는 button을 총 2개 까지 붙일 수 입습니다. 코드 상으로 3개 이상을 붙여도 무방하나, 그 중 

2개의 버튼만 실제로 화면에 보여지게 됩니다.

버튼이 오른쪽에 위치할 것인지 왼쪽에 위치할 것인지는 class 속성으로 ui-btn-left 또는 ui-btn-right 를

주어 제어할 수 있습니다. "여기는 헤더" 라는 h1 태그와 버튼의 코드 상의 위치는 어떻게 두어도 관계없이

동일하게 화면에 표현됩니다.

5. content

data-role="content" 로 설정하며, data-theme 속성으로 a,b,c 등을 적용할 수 있습니다. (header, footer

의 theme 적용 방법도 동일합니다.)

6. footer

footer에 위치할 버튼의 개수에는 제한이 없습니다. 

관련 포스트 목록

1. jQeury Mobile 페이지 전환 방법