-
[jquery mobile] 컴포넌트, page, 멀티페이지 템플릿, dialog컴퓨터/jQuery 2020. 1. 29. 16:17
컴포넌트 : 유저가 사용하는 시스템에 대한 조작장치, UI, 컨트롤
* page : 가장 상위의 컴포넌트로 page를 data-role의 값으로 하고 모든 컴포넌트를 포함한다
<body> <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div> </body>싱글 페이지 템플릿 : 하나의 페이지만 있는 문서
멀티 페이지 템플릿 : 하나의 웹페이지에 page가 여러개 등장하는 것
page 컴포넌트는 id값을 가질 수 있다.
멀티 페이지 템플릿일 경우 마치 웹페이지가 다른 페이지로 이동한 것 같은 효과를 줄 수 있다.
<!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>위의 예는 page가 두 개 있다.
이 때 첫 번째 페이지에서 a href='#bar'를 클릭하면 두 번째 페이지(id=bar)로 전환되고
두 번째 페이지에서 a href = '#foo'를 클릭하면 첫 번째 페이지(id=foo)로 전환된다.
* Dialog
대화상자, 현재 페이지의 맥락을 유지하면서 새로운 페이지를 열 때 사용한다.
ex) dialog.html에서 _dialog.html을 dialog로 열기
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>data-rel="dialog"를 삽입하여 dialog로 열 수 있게 한다
_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> <!-- data-rel = "back"은 뒤로 가기, 즉 종료 --> <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>'컴퓨터 > jQuery' 카테고리의 다른 글
[jQuery mobile] 설정 (0) 2020.01.29 [jquery mobile] toolbar (0) 2020.01.29 [jquery mobile] 01 (0) 2020.01.29 [jQuery] fadeIn, fadeOut (0) 2020.01.09 click event (0) 2020.01.06