(→같이 보기) |
잔글 (JQuery 모바일 2페이지 파일분할 문서를 JQuery모바일 2페이지 파일분할(으)로 옮기면서 넘겨주기를 덮어 씀) |
(차이 없음)
| |
2012년 12월 25일 (화) 23:36 판
- jQuery 모바일 여러 페이지, 여러 파일
- jQuery 모바일 2페이지 파일분할
1 개요
example03.php에서 리스트뷰 링크를 누르면 example03_hello.php와 example03.php_world.php를 불러오는 구조이다. header와 footer 부분은 유지되고 content 부분만 교체된다. (단 header에 Back 버튼이 생긴다.)
2 example03.php
<!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">
<div data-role="header">
<h1>메인메뉴 상단</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>메인메뉴</h2>
</div>
<p>다람쥐 헌 쳇바퀴에 타고파.</p>
<ul data-role="listview" data-inset="true">
<li><a href="example03_hello.php">안녕</a></li>
<li><a href="example03_world.php">세상</a></li>
</ul>
</div>
<div data-role="footer">
<h4>메인메뉴 하단</h4>
</div>
</div>
</body>
</html>
3 example03_hello.php
<div data-role="page" id="hello" data-title="안녕">
<div data-role="header"><h1>안녕 상단</h1></div>
<div data-role="content"><p>안녕 내용</div>
<div data-role="footer"><h4>안녕 하단</h4></div>
</div>
4 example03_world.php
<div data-role="page" id="hello" data-title="세상">
<div data-role="header"><h1>세상 상단</h1></div>
<div data-role="content"><p>세상 내용</div>
<div data-role="footer"><h4>세상 하단</h4></div>
</div>
5 같이 보기
로그인하시면 댓글을 쓸 수 있습니다.
{{ comment.name }}
{{ comment.created | snstime }}
-
{{comment.page_title}} ―{{comment.name}}