jQuery mobile

page & dialog

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

댓글

댓글 본문
  1. 허공
    감사합니다!
  2. JustStudy
    고맙습니다
  3. WayneKing
    질문이 잘못된 거 같네요...
    스마트폰에서도 html이나 jsp와 같은 파일을 저장하고 읽을 수 있나요?
    만약 가능하면 구조(틀)는 스마트폰에서 바로 띄우고 ajax 통신하면 일반 앱이랑 비슷한 속도가 나올 거 같은 데요.
    이렇게 가능하나요?
  4. WayneKing
    잘은 모르는 데, 웹에서는 캐시라는 게 있어서 저번에 갔던 페이지는 빠르게 통신하자나요. 캐시랑 비슷하면서도 더 전문적인 기술은 없나요? 일반 앱처럼 구조(틀)는 모바일에 저장해두고 필요한 정보만 받아오는 형식으로 하이브리드 앱을 만들수 있나요?
  5. imkurtkim
    감사합니다.
  6. Heejin Oh
    다이얼로그가 제대로 동작하지 않아서 웹서버 설치 후 localhost로 접근해서 링크를 여니 제대로 동작하네요. 왜 그런지는 잘 모르겠지만...."ㅁ";;;;
  7. 2개월 전이지만,... 코드 복사할 때 드래그 하셔서 복사하시면 됩니다. 더블클릭해서 복사하면 그렇게 나오던데요
  8. 이건우
    멀티파일 실행시켰을때 혻혻혻혻 이렇게 뜨는건 뭐죠?
  9. Kiwan Jung
    저도 이것저것 시도를 많이 해봤는데요. 다이얼로그가 제대로 작동하지 않네요.
    jquery mobile 1.4.3 데모 가니까 dialog widget이 1.4부터 deprecate되고 1.5부터 없어진다고 쓰여있어서
    새로 바뀐 방법으로 시도를 해보았으나.. 사파리와 크롬에서는 그냥 큰 새 창으로 넘어갈 뿐, 팝업처럼 작은창이 열리지는 않네요. 왜그런걸까요..
    공식홈피 데모를 해보면 새 창의 내용이 팝업창 크기로 슉~하고 줄어드는데..
    누가 해결 좀 해주세요
  10. 서리
    ie말고 다른 브라우저에서는 다이얼로그가 안되나 보네요..ㅠㅠ
  11. 포스만빵
    크롬에선 다이알로그가 안열리네요..쩝.. ie에선 잘 되는데요..
  12. DaeGyung Gang
    현재 Aptana를 사용중이며, 제이쿼리 모바일 부분을 하고 있습니다.코드가 제대로 들어가도 노란색 물결선(워닝)이 계속 나타납니다. 노란물결선을 없에려면 어떻게 해야하나요?
    그리고 제이쿼리 모바일의 속성과 속성값은 자동완성이 되지 않는데, 이것들을 자동완성하게 하려면, 어떤 조정이 필요할까요?
  13. egoing
    말씀하신 요소는 html5에서 추가된 엘리먼트일 뿐 꼭 써야 하는 것은 아닙니다.
    대화보기
    • adoro
      공부하다보니 궁금한게 하나 생겼습니다.jQuery Mobile 의 html문서를 보면 doctype이 html5로 돼있는데요.이상하게 body태그 안쪽에는 html5의 기본 엘리먼트인 <header></header>, <article></article>, <section></section>, <hgroup></hgroup> 이 보이질 않습니다.jQuery Mobile에서는 없어도 상관없는 것인지 궁금합니다. 아니면 작성해야 하는 것인지요?
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기