티스토리 뷰

Javascript

jQuery Mobile 기본 템플릿 사용 요약

잠덜 2011. 4. 14. 17:56

헤더 선언

  • jQuery Mobile 사이트의 doctype 은 반드시 HTML5 doctype 으로 선언.
  • 페이지 상단에 jQuery, jQuery Mobile, Mobile Theme CSS 를 참조.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 
<body>
...
</body>
</html>

data-role="page"

  • <body> 태그 안에 뷰나 페이지 단위로 data-role=“page” 속성 명시
  • 일반적으로 <div> 태그를 사용하므로…

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 
<body>
    <div data-role="page">
    ...
    </div>
</body>
</html>

header, content, footer

  • page 컨테이너 안에는 어떤 HTML 코드라도 들어갈 수 있으나,
  • jQuery Mobile 에서는 일반적으로 header, content, footer 가 들어가 있는 형태로 구성한다.

<body>
    <div data-role="page">
        <div data-role="header">...</div> 
        <div data-role="content">...</div> 
        <div data-role="footer">...</div>
    </div>
</body>

페이지 템플릿

  • 아래는 jQuery Mobile 의 표준 템플릿 코드 이다.

<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
	<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Page content goes here.</p>		
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /header -->
</div><!-- /page -->

</body>
</html>

외부 페이지 연결

  • 외부 링크(href)는 내부적으로 Ajax 요청(Hijax)으로 변환되고, 로딩 중 화면이 표시된다.
  • Ajax 요청이 성공하면, 새로운 페이지 콘텐트가 DOM 에 추가되고, 새로운 페이지는 페이지 전환 효과와 함께 나타난다.
  • Ajax 요청이 실패하면, 조그만 에러 메시지를 오버레이 형태로 보여준다.

로컬 링크와 페이지 내부 링크

  • 하나의 HTML 문서는 여러개의 'pages' 를 포함할 수 있다.
  • 각 'page' 블럭은 고유 아이디를 갖고 있어야 한다. (id=“foo”)
  • 고유 아이디는 내부 링크에 사용될 수 있다. (href=”#foo”)

<body> 
<!-- Start of first page -->
<div data-role="page" id="foo">

	<div data-role="header">
		<h1>Foo</h1>
	</div>

	<div data-role="content">	
		<p>I'm first in the source order so I'm shown as the page.</p>		
		<p>View internal page called <a href="#bar">bar</a></p>	
	</div>

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
</div>
<!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">

	<div data-role="header">
		<h1>Bar</h1>
	</div>

	<div data-role="content">	
		<p>I'm first in the source order so I'm shown as the page.</p>		
		<p><a href="#foo">Back to foo</a></p>	
	</div>

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
</div>
<!-- /page -->
</body>

  • 링크될 페이지가 data-role=“page” 를 여러개 갖고 있을 경우,
  • 링크에 rel=“external” 속성을 붙여준다.
  • <a href=“multipage.html” rel=“external”>Multi-page link</a>

[출처]http://webkebi.zany.kr:9001/doku.php?do=export_xhtml&id=cate_web%3Aanatomy_of_page%3Astart

 

저작자표시

'Javascript' 카테고리의 다른 글

PHP에서 json_encode로 Json Data 통신 기본형 예제 소스  (0) 2012.07.13
스마트폰 터치, jquery touchmove 제어  (0) 2012.03.20
Ajax, hash들과 & 역사(관련 이야기)  (0) 2011.03.24
a태그에서 onclick으로 함수 실행할때 href 동작 안하도록  (0) 2011.03.14
javascript의 new Date()를 이용한 시간 출력 소스 초간단!! html 바로 적용 가능  (0) 2011.03.14
공유하기 링크
댓글

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함