jQuery Mobile 기본 레이아웃과 속성

게시자: 대문 demun 카테고리: 퍼블리셔/jQueryMobile 2011.12.24 06:00
jQuery Mobile 은 핵심 라이브러리를 참조하는것만으로도 시작준비가 끝입니다.
즉 해더에 관련 js와 css를 참조하는 것이죠.
아래의 코드를 넣는것만으로 준비는 끝입니다.
예제를 한번 보시죠.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

1.0버젼이든 1.0a3버젼이든 상관없습니다.

HTML5 의 data-* 속성.

jquery Mobile은 페이지의 각 요소가 어떤 역활을 하게 될지 결정하기 위해 data-* 속성을 활용합니다. data-* 속성은 html5에 새로 추가된 것으로 로컬(Local)에 임의의 사용자정의 데이터를 저장하기 위한 표준 스펙(Spec)이며 html 요소에 직접 데이터를 정의할 수 있어 태그와 데이터의 연관성을 주기 편리합니다.
키/값 형태로 데이터를 정의할 수 있으며, 다음과 같이 'data-' 접두어로 시작해서 키와 값을 이어서 지정한다.
data-keyname="value"

예를들어 다음과 같이 사용자저의 데이터를 정의하고
<li data-version="alpha3" data-rul="http://jquerymobile.com">jQuery Mobile</li>

스크립트 영역에서 dataset 속성을 이용해 테이터에 접근할 수 있습니다.
<script type="text/javascript">
	var framework = document.getElementByTagName("li")[0];
	framework.dataset["version"] // alpha3
	framework.dataset["url"]	// jquerymobile.com
</script>

html5의 data-* 속성의 자세한 내용은 W3C의 스펙 정의서를 참고하면 됩니다.
html5의 data-* 속성 : http://dev.w3.org/html5/spec/elements.html

jQuery Mobile 페이지의 기본 레이아웃.

jQuery Mobile 은 UI의 영역과 역활을 data-role 속성으로 정의 합니다.
기본적인 페이지 레이아웃을 위해 다음과 같이 제공됩니다.
page.
모바일 브라우져에 표시되는 하나의 페이지(Page)를 정의합니다.
일반 웹 사이트에서의 ㅍ이지 단위는 실제 물리적인 html 파일 하나를 의마하는 경우가 많지만 jQury Mobile 에서는 dat-rol="page" 가 지정된 영역을 하나의 페이지로 간주합니다.
즉, 이 Page 영역 단위로 모바일 브라우져에 표시됩니다. 이 속성은 다른 html 요소들을 포함할 수 있는 컨테이너 태그에 지정하는 데 보통 영역을 구분하는 <div> 태그를 많이 사용합니다.
header.
페이지의 Header 영역을 정의합니다.
페이지 상단에 툴 바(Toolbar) 형태로 표현되며, 보통 헤더(h1) 태그와 함께 사용합니다.
역시 <div> 태그에 data-rol="header" 속성을 지정합니다.
content
실제 페이지의 콘텐츠를 기술하는 영역입니다.
<div> 태그에 data-role="content" 속성을 지정합니다.
footer
페이지의 Footer 영역을 지정합니다.
페이지 하단에 툴바 형태로 표현되며, 텍스트는 헤더 태그를 사용해 정의합니다.
<div> 태그에 data-role="footer: 속성을 지정합니다.

위와 같이 지정하고 사파리에서 사용자 에이전트를 iPhone 로 한다음 열어보았습니다.


 사용한 레이아웃 기본 템플릿 코드도 첨부합니다.


신고

댓글