jQuery Mobile 프레임웍은 HTML5의 doctype에서 최적으로 지원 되며, 페이지 구조는 외부의 페이지나 내부의 페이지를 쉽게 지원 할 수 있도록 되어 있습니다.
jQuery Mobile을 사용하기 위해서는 html 문서의 head 태그에 아래 3가지 파일을 참조해 주면 됩니다.
1. jQuery 자바스크립트
2. jQuery Mobile 자바스크립트
3. 모바일 테마 css
참조 파일은 직접 홈페이지에서 다운받아서 호스팅 하셔도 되고,
다운로드 : http://jquerymobile.com/download/
CDN 호스팅을 하고 있는 url을 사용하셔도 됩니다. 저는 CDN 방식을 사용해서 html 문서를 만들어 보겠습니다.
2011년 7월에는 beta버젼입니다.
<head>
<title>JQM 기본 page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</script>
</head>
link 태그로 css 파일을 참조하고, script 태그로 jquery와 jqeury mobile의 js 파일을 참조하므로서 해당 html 문서에서 jQuery Mobile의 사용이 가능해 졌습니다.
그럼, 이제 본문에 내용을 넣어 볼까요?
jQuery Mobile 에서는 기본적으로 page 구조를 정의해 놓았습니다.
이런 page 구조를 그대로 따라만 해도 하나의 페이지를 만들수 있고, 해당 부분에 기본적인 css 를 적용하여 이쁘게 만들어 줍니다.
기본 구조는 다음과 같습니다.
<body>
<div data-role="page">
<div data-role="header">
<h1>이 페이지의 해더 부분입니다.</h1>
</div><!-- /header -->
<div data-role="content">
<p>이 페이지의 본문 내용입니다.</p>
<ul>
<li>안녕하세요.</li>
<li>Hello World!! jQuery Mobile~.</li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>이 페이지의 푸터 부분입니다.</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
"data-role" 속성을 태그에 추가하여 이 부분이 어느 부분인지를 명시해 줍니다.
"page" 값을 가지고 있는 태그로 부터 사용자에게 보여지는 페이지가 시작됩니다.
그 아래에 header 부분, content 부분, footer 부분을 명시해 주면, 프레임웍이 자동으로 해당 부분에 알맞은 css를 적용시켜 주게 되고 크롬 브라우저에서 아래와 같이 보여지게 됩니다.
</head>
link 태그로 css 파일을 참조하고, script 태그로 jquery와 jqeury mobile의 js 파일을 참조하므로서 해당 html 문서에서 jQuery Mobile의 사용이 가능해 졌습니다.
그럼, 이제 본문에 내용을 넣어 볼까요?
jQuery Mobile 에서는 기본적으로 page 구조를 정의해 놓았습니다.
이런 page 구조를 그대로 따라만 해도 하나의 페이지를 만들수 있고, 해당 부분에 기본적인 css 를 적용하여 이쁘게 만들어 줍니다.
기본 구조는 다음과 같습니다.
<body>
<div data-role="page">
<div data-role="header">
<h1>이 페이지의 해더 부분입니다.</h1>
</div><!-- /header -->
<div data-role="content">
<p>이 페이지의 본문 내용입니다.</p>
<ul>
<li>안녕하세요.</li>
<li>Hello World!! jQuery Mobile~.</li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>이 페이지의 푸터 부분입니다.</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
"data-role" 속성을 태그에 추가하여 이 부분이 어느 부분인지를 명시해 줍니다.
"page" 값을 가지고 있는 태그로 부터 사용자에게 보여지는 페이지가 시작됩니다.
그 아래에 header 부분, content 부분, footer 부분을 명시해 주면, 프레임웍이 자동으로 해당 부분에 알맞은 css를 적용시켜 주게 되고 크롬 브라우저에서 아래와 같이 보여지게 됩니다.
Hello World! 찍었으니 반은 했네요.^^
'----- IT ----- > jQuery Moblie' 카테고리의 다른 글
| jQuery Mobile - 다이얼로그 (0) | 2011.05.02 |
|---|---|
| jQuery Mobile - page transitions (0) | 2011.05.02 |
| jQuery Mobile - 이전페이지로 (0) | 2011.04.27 |
| jQuery Mobile - 외부, 내부 page (0) | 2011.04.23 |
| jQuery Mobile 이란? (0) | 2011.04.22 |
댓글