page
가장 상위의 컴포넌트로 page를 data-role의 값으로 하고 모든 컴포넌트를 포함한다.
page의 일반적인 구성
아래와 같이 body 태그 하위에 위치하고 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>
싱글 페이지 템플릿과 멀티 페이지 템플릿
page가 하나의 웹페이지에 여러개 등장하면 멀티 페이지 템플릿이라고 부르고, 이에 상대적으로 하나의 페이지만 있는 문서를 싱글 페이지 템플릿이라고 부른다.
멀티 페이지 템플릿의 엘리먼트는 id값을 가지고 있어야 하는데, 이 값은 페이지를 전환할 때 아래와 같이 사용된다. id 값이 foo인 페이지를 여는 링크의 예
<a href="foo">foo</a>
http://jquerymobile.com/demos/1.1.0/docs/pages/multipage-template.html
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <!-- Start of first page --> <div data-role="page" id="foo"> <div data-role="header"> <h1>Foo</h1> </div><!-- /header --> <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><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <!-- Start of second page --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!-- /header --> <div data-role="content"> <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p> <p><a href="#foo">Back to foo</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
참고 : http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html
dialog
대화상자라는 뜻으로 현재 페이지의 맥락을 유지하면서 새로운 페이지를 열 때 사용한다. 아래 예제는 _dialog.html 을 팝업으로 띄우는 예제다.
dialog.html
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <!-- Start of second page --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!-- /header --> <div data-role="content"> <a href="_dialog.html" data-rel="dialog">Open dialog</a> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
_dialog.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>
<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
참고 : http://jquerymobile.com/demos/1.1.0/docs/pages/page-dialogs.html
