"JQuery Mobile 2페이지 파일분할"의 두 판 사이의 차이

2013년 3월 2일 (토) 10:31 판

jQuery모바일 여러 섹션, 여러 파일
jQuery모바일 2페이지 파일분할
jQuery모바일 외부 페이지 연결

1 개요

리스트뷰 링크를 누르면 hello 페이지와 world 페이지를 불러오는 구조
페이지 부분(header, content, footer)이 교체되고, header에 Back 버튼이 생긴다.
외부 페이지 태그는 div를 사용해도 되고, section, header, footer를 사용해도 된다.^[1]
jQuery모바일에서 a 태그를 쓰면 클릭시에 링크된 페이지를 ajax 방식으로 읽어온다.^[2]

2 첫페이지

<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
	<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">
	<header data-role="header"><h1>메인메뉴 상단</h1></header>
	<div data-role="content">
		<div id="banner">
			<h2>메인메뉴</h2>
		</div>
		<p>다람쥐 헌 쳇바퀴에 타고파.</p>
		<ul data-role="listview" data-inset="true">
			<li><a href="external_page_hello.php">안녕</a></li>
			<li><a href="external_page_world.php">세상</a></li>
		</ul>
	</div>
	<footer data-role="footer"><h4>메인메뉴 상단</h4></footer>
</div>
</body>
</html>

3 hello 페이지 (div)

페이지, 헤더, 푸터로 div 태그를 사용한 예

<div data-role="page" id="hello">
	<div data-role="header"><h1>안녕 상단</h1></div>
	<div data-role="content">
		<p>안녕 내용</p>
		<p>div 태그 사용함</p>
	</div>
	<div data-role="footer"><h4>안녕 하단</h4></div>
</div>

4 world 페이지 (section)

페이지는 section, 헤더는 header, 푸터는 footer 태그를 사용한 예

<section data-role="page" id="world_page">
	<header data-role="header"><h1>세상 상단</h1></header>
	<div data-role="content">
		<p>세상 내용</p>
		<p>section, header, footer 태그 사용함</p>
	</div>
	<footer data-role="footer"><h4>세상 하단</h4></footer>
</section>

예제: http://jmnote.com/jqm/external_page.php

5 같이 보기

6 주석

↑ 예제 코드 참조. hello 페이지는 div 태그를, world 페이지는 section, header, footer 태그를 사용했다. (단, content 태그는 없으므로 그대로 div 태그를 사용한다.)
↑ page를 찾으면 그것을 읽어들이고, page 영역 바깥의 내용은 무시된다.

[1] 예제 코드 참조. hello 페이지는 div 태그를, world 페이지는 section, header, footer 태그를 사용했다. (단, content 태그는 없으므로 그대로 div 태그를 사용한다.)

[2] 를 찾으면 그것을 읽어들이고, page 영역 바깥의 내용은 무시된다.

[1]

[2]