UI Laboratory

UI 개발을 위한 레퍼런스

INDEX

jQuery Mobile 개발을 위한 기본 사항


jQuery Mobile 라이브러리 참조

모든 jQuery Mobile 애플리케이션은 두개의 핵심 라이브러리와 jQuery 라이브러리를 참조해야 한다. 아래는 CDN 서비스를 이용해 자바스크립트 파일과 CSS 파일, jQuery 라이브러리를 참조하고 있다.
			<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
			<script src="http://code.jquery.com/jquery-1.6.4.min.js">
			<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
		

HTML5의 data-* 속성

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

data-keyname="value"

예를 들어 다음과 같이 사용자정의 데이터를 정의하고,

			
  • jQuery Mobile
  • 스크립트 영역에서 dataset 속성을 이용해 데이터에 접근할 수 있다.

    			
    		

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

    jQuery Mobile은 UI의 영역과 역할을 data-role 속성으로 정의한다.

    page
    모바일 브라우저에 표시되는 하나의 페이지(page)를 정의한다. jQuery Mobile 에서는 data-role="page"가 지정된 영역을 하나의 페이지로 간주한다. 즉, 이 page 영역 단위로 모바일 브라우저에 표시된다.
    header
    페이지의 Header 영역을 정의한다. 페이지 상단에 툴바 형태로 표현되며, 보통 헤더(<h1>)태그와 함께 사용한다. 역시 <div> 태그에 data-role="header" 속성을 지정한다.
    content
    실제 페이지의 콘텐츠를 기술하는 영역이다. <div> 태그에 data-role="content" 속성을 지정한다.
    footer
    페이지의 footer 영역을 지정한다. 페이지 하단에 툴바 형태로 표현되며 <div> 태그에 data-role="footer" 속성을 지정한다.

    jQuery Mobile 사용자 인터페이스


    툴바