컴퓨터/jQuery

[jquery mobile] 컴포넌트, page, 멀티페이지 템플릿, dialog

수제녹차 2020. 1. 29. 16:17
728x90
반응형

컴포넌트 : 유저가 사용하는 시스템에 대한 조작장치, 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>
반응형